解构深层属性

Dom*_*Dom 44 javascript ecmascript-6

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

例如,假设我有以下代码:

let cagingIt = {
  foo: {
    bar: 'Nick Cage'
  }
};
Run Code Online (Sandbox Code Playgroud)

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

// where foo = { bar: "Nick Cage" }
let { foo } = cagingIt;
Run Code Online (Sandbox Code Playgroud)

但是,是否可以提取深层嵌套的属性,如bar.也许是这样的:

// where bar = "Nick Cage"
let { foo[bar] } = cagingIt;
Run Code Online (Sandbox Code Playgroud)

我试图找到有关此事的文件,但无济于事.任何帮助将不胜感激.谢谢!

Dom*_*Dom 70

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

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

console.log(name); // "Nick Cage"
Run Code Online (Sandbox Code Playgroud)

在此示例中,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
Run Code Online (Sandbox Code Playgroud)

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

希望这可以帮助!

  • 考虑到解构不是零安全的,因此使用这种方式存在风险. (2认同)