当前位置：首页 > web >正文

vue3 各种数据处理

web 2025/7/18 22:00:04

1.对数组去重, 并取出想要的值

用途：获取此数组中共有几个名字

方法：...new Map，map,values()

示例：

    let aar = [{id: 1, name: 'name1', value: 'value1'},{id: 1, name: 'name1', value: 'value2'},{id: 2, name: 'name2', value: 'value3'},{id: 2, name: 'name2', value: 'value4'},{id: 2, name: 'name2', value: 'value5'},{id: 1, name: 'name1', value: 'value6'},]
//对数组id和name都相同的数据去重, 并取出他的id和name值let list=[...new Map(aar.map(item => [`${item.id}-${item.name}`, {id: item.id, name: item.name}])).values()]console.log(list)

结果：

2.获取数据源中包含此id数组的数据

用途：想要通过id数组来取得数据源中对应数据

方法：filter，map

示例：

    let arr = [{label: '11', value: '11', id: 1},{label: '22', value: '22', id: 2},{label: '33', value: '33', id: 3},{label: '44', value: '44', id: 4},{label: '55', value: '55', id: 5},]let ids = [1, 2]//取数据源中与此ids数组中id 相同的数据并且获取它的指定值(value)const matchedId1 = arr.filter(item => ids.includes(item.id)).map(item => item.value);//取数据源中与此ids数组中id 相同的对象const matchedId2 = arr.filter(item => ids.includes(item.id));console.log(matchedId1, matchedId2) //matchedId1:值 ，matchedId2:对象

可直接获取指定值，或者获取其对象

结果：

3.判断此id在不在数组中

用途：做校验

方法：findIndex

findIndex()方法用于查找数组中满足条件的第一个元素的索引值。该方法会遍历数组，对每个元素执行回调函数，直到找到使回调函数返回true的元素，然后立即返回该元素的索引。如果遍历完整个数组都没有找到符合条件的元素，则返回-1。

语法：

array.findIndex(callback(element[, index[, array]])[, thisArg])

参数说明：

callback：必需，用于测试每个元素的函数
- element：当前处理的元素
- index：可选，当前元素的索引
- array：可选，调用findIndex的数组本身
thisArg：可选，执行回调时用作this的对象

示例：

let arr = [{name: '小王', age: 18, id: 1},{name: '小李', age: 20, id: 2},{name: '小张', age: 19, id: 3},]const foundIndex = arr.findIndex(item => item.age == 19); //索引//foundIndex>-1 存在console.log(foundIndex); //输出的是索引

结果：