vue 数组对象相同id合并新的对象数组

在Vue.js中，如果你有一个数组，其中包含多个对象，每个对象都有一个唯一的`id`字段，并且你需要将具有相同`id`的对象合并成一个新的对象，你可以使用`filter()`、`reduce()`或者结合`Map`数据结构来实现这个功能。这里是一个简单的例子：

let originalArray = [
  { id: '1', name: 'John', age: 30 },
  { id: '2', name: 'Jane', age: 25 },
  { id: '1', hobby: 'Reading' },
];

// 使用 reduce 方法合并
let mergedArray = originalArray.reduce((acc, obj) => {
  if (!acc[obj.id]) acc[obj.id] = { ...obj };
  else {
    // 如果存在，则添加新属性并更新值
    acc[obj.id].hobby = [...(acc[obj.id].hobby || []), obj.hobby];
  }
  return acc;
}, {});

console.log(mergedArray);
// 结果：{ '1': { id: '1', name: 'John', age: 30, hobby: ['Reading'] }, '2': { id: '2', name: 'Jane', age: 25 } }

相关问题

vue 数组对象相同id合并

Vue.js 中可以使用 `map`、`filter` 和 `reduce` 等数组操作结合对象属性来合并具有相同 ID 的数组对象。以下是一个基本的例子：

let arr = [
  { id: '1', name: 'Tom' },
  { id: '1', age: 20 },
  { id: '2', name: 'Jerry' },
  { id: '3', name: 'Spike' }
];

// 使用 reduce 函数将具有相同 ID 的对象合并
let combinedObj = arr.reduce((acc, curr) => {
  if (!acc[curr.id]) {
    acc[curr.id] = { ...curr };
  } else {
    for (let key in curr) {
      // 如果新对象有当前对象没有的键值，则添加
      if (!acc[curr.id][key]) {
        acc[curr.id][key] = curr[key];
      }
    }
  }
  return acc;
}, {});

console.log(combinedObj);
// 输出：
// {
//   1: { id: '1', name: 'Tom', age: 20 },
//   2: { id: '2', name: 'Jerry' },
//   3: { id: '3', name: 'Spike' }
// }

vue 两个数组对象相同名字去重

可以使用 JavaScript 的 `filter()` 和 `some()` 方法来实现。

假设有两个数组 `arr1` 和 `arr2`，每个数组中包含多个对象，对象有一个属性名为 `name`。

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

const arr2 = [
  { id: 4, name: 'Jane' },
  { id: 5, name: 'David' },
  { id: 6, name: 'John' }
];

我们需要去重后的数组 `result`，其中包含两个原数组中所有不重复的对象。

const result = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Mike' },
  { id: 3, name: 'Jane' },
  { id: 5, name: 'David' }
];

可以通过以下代码实现：

// 合并两个数组
const allArr = [...arr1, ...arr2];

// 去重，保留第一个出现的对象
const result = allArr.filter((obj, index, self) => {
  return index === self.findIndex(item => item.name === obj.name);
});

这里的 `filter()` 方法会遍历每个对象，保留第一个出现的同名对象，去除后续的同名对象。`some()` 方法用于查找是否有同名对象。