本文介绍了如何在 JavaScript 中，不改变原始数组的情况下，将数组中的对象根据特定条件移动到数组内的不同位置。我们将通过示例代码，详细讲解如何利用 Object.values(), flat(), 和 reduce() 方法实现这一目标，并避免使用 splice() 和 push() 等修改原数组的方法。
不可变地重组数组对象
在处理 JavaScript 对象数组时，有时我们需要根据对象的属性值重新组织数组结构，同时保持原始数据的完整性。 传统的 splice() 和 push() 方法虽然能够实现数组元素的移动，但它们会直接修改原始数组，这在某些场景下是不可接受的。 为了避免修改原数组，我们可以采用一种函数式编程的方法，结合 Object.values(), flat(), 和 reduce() 方法来实现数据的重组。
示例场景
假设我们有一个对象，其键代表星期几，每个键对应的值是一个包含多个对象的数组。 这些对象包含 day (星期几), type (例如 "open" 或 "close") 和 value (时间值) 属性。 特殊之处在于，某些 close 对象可能被错误地放在了第二天，我们需要将这些对象移动到正确的日期。
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
}
]
}实现方法
以下代码展示了如何使用 Object.values(), flat() 和 reduce() 方法来重组数据，而不修改原始的 days 对象。
立即学习“Java免费学习笔记（深入）”；
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] ??= [])：这行代码使用了空值合并运算符 (??)。如果 acc[o.day] 已经存在（即已经有对应日期的数组），则使用该数组。如果 acc[o.day] 不存在，则创建一个新的空数组并赋值给 acc[o.day]。
- .push(o): 将当前时间对象 o 添加到对应日期的数组中。
- return acc: 返回累加器，以便在下一次迭代中使用。
代码解释
Object.values() 方法返回一个由给定对象自身的所有可枚举属性值的数组。
flat() 方法创建一个新数组，其中所有子数组元素递归地连接到该数组中，直到指定的深度。 在这个例子中，我们使用默认深度 1 来扁平化数组。
reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。
总结
通过结合 Object.values(), flat() 和 reduce() 方法，我们能够以一种不可变的方式重组 JavaScript 对象数组。 这种方法避免了直接修改原始数据，确保了数据的完整性和可预测性。 在处理复杂的数据结构时，这种方法能够提高代码的可维护性和可读性。
