JavaScript展开运算符将数组转对象数组

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JavaScript展开运算符转数组为对象数组》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

本文旨在介绍如何利用 JavaScript 中的展开运算符，将一个包含对象数据的数组转换为一个以 objectid 为键、包含 contacts 数组的对象数组。通过示例代码和详细解释，帮助读者理解并掌握这种高效的数据转换方法。

在 JavaScript 中，经常需要对数组数据进行转换和重塑。本文将探讨如何使用展开运算符（spread operator）将一个包含对象数据的数组转换为一个对象数组，该对象数组的每个元素都基于原始数组中相同的 objectid 进行分组，并将相关的 userid 和 associationid 信息聚合到 contacts 数组中。

实现方法

核心思路是使用 Array.reduce() 方法遍历原始数组，并利用展开运算符 ... 将已有的 contacts 数组展开，然后添加新的联系人信息。

以下是具体的代码实现：

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);

代码解释

1. arr.reduce((acc, { objectid, userid, associationid }) => { ... }, {}): reduce 方法遍历 arr 数组，acc 是累加器，初始值为一个空对象 {}。
2. 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 数组中。
3. Object.values( ... ): reduce 方法返回的是一个对象，该对象的键是 objectid，值是包含 contacts 数组的对象。 Object.values() 方法将该对象的值提取出来，形成一个数组，这就是最终的结果。

注意事项

• 展开运算符 ... 可以用于展开数组和对象，方便地将已有数据合并到新的数组或对象中。
• 可选链操作符 ?. 和空值合并操作符 ?? 可以避免访问不存在的属性时出现错误，使代码更加健壮。
• Array.reduce() 方法是处理数组数据的强大工具，可以用于各种数据转换和聚合操作。

总结

通过本文的讲解，您应该已经掌握了如何使用 JavaScript 中的展开运算符将数组转换为对象数组，并根据特定属性进行分组和聚合。这种方法简洁高效，可以应用于各种实际场景中。理解并熟练运用展开运算符，将有助于您编写更加优雅和高效的 JavaScript 代码。

本篇关于《JavaScript展开运算符将数组转对象数组》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！