JavaScript：不可变地将数组中的对象移动到不同位置

本文介绍了如何在 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);

这段代码的工作原理如下：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

1. Object.values(days): 提取 days 对象的所有值（即包含时间对象的数组），并将它们放入一个新的数组中。
2. .flat(): 将包含数组的数组扁平化为一个单一的数组。 这样，所有的时间对象都位于同一个数组中。
3. .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 对象数组。 这种方法避免了直接修改原始数据，确保了数据的完整性和可预测性。 在处理复杂的数据结构时，这种方法能够提高代码的可维护性和可读性。

以上就是JavaScript：不可变地将数组中的对象移动到不同位置的详细内容，更多请关注php中文网其它相关文章！