使用 JavaScript 展开运算符高效创建对象数组

本文旨在讲解如何使用 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免费学习笔记（深入）”；

1. arr.reduce((acc, { objectid, userid, associationid }) => { ... }, {}): 使用 reduce() 方法迭代 arr 数组。 acc 是累加器，初始值为空对象 {}。 每次迭代，从数组元素中解构出 objectid、userid 和 associationid。

2. acc[objectid] = { ...acc[objectid], objectid, contacts: [...] };: 这是核心部分。 它使用 objectid 作为键来访问累加器对象 acc。

   • ...acc[objectid]: 展开运算符用于复制 acc[objectid]（如果存在）的现有属性。 如果 acc[objectid] 尚不存在，则此操作不会执行任何操作，也不会引发错误。

   • objectid: 显式地设置 objectid 属性。

     

     算家云

     高效、便捷的人工智能算力服务平台

     37

     查看详情

   • contacts: [...]: 创建或更新 contacts 数组。

     • ...(acc[objectid]?.contacts ?? []): 再次使用展开运算符。 首先，使用可选链式调用 acc[objectid]?.contacts 来安全地访问 contacts 数组，如果 acc[objectid] 不存在，则返回 undefined。 然后，使用空值合并运算符 ?? []，如果前面的表达式返回 undefined 或 null，则将其替换为空数组 []。 最后，展开该数组，将其现有元素复制到新数组中。

     • { isdelete: '1', contactid: userid, associationid }: 创建一个新的联系人对象，并将其添加到 contacts 数组中。

3. Object.values( ... ): reduce 方法返回一个对象，其中键是 objectid，值是包含 objectid 和 contacts 数组的对象。 Object.values() 用于提取这些对象并将它们放入一个数组中。

关键点和注意事项

• 展开运算符 (...) 的使用: 展开运算符在此代码中扮演着至关重要的角色。 它允许我们在不修改原始对象的情况下，创建对象的副本，并向其添加新属性或修改现有属性。 这对于保持数据的不可变性非常重要。

• 空值合并运算符 (??) 和可选链式调用 (?.): 这两个运算符可以安全地访问可能不存在的对象属性，从而避免出现 TypeError。 当 acc[objectid] 尚未定义时，它们可以确保代码正常工作。

• Array.reduce() 的初始值: reduce() 方法的第二个参数 {} 是累加器的初始值。 如果省略此参数，则会将数组的第一个元素用作初始值，这可能会导致意外的结果。

总结

本教程演示了如何使用展开运算符和 reduce() 方法，将一个包含具有相同 objectid 的对象的数组转换为一个以 objectid 为键，包含对应联系人信息的对象数组。 通过理解展开运算符、空值合并运算符、可选链式调用以及 reduce() 方法，可以编写出更简洁、更高效的 JavaScript 代码来处理各种数据转换任务。

以上就是使用 JavaScript 展开运算符高效创建对象数组的详细内容，更多请关注php中文网其它相关文章！