vue3 map和filter功能 用法

Vue 3 中 map 和 filter 是 JavaScript 数组的内置方法，在 Vue 组件中常用于数据处理。以下是具体用法：

map 方法

用于将数组中的每个元素转换为新形式，不改变原数组。

const arr = [1, 2, 3, 4];
const newArr = arr.map(item => item * 2);
console.log(newArr); // [2, 4, 6, 8]

在 Vue 组件中，map 可用于转换数据格式或生成新数据：

const users = [{name: '花花', age: 18}, {name: '豆豆', age: 17}];
const newArr = users.map(user => {return { name: user.name, age: `${user.age}岁` };
});
console.log(newArr); // [{name: "花花", age: "18岁"}, {name: "豆豆", age: "17岁"}]

filter 方法

用于筛选数组，返回符合条件的元素组成的数组。

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item > 3);
console.log(filteredArr); // [4, 5]

在 Vue 中，filter 可用于筛选数据：

const users = [{id: 1, name: '花花'}, {id: 2, name: '豆豆'}, {id: 1, name: '小明'}];
const ids = [1, 2];
const matchedUsers = users.filter(user => ids.includes(user.id));
console.log(matchedUsers); // [{id: 1, name: '花花'}, {id: 2, name: '豆豆'}]