本文旨在介绍如何利用 JavaScript 中的展开运算符，将一个包含对象数据的数组转换为一个以 objectid 为键、包含 contacts 数组的对象数组。通过示例代码和详细解释，帮助读者理解并掌握这种高效的数据转换方法。
在 JavaScript 中，经常需要对数组数据进行转换和重塑。本文将探讨如何使用展开运算符（spread operator）将一个包含对象数据的数组转换为一个对象数组，该对象数组的每个元素都基于原始数组中相同的 objectid 进行分组，并将相关的 userid 和 associationid 信息聚合到 contacts 数组中。
实现方法
核心思路是使用 Array.reduce() 方法遍历原始数组，并利用展开运算符 ... 将已有的 contacts 数组展开，然后添加新的联系人信息。
立即学习“Java免费学习笔记（深入）”；
以下是具体的代码实现：
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);代码解释
- arr.reduce((acc, { objectid, userid, associationid }) => { ... }, {}): reduce 方法遍历 arr 数组，acc 是累加器，初始值为一个空对象 {}。
-
acc[objectid] = { ...acc[objectid], objectid, contacts: [ ... ] };: 这行代码是核心部分。
- acc[objectid]： 使用 objectid 作为键来访问累加器对象 acc。如果 acc 中已经存在该 objectid 的键，则访问已有的对象；否则，创建一个新的键。
- ...acc[objectid]：展开运算符用于将已有的 acc[objectid] 对象（如果存在）的属性复制到新的对象中。
- objectid：显式地设置 objectid 属性。
- contacts: [ ... ]：创建或更新 contacts 数组。
- ...(acc[objectid]?.contacts ?? [])：展开已有的 contacts 数组。 acc[objectid]?.contacts ?? [] 使用了可选链操作符 (?.) 和空值合并操作符 (??)，以确保即使 acc[objectid] 或 contacts 属性不存在，也不会导致错误。如果 acc[objectid] 存在且 contacts 属性存在，则展开 contacts 数组；否则，使用一个空数组 []。
- { isdelete: '1', contactid: userid, associationid }：创建一个新的联系人对象，并将其添加到 contacts 数组中。
- Object.values( ... ): reduce 方法返回的是一个对象，该对象的键是 objectid，值是包含 contacts 数组的对象。 Object.values() 方法将该对象的值提取出来，形成一个数组，这就是最终的结果。
注意事项
- 展开运算符 ... 可以用于展开数组和对象，方便地将已有数据合并到新的数组或对象中。
- 可选链操作符 ?. 和空值合并操作符 ?? 可以避免访问不存在的属性时出现错误，使代码更加健壮。
- Array.reduce() 方法是处理数组数据的强大工具，可以用于各种数据转换和聚合操作。
总结
通过本文的讲解，您应该已经掌握了如何使用 JavaScript 中的展开运算符将数组转换为对象数组，并根据特定属性进行分组和聚合。这种方法简洁高效，可以应用于各种实际场景中。理解并熟练运用展开运算符，将有助于您编写更加优雅和高效的 JavaScript 代码。
