vue如何将数组对象中值相同的对象取出并且将键名拼接成字符串输出

可以使用reduce方法，遍历数组对象，判断对象的值是否相同，如果相同则将键名拼接成字符串，最终将结果存储到一个新数组中。

示例代码：

let arr = [
  { name: '张三', age: 20 },
  { name: '李四', age: 20 },
  { name: '王五', age: 30 },
  { name: '赵六', age: 30 }
]

let result = arr.reduce((prev, curr) => {
  let index = prev.findIndex(item => item.value === curr.age)
  if (index === -1) {
    prev.push({ value: curr.age, names: [curr.name] })
  } else {
    prev[index].names.push(curr.name)
  }
  return prev
}, [])

result.forEach(item => {
  console.log(`${item.value}: ${item.names.join(', ')}`)
})

输出结果：

20: 张三, 李四
30: 王五, 赵六

相关问题

vue如何将数组对象中值相同的对象取出并且将键名以@字符拼接成字符串输出

可以通过遍历数组来找到值相同的对象，并将键名以@字符拼接成字符串输出。具体代码如下：

let arr = [
  { name: 'Tom', age: 18 },
  { name: 'Jim', age: 20 },
  { name: 'Lucas', age: 18 },
  { name: 'Mike', age: 20 }
];
let obj = {};

arr.forEach(item => {
  let key = item.age.toString();
  if (obj[key]) {
    obj[key].push(item.name);
  } else {
    obj[key] = [item.name];
  }
});

for (let key in obj) {
  console.log(`${key}@${obj[key].join('@')}`);
}

输出结果为：

18@Tom@Lucas
20@Jim@Mike

说明：上述代码中，我们首先创建一个空对象obj来存储结果，然后遍历数组arr，将每个对象的age属性值拼接成字符串作为obj的键名key，如果该键名已经存在，则将当前对象的name属性值添加到该键名的值中，如果不存在，则创建一个键名为key的数组，并将当前对象的name属性值添加到该数组中。最后，我们遍历obj对象，将每个键名和值拼接成字符串输出。

vue如何将数组对象中值相同的对象取出

您可以使用 Vue 中的过滤器（filter）函数来实现此功能。过滤器（filter）函数可以接受一个回调函数作为参数，该回调函数将作为过滤器的判断条件，对数据进行过滤。对于数组对象中值相同的对象取出的问题，您可以使用过滤器（filter）函数的 reduce 方法来实现。

具体来说，以下是实现此功能的示例代码：

// 假设您有一个数据集合
const data = [
  { id: 1, name: 'John', age: 20 },
  { id: 2, name: 'Mary', age: 25 },
  { id: 3, name: 'Jack', age: 20 },
  { id: 4, name: 'Tom', age: 25 },
  { id: 5, name: 'Lucy', age: 30 },
  { id: 6, name: 'Mike', age: 30 },
]

// 通过 Vue 的过滤器函数，取出 age 值相同的对象
const result = data.reduce((acc, cur) => {
  // 如果 acc 数组中已经存在 age 值与当前对象相等的对象，则将当前对象 push 进该对象对应的数组中
  // 否则，则新建一个数组，并将当前对象 push 进去，然后将该数组作为一个对象存储到 acc 数组中
  const index = acc.findIndex(item => item.age === cur.age)
  if (index !== -1) {
    acc[index].list.push(cur)
  } else {
    acc.push({
      age: cur.age,
      list: [cur]
    })
  }
  return acc
}, [])

console.log(result)
// 输出以下结果
// [
//   {
//     age: 20,
//     list: [
//       { id: 1, name: 'John', age: 20 },
//       { id: 3, name: 'Jack', age: 20 }
//     ]
//   },
//   {
//     age: 25,
//     list: [
//       { id: 2, name: 'Mary', age: 25 },
//       { id: 4, name: 'Tom', age: 25 }
//     ]
//   },
//   {
//     age: 30,
//     list: [
//       { id: 5, name: 'Lucy', age: 30 },
//       { id: 6, name: 'Mike', age: 30 }
//     ]
//   }
// ]

上述代码中，reduce 方法会遍历数据集合，并根据 age 值对数据集合中的对象进行分类。如果 acc 数组中已经存在 age 值与当前对象相等的对象，则将当前对象 push 进该对象对应的数组中；否则，则新建一个数组，并将当前对象 push 进去，然后将该数组作为一个对象存储到 acc 数组中。

最终，reduce 方法返回的结果就是一个数组，该数组中的每一个元素都是一个对象，表示 age 值相同的对象列表。