J*aScript：如何在不改变原数组的情况下，将数组中的元素移动到另一个数组

发布时间：2025-11-16

点击量：

javascript：如何在不改变原数组的情况下，将数组中的元素移动到另一个数组

本文将介绍如何在 J*aScript 中，针对一个包含日期和时间信息的对象，将特定元素从数组中取出并移动到另一个数组，同时避免修改原始数据。我们将通过 Object.values()、flat() 和 reduce() 方法来实现这一目标，确保数据的完整性和可维护性。

解决方案：使用 Object.values()、flat() 和 reduce()

核心思路是将对象的所有值（即数组）提取出来，然后将这些数组扁平化为一个单一的数组。最后，使用 reduce() 方法，根据每个对象的 day 属性，将它们重新组合成一个新的对象。这样，原始对象就不会被修改。

代码实现

假设我们有以下数据结构：

Waifulabs

一键生成动漫二次元头像和插图

317 查看详情 Waifulabs

const days = {
  "monday": [{
      "day": "monday",
      "type": "open",
      "value": 43200
    },
    {
      "day": "monday",
      "type": "close",
      "value": 75600
    }
  ],
  "tuesday": [{
      "day": "tuesday",
      "type": "open",
      "value": 43200
    },
    {
      "day": "tuesday",
      "type": "close",
      "value": 75600
    }
  ],
  "wednesday": [{
      "day": "wednesday",
      "type": "open",
      "value": 43200
    },
    {
      "day": "wednesday",
      "type": "close",
      "value": 75600
    }
  ],
  "thursday": [{
      "day": "thursday",
      "type": "open",
      "value": 43200
    },
    {
      "day": "thursday",
      "type": "close",
      "value": 75600
    }
  ],
  "friday": [{
    "day": "friday",
    "type": "open",
    "value": 36000
  }],
  "saturday": [{
      "day": "friday",
      "type": "close",
      "value": 3600
    },
    {
      "day": "saturday",
      "type": "open",
      "value": 36000
    }
  ],
  "sunday": [{
      "day": "saturday",
      "type": "close",
      "value": 3600
    },
    {
      "day": "sunday",
      "type": "open",
      "value": 43200
    },
    {
      "day": "sunday",
      "type": "close",
      "value": 75600
    }
  ]
}

const result = Object.values(days).flat().reduce((acc, o) => {
    (acc[o.day] ??= []).push(o);
    return acc;
}, {});

console.log(result);

代码详解

Object.values(days): 这个方法提取 days 对象的所有值，返回一个包含所有数组的数组。
.flat(): 这个方法将上一步返回的数组扁平化为一个单一的数组，其中包含了所有的时间对象。
.reduce((acc, o) => { ... }, {}): reduce() 方法用于遍历扁平化后的数组，并构建一个新的对象。
- acc: 累加器，用于存储最终结果。初始值是一个空对象 {}。
- o: 当前正在处理的数组元素（即一个时间对象）。
- (acc[o.day] ??= []).push(o): 这行代码是核心逻辑。它首先检查累加器 acc 中是否已经存在以当前时间对象的 day 属性为键的数组。如果不存在，则使用空数组 [] 初始化该键的值。然后，将当前时间对象 o 推入到对应的数组中。 ??= 是空值合并赋值运算符，相当于 acc[o.day] = acc[o.day] || []。
- return acc: 返回更新后的累加器，用于下一次迭代。

优点

不可变性 (Immutability): 此方法不会修改原始的 days 对象，而是创建一个新的对象 result。
简洁性: 代码简洁易懂，使用了现代 J*aScript 的特性。
灵活性: 可以轻松地适应不同的数据结构，只要对象中包含 day 属性即可。

注意事项

此方法依赖于 Object.values()、flat() 和空值合并赋值运算符 ??=，这些都是 ES2019 及更高版本引入的特性。如果需要在旧版本的 J*aScript 环境中使用，可能需要使用 polyfill 或替代方案。
确保对象中的每个元素都包含 day 属性，否则可能会导致意料之外的结果。

总结

通过使用 Object.values()、flat() 和 reduce() 方法，我们可以高效且安全地将数组中的元素移动到另一个数组，同时保持数据的不可变性。这种方法在处理复杂数据结构时非常有用，可以提高代码的可维护性和可读性。

立即学习“J*a免费学习笔记（深入）”；

以上就是J*aScript：如何在不改变原数组的情况下，将数组中的元素移动到另一个数组的详细内容，更多请关注其它相关文章！

上一篇：使用CSS实现环绕圆形菜单的数字布局

下一篇：动态J*aScript中创建与操作SVG元素的教程