我最近开始使用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;
我试着寻找关于此事的文件,但没有用。任何帮助将不胜感激。谢谢!
4条答案
按热度按时间vdgimpew1#
有一种方法可以使用这种语法来处理嵌套对象和数组。考虑到上面描述的问题,解决方案如下:
在这个例子中,
foo
引用属性名“foo”。在冒号之后,我们使用bar
引用属性“bar”。最后,name
作为存储值的变量。对于数组反结构化,您可以这样处理它:
它遵循与对象相同的概念,只是您可以使用数组解构并存储这些值。
lyr7nygr2#
如果您安装了lodash,则可以使用以下方法之一:
_.获取
或者如果您需要多个密钥。
_.时间:
您也可以安全地将
_.at()
与Array destructures.Handy配对,以便进行json响应。ilmyapht3#
您可以将属性“as”解构为其他属性:
这里
foo
被反结构化为myFoo
。您也可以将对象“as”反结构化为反结构化对象在每种情况下只定义了一个变量,
myFoo
和bar
,您可以看到它们也位于相似的位置,只是bar
周围有{ }
。您可以根据自己的喜好对任意多的嵌套层执行此操作,但是如果您不小心深入到太多的层次,您将得到旧的
"Cannot read properties of undefined(reading 'foo')"
。在这种情况下,很明显我们不应该尝试去解构它,因为我们可以看到上一行中
foo
的定义没有定义属性baz
。你不能总是保证你的 expected 结果的每个嵌套属性都是非null
或非undefined
的,你也不能事先知道。可以通过添加
= {}
为结构破坏的对象设置默认值:您可以对深度嵌套的析构执行此操作:
如果任何一个属性是
null
或undefined
,它将导致一个级联的返回空对象,其属性将在下一级被反结构化,将只是undefined
.这是失控真的很快,虽然更深的对象,这可能是许多行代码与此格式.这里有另一个选项,做同样的事情.如果在
foo
、bar
或baz
过程沿着的任何一点为null或undefined
或null
,它将返回一个空对象,您可以对其进行反结构(??
之后的空对象)。如果你只需要提取一个属性,那么在
{ qux }
上使用反结构化就没有多大意义了,因为这也需要我们添加一个合并后的空值?? {}
。就我个人而言,我认为包含所有可选的链接问号看起来有点混乱,但这比在每一层都使用嵌套的反结构化和默认值要好。
它可以处理数组
slhcrj9b4#
三级深
为了帮助大家,这里有一段代码展示了如何解构三个层次的结构,在这个例子中,我对一个数组使用
find()
方法。上面的数组数据结构如下(数组中的每个obj都是相同的形状):