本文旨在讲解如何使用 JavaScript 的展开运算符，将包含对象信息的数组转换为一个以 objectid 为键，包含对应联系人信息的对象数组。我们将分析常见问题，并提供一种简洁高效的解决方案，帮助开发者更好地理解和运用展开运算符。
在 JavaScript 中，处理数组并将其转换为特定格式的对象数组是一项常见的任务。 本教程将重点介绍如何利用展开运算符（...）以及 Array.reduce() 方法，将一个包含具有相同 objectid 的对象的数组转换为一个以 objectid 为键，包含对应联系人信息的对象数组。
解决方案
以下代码展示了如何使用展开运算符和 reduce() 方法来实现目标：
const arr = [{
"objectid": 1,
"userid": "1",
"associationid": "123"
},
{
"objectid": 1,
"userid": "2",
"associationid": "456"
},
{
"objectid": 2,
"userid": "2",
"associationid": "456"
}
];
const res = Object.values(
arr.reduce((acc, {
objectid,
userid,
associationid
}) => {
acc[objectid] = {
...acc[objectid],
objectid,
contacts: [
...(acc[objectid]?.contacts ?? []),
{
isdelete: '1',
contactid: userid,
associationid
},
],
};
return acc;
}, {})
);
console.log(res);代码解释：
立即学习“Java免费学习笔记（深入）”；
arr.reduce((acc, { objectid, userid, associationid }) => { ... }, {}): 使用 reduce() 方法迭代 arr 数组。 acc 是累加器，初始值为空对象 {}。 每次迭代，从数组元素中解构出 objectid、userid 和 associationid。
-
acc[objectid] = { ...acc[objectid], objectid, contacts: [...] };: 这是核心部分。 它使用 objectid 作为键来访问累加器对象 acc。
...acc[objectid]: 展开运算符用于复制 acc[objectid]（如果存在）的现有属性。 如果 acc[objectid] 尚不存在，则此操作不会执行任何操作，也不会引发错误。
objectid: 显式地设置 objectid 属性。
-
contacts: [...]: 创建或更新 contacts 数组。
...(acc[objectid]?.contacts ?? []): 再次使用展开运算符。 首先，使用可选链式调用 acc[objectid]?.contacts 来安全地访问 contacts 数组，如果 acc[objectid] 不存在，则返回 undefined。 然后，使用空值合并运算符 ?? []，如果前面的表达式返回 undefined 或 null，则将其替换为空数组 []。 最后，展开该数组，将其现有元素复制到新数组中。
{ isdelete: '1', contactid: userid, associationid }: 创建一个新的联系人对象，并将其添加到 contacts 数组中。
Object.values( ... ): reduce 方法返回一个对象，其中键是 objectid，值是包含 objectid 和 contacts 数组的对象。 Object.values() 用于提取这些对象并将它们放入一个数组中。
关键点和注意事项
展开运算符 (...) 的使用: 展开运算符在此代码中扮演着至关重要的角色。 它允许我们在不修改原始对象的情况下，创建对象的副本，并向其添加新属性或修改现有属性。 这对于保持数据的不可变性非常重要。
空值合并运算符 (??) 和可选链式调用 (?.): 这两个运算符可以安全地访问可能不存在的对象属性，从而避免出现 TypeError。 当 acc[objectid] 尚未定义时，它们可以确保代码正常工作。
Array.reduce() 的初始值: reduce() 方法的第二个参数 {} 是累加器的初始值。 如果省略此参数，则会将数组的第一个元素用作初始值，这可能会导致意外的结果。
总结
本教程演示了如何使用展开运算符和 reduce() 方法，将一个包含具有相同 objectid 的对象的数组转换为一个以 objectid 为键，包含对应联系人信息的对象数组。 通过理解展开运算符、空值合并运算符、可选链式调用以及 reduce() 方法，可以编写出更简洁、更高效的 JavaScript 代码来处理各种数据转换任务。
