JavaScript中如何解构含同名属性对象的数组并获取全部对象？

嘿，这个问题问得挺实用的！咱们分几种常见场景来拆解怎么搞定数组里所有对象的解构：

如果你想把数组里所有对象的name（或者id）都收集到一个新数组里，用map配合对象解构是最简洁的方式：

const persons = [ { id: 1, name: 'Binod' }, { id: 2, name: 'John' }, { id: 3, name: 'Harry' } ];

// 提取所有name到数组
const allNames = persons.map(({ name }) => name);
console.log(allNames); // 输出：["Binod", "John", "Harry"]

// 要是想同时提取id和name到两个数组，可以用reduce
const [allIds, allNames] = persons.reduce(([ids, names], { id, name }) => {
  ids.push(id);
  names.push(name);
  return [ids, names];
}, [[], []]);
console.log(allIds); // 输出：[1, 2, 3]
console.log(allNames); // 输出：["Binod", "John", "Harry"]

如果你提前知道数组的长度（比如就3个对象），可以直接逐个对数组元素做对象解构，还能给变量重命名避免冲突：

const persons = [ { id: 1, name: 'Binod' }, { id: 2, name: 'John' }, { id: 3, name: 'Harry' } ];

const [
  { id: userId1, name: userName1 },
  { id: userId2, name: userName2 },
  { id: userId3, name: userName3 }
] = persons;

console.log(userName1); // 输出："Binod"
console.log(userId2); // 输出：2
console.log(userName3); // 输出："Harry"

如果数组长度不固定，不想手动写每一项解构，那就用遍历（比如forEach、for...of）来逐个解构对象属性：

const persons = [ { id: 1, name: 'Binod' }, { id: 2, name: 'John' }, { id: 3, name: 'Harry' } ];

// 用forEach遍历，每次解构当前对象的id和name
persons.forEach(({ id, name }) => {
  console.log(`ID: ${id}, 姓名: ${name}`);
});

// 或者用for...of循环
for (const { id, name } of persons) {
  console.log(`ID: ${id}, 姓名: ${name}`);
}

这两种方式不管数组有多少个对象，都能自动处理每一项的解构。

内容的提问来源于stack exchange，提问作者Binod