Vue3如再setup中如何将数组对象中的部分数据取出并修改键名输出

可以使用Vue3中的解构赋值和map函数来实现。

假设有一个数组对象arr，其中每个元素都包含name、age、gender三个属性，现在需要将其中的name属性改为username，并且只输出username和age两个属性，可以按如下方式处理：

import { reactive } from 'vue'

const arr = reactive([
  { name: 'Alice', age: 18, gender: 'female' },
  { name: 'Bob', age: 20, gender: 'male' },
  { name: 'Charlie', age: 22, gender: 'male' }
])

const { username, age } = arr.map(({ name, age }) => ({ username: name, age }))
console.log(username, age) // [ { username: 'Alice', age: 18 }, { username: 'Bob', age: 20 }, { username: 'Charlie', age: 22 } ]

在代码中，使用map函数遍历数组对象并返回一个新的对象数组，其中只包含username和age两个属性。然后使用解构赋值将新数组中每个对象的username和age属性分别赋值给变量username和age。最后输出新数组即可。

相关问题

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对象，将每个键名和值拼接成字符串输出。