对比两个数组，进行条件判断和替换

有个需求，后端返回的数组在显示时，要有数据显示数据，没有数据显示配置，这个就需要写两个数组，进行数组对比及替换，目的是为得到目标数组，直接上代码：

方法1：使用forEach 来遍历数组，一一对比

function compareAndReplace(arr1, arr2, conditionFn, replaceFn) {
  // 遍历 arr1
  arr1.forEach((item1, index1) => {
    // 遍历 arr2
    arr2.forEach((item2, index2) => {
      // 判断是否符合条件
      if (conditionFn(item1, item2)) {
        // 替换对象
        arr1[index1] = replaceFn(item1, item2);
      }
    });
  });
  return arr1;
}

// 示例
const array1 = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 3, name: "Doe" },
];

const array2 = [
  { id: 1, name: "Johnny" },
  { id: 2, name: "Janet" },
  { id: 4, name: "Alice" },
];

// 定义对比条件：ID 相同
const conditionFn = (item1, item2) => item1.id === item2.id;

// 定义替换方式：用 array2 中的对象替换 array1 中的对象
const replaceFn = (item1, item2) => item2;

const result = compareAndReplace(array1, array2, conditionFn, replaceFn);

console.log(result);
// 输出: [
//   { id: 1, name: 'Johnny' },
//   { id: 2, name: 'Janet' },
//   { id: 3, name: 'Doe' }
// ]

这个函数接受四个参数：

1. arr1：要进行替换的数组。
2. arr2：用于替换的数组。
3. conditionFn：判断是否符合条件的函数，接受两个参数 item1 和 item2，对应 arr1 和 arr2 中的元素。如果返回 true，则进行替换。
4. replaceFn：替换方式的函数，接受两个参数 item1 和 item2，对应 arr1 和 arr2 中的元素。返回一个新的元素替换 arr1 中的元素。

方法2：使用 map 和 find
通过数组的 map 方法，遍历并根据条件查询和替换元素：

function compareAndReplace(arr1, arr2, conditionFn, replaceFn) {
  return arr1.map(item1 => {
    const item2 = arr2.find(item2 => conditionFn(item1, item2));
    return item2 ? replaceFn(item1, item2) : item1;
  });
}

// 示例与之前相同。使用相同的 array1, array2, conditionFn 和 replaceFn。
const result = compareAndReplace(array1, array2, conditionFn, replaceFn);
console.log(result);

方法3：使用 for...of 循环
通过 for...of 循环遍历并根据条件查询和替换元素：

function compareAndReplace(arr1, arr2, conditionFn, replaceFn) {
  for (const item1 of arr1) {
    for (const item2 of arr2) {
      if (conditionFn(item1, item2)) {
        const index1 = arr1.indexOf(item1);
        arr1[index1] = replaceFn(item1, item2);
        break;
      }
    }
  }
  return arr1;
}

// 示例与之前相同。使用相同的 array1, array2, conditionFn 和 replaceFn。
const result = compareAndReplace(array1, array2, conditionFn, replaceFn);
console.log(result);

这三种方法都可以实现数组比较和替换的功能，可以根据你的需求选择最适合的方法。如果你需要保留原始数组，方法二可能是最佳选择，因为它会返回一个新数组。