本文旨在介绍如何利用 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 代码。
以上就是使用 JavaScript 展开运算符将数组转换为对象数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511905.html
微信扫一扫 
支付宝扫一扫 
