具有相同键的数组的Javascript concat值

在JavaScript中，当你使用concat方法来合并两个或多个数组时，如果这些数组中有相同的键（在对象数组中），那么这些键的值将会被新数组中的相应元素覆盖。这是因为concat方法在合并数组时会创建一个新的数组，而不会修改原来的数组。

基础概念

数组：一种数据结构，用于存储一系列的值。
对象数组：数组中的每个元素都是一个对象。
键：在对象中，键是用来访问对象属性的标识符。
concat方法：用于合并两个或多个数组，并返回一个新数组。

类型

数组可以是基本数据类型的数组（如数字、字符串等）。
数组也可以是对象数组。

应用场景

当你需要将多个数据集合合并成一个时。
在处理分页数据或动态加载内容时。

示例代码

let arr1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
let arr2 = [{id: 2, name: 'Bobby'}, {id: 3, name: 'Charlie'}];

let combinedArray = arr1.concat(arr2);

console.log(combinedArray);
// 输出: [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 2, name: 'Bobby'}, {id: 3, name: 'Charlie'}]

在这个例子中，arr1和arr2都是对象数组，它们都有一个键为id的对象。当我们使用concat方法合并这两个数组时，由于id键的值相同，新数组中id为2的对象是arr2中的{id: 2, name: 'Bobby'}。

遇到的问题及解决方法

如果你希望在合并数组时保留所有具有相同键的对象，而不是被覆盖，你可以使用以下方法：

function mergeArraysByKey(arrays, key) {
  return arrays.reduce((acc, array) => {
    array.forEach(item => {
      let existingItem = acc.find(accItem => accItem[key] === item[key]);
      if (existingItem) {
        // 如果找到了相同键的对象，可以选择合并它们的属性
        Object.assign(existingItem, item);
      } else {
        // 如果没有找到相同键的对象，直接添加到累加器数组中
        acc.push(item);
      }
    });
    return acc;
  }, []);
}

let mergedArray = mergeArraysByKey([arr1, arr2], 'id');
console.log(mergedArray);
// 输出: [{id: 1, name: 'Alice'}, {id: 2, name: 'Bobby'}, {id: 3, name: 'Charlie'}]

在这个自定义的mergeArraysByKey函数中，我们使用了reduce方法来遍历所有的数组，并使用find方法来检查累加器数组中是否已经存在具有相同键的对象。如果存在，我们可以选择合并它们的属性；如果不存在，我们就将当前对象添加到累加器数组中。