如何在for循环中解构嵌套对象答案

【问题标题】：How to destructure nested objects in for-loop如何在for循环中解构嵌套对象
【发布时间】：2018-11-27 19:38:08
【问题描述】：

var users = [
   { user: "Name1",geo:{lat:'12',long:'13'} },
   { user: "Name2",geo:{lat:'12',long:'13'}, age: 2 },
   { user: "Name2",geo:{lat:'12',long:'13'} },
   { user: "Name3",geo:{lat:'12',long:'13'}, age: 4 }
 ];

上面是对象数组。

这是for-loop 我解构并获取用户和年龄，但我还想要经纬度，我该怎么做？我希望通过解构和for-loop 来实现，就像我对用户和年龄所做的那样

for (let { user, age = "DEFAULT AGE" } of users) {
  console.log(user, age);
}

【问题讨论】：

添加, geo: {lat, lang}（或long，取决于拼写）？

标签： javascript for-loop ecmascript-6 destructuring

【解决方案1】：

你可以用这个：

for (let {user, age = "DEFAULT AGE", geo: {lat, long}} of users) {
  console.log(user, age, lat, long);
}

您已经成功地解构了user（仅通过对象中的属性名称）和age（也具有默认值）。

要逐步使用嵌套的destructuring，只需将属性名称geo 也放入其中，因为这是您正在迭代的对象的下一个包含所需值的属性：

{user, age = "DEFAULT AGE", geo} — 这将为geo 生成{lat: "12", long: "13"}。

要直接访问嵌套属性，请遵循对象结构：

{user, age = "DEFAULT AGE", geo: {}} — 这只会验证 geo 确实是一个对象。

然后，列出您要在该对象中访问的属性：

{user, age = "DEFAULT AGE", geo: {lat, long}} — 这将产生"12" 对应lat 和"13" 对应long。

您甚至可以更进一步重命名这些属性：

{user, age = "DEFAULT AGE", geo: {lat: latitude, long: longitude}} — 这将产生"12" 对应latitude 和"13" 对应longitude。

这些是解构对象的基本情况：

name 的意思是“只需将整个值分配给 name”。
{} 的意思是“检查要解构的值是一个对象还是可以转换成一个对象，即既不是null也不是undefined；不创建变量”。
{ prop } 表示“获取prop 的值作为变量prop”。
{ prop: rename } 的意思是“遵循prop 属性并获取其值作为变量rename”¹。
{ prop = value } 的意思是“获取prop 的值作为变量prop，但如果prop 产生undefined 则分配value”²。

对于“重命名”的情况，规则递归应用：rename 类似于name，因此可以替换为{}，或{ anotherProp }，或{ anotherProp: anotherRename }，或{ anotherProp = anotherDefault } 等.

同一对象级别的其他属性可以通过逗号添加，例如{propA, propB}。

对于数组，存在类似的情况：[] 将验证要解构的值是一个 iterable 对象； [a, b]与{0: a, 1: b}含义相同；等等

1：请注意，在{ prop: something } 的情况下，不会创建变量prop。

2：“yields undefined”意味着obj.prop 将等于undefined，这意味着该属性存在并且具有字面值undefined，或者该属性不存在。

【讨论】：

【解决方案2】：

如果您只是想查找给定用户并为其返回地理位置，则可以这样做：

users.find( u => u.user === 'Name1' ).geo;

请记住，在尝试使用它之前，您可能需要对“查找结果”进行一些检查。例如：

const user = users.find( u => u.user === 'Name1' );

if (user && user.hasOwnProperty('geo')) {
    console.log(user.geo);
}

【讨论】：