javascript - 解构深层属性

标签 javascript ecmascript-6

我最近开始使用 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;

我曾尝试查找有关此事的文档,但无济于事。任何帮助将不胜感激。谢谢!

最佳答案

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

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

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

希望这对您有所帮助!

关于javascript - 解构深层属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34211076/

相关文章:

javascript - 数组如何按两个属性分组?

javascript - 如何在ajax响应后重绘数据表

javascript - 404 未找到从 nodejs/connect.static 获取静态文件 ('../angularjs' )

javascript - 从 $_GET 传递到 $_SESSION 时出现奇怪的错误

javascript - new.target 属性在绑定(bind)函数中表现出意外

javascript - 在 1 级深度上翻转键值对

javascript - 如何在同一网页上使用多个具有不同图像的引导巨型屏幕?

javascript - 在URL中显示同位素组合过滤器项

javascript - 并发是 JavaScript 语言的一个特性吗?

javascript - 为什么我在这个简单的组件中遇到 Angular 编译错误