Question

我最近开始使用ES6的destructuring赋值语法，并开始熟悉这个概念。我想知道是否可以使用相同的语法提取嵌套属性。

例如，假设我有以下代码：

let cagingIt = {
  foo: {
    bar: 'Nick Cage'
  }
};

我知道我可以通过执行以下操作来访问变量foo：

// where foo = { bar: "Nick Cage" }
let { foo } = cagingIt;

但是，是否可以提取深层嵌套的属性，例如bar。也许是这样的：

// where bar = "Nick Cage"
let { foo[bar] } = cagingIt;

我试过找到有关此事的文件，但无济于事。任何帮助将不胜感激。谢谢！

Answer 1

有一种方法可以使用这种语法处理嵌套对象和数组。鉴于上述问题，解决方案如下：

let cagingIt = {
      foo: {
        bar: 'Nick Cage'
      }
    };
let { foo: {bar: name} } = cagingIt;

console.log(name); // "Nick Cage"

在此示例中，foo指的是属性名称“foo”。在冒号之后，我们使用bar引用属性“bar”。最后，name充当存储值的变量。

对于数组解构，你可以像这样处理它：

let cagingIt = {
      foo: {
        bar: 'Nick Cage',
        counts: [1, 2, 3]
      }
    };

let { foo: {counts: [ ct1, ct2, ct3 ]} } = cagingIt;
console.log(ct2); // prints 2

它遵循与对象相同的概念，只是您可以使用数组解构并存储这些值。

希望这有帮助！

Answer 2

如果已安装lodash，则可以使用以下之一：

注意：这两种方法都是null安全的，如果key：value不存在，则会安全地返回undefined。

_。get

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3

或者如果您需要多个键。

_。at

var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };

_.at(object, ['a[0].b.c', 'a[1]']);
// => [3, 4]

您还可以将_.at()与数组解构安全地配对。方便于json响应。

[title, artist, release, artwork] = _.at(object, [
  'items[0].recording.title',
  'items[0].recording.artists[0].name',
  'items[0].recording.releases[0].title',
  'items[0].recording.releases[0].artwork[0].url'
]);

解构深层属性

2 个答案: