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