解构深层属性答案

【问题标题】：Destructuring deep properties解构深层属性
【发布时间】：2023-03-23 18:51:02
【问题描述】：

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

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

【问题讨论】：

是 { bar } = cagingIt.foo;不够？
@RobFoley 绝对是一个好方法，但更好奇的是语法是否支持深度嵌套属性的解构。
你肯定喜欢尼古拉斯凯奇。
同意@Dom。我希望 Mongo 中存在像 foo.$.bar 这样的解决方案
为什么我总是忘记这一点，不得不继续回到这个帖子：/

标签： javascript ecmascript-6

【解决方案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

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

希望这会有所帮助！

【讨论】：

很好，我在 Babel repl 上戳了一下，但没有尝试那种语法。
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…中有一个类似的例子
当你在深度解构的同时使用计算属性名称时会变得非常疯狂。
另一种奇怪的方法是 let { ['foo']: {['bar']: name} } = cagingIt;
考虑到解构不是空安全的，所以使用这种方式是有风险的。

【解决方案2】：

如果你安装了 lodash，你可以使用以下方法之一：

_.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'
]);

【讨论】：