当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript展开运算符将数组转对象数组

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

2025-07-25 14:09:37 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《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);

代码解释

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() 方法将该对象的值提取出来，形成一个数组，这就是最终的结果。

注意事项