庖丁解牛“一知半解”：庖丁解牛，合并数组！

2023-10-12 12:44:50

在繁忙的编程世界中，数据合并是一个司空见惯的任务。当你需要根据某个特定属性合并两个数组时，reduce 函数是一个强大的工具，它可以让你优雅地实现这一目标。在这篇“一知半解”指南中，我们将深入探讨如何使用 reduce 根据 id 合并两个数组，同时揭开 reduce 函数的神秘面纱。

reduce 的奥秘

reduce 函数是 JavaScript 中一个内置的高阶函数，它将一个数组缩减为单个值。它以累积的方式工作，通过依次将数组中的每个元素应用于一个回调函数，并返回一个新的累积值。

在我们的情况下，我们将使用 reduce 根据 id 属性合并两个数组。为此，我们的回调函数将接收两个参数：

prev： 累积值（初始值为数组中的第一个元素）
cur： 当前正在处理的数组元素

切入正题

现在，让我们动手吧！假设我们有两个数组 arr1 和 arr2，它们都包含对象，每个对象都有一个 id 属性：

const arr1 = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
];

const arr2 = [
  { id: 1, age: 25 },
  { id: 2, age: 26 },
];

我们的目标是根据 id 属性将这两个数组合并成一个新的数组 mergedArr。为此，我们可以使用 reduce 函数如下：

const mergedArr = arr1.reduce((prev, cur) => {
  // 检查当前元素的 id 是否在 prev 中
  const index = prev.findIndex(obj => obj.id === cur.id);

  // 如果存在，更新其值
  if (index > -1) {
    prev[index] = { ...prev[index], ...cur };
  } 
  // 如果不存在，添加它
  else {
    prev.push(cur);
  }

  return prev;
}, []);