for...of 对数组中的对象进行迭代和解构

Question

根据 Mozilla docs，这里是如何在 for of 循环中使用解构：

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

我的问题是，如果 family 对象位于数组中，正确的解构语法是什么，如下所示：

var people = [
  {
    name: 'Tom Jones',
    family: [
     {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
     }
    ],
    age: 25
  }
];

（注意额外的一组[方括号]）

正在尝试解构使用：

for (var {name: n, family[0]: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

在方括号处给出 Unexpected token 错误。

所以在这个例子中，我如何使用解构来给f赋值？

Answer 1

您想要表示的数组结构，而不是数组索引访问。

var people = [{
  name: 'Tom Jones',
  family: [{
    mother: 'Norah Jones',
    father: 'Richard Jones',
    brother: 'Howard Jones'
  }],
  age: 25
}];

// Describe the structure -v-----------v
for (var {name: n, family: [{father: f}]} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

当然，这假设您只需要第一个成员。如果你想要更多，你可以使用rest语法。

var people = [{
  name: 'Tom Jones',
  family: [{
    mother: 'Norah Jones',
    father: 'Richard Jones',
    brother: 'Howard Jones'
  }],
  age: 25
}];

for (var {name: n, family: [{father: f}, ...rem]} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
  console.log("Remaining values: %s", rem.length);
}

Answer 2

您可以使用数组解构（任何剩余的数组元素都将被忽略）：

                        // vv            vv
for (var {name: n, family: [ {father: f} ] } of people)
  // ...

或者，由于数组只是对象，您可以使用索引作为键的对象解构：

                        // vvvvv            vv
for (var {name: n, family: { 0: {father: f} } } of people)
  // ...

for...of 对数组中的对象进行迭代和解构

for...of iteration and destructuring with an object inside an array

javascript

destructuring

ecmascript-6