es6数组方法find()、findIndex()与filter()的总结

Posted 2023-05-11

参考技术A 1、find(value, index, arr)
该方法主要应用于查找第一个符合条件的数组元素。当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。

2、findIndex()
与find()的使用方法相同，不同的是该方法返回符合条件的元素索引值，没有则返回-1

3、filter()
与find()使用方法也相同。不同的地方在于返回值。filter()返回的是所有满足条件的元素，而find()只返回第一个满足条件的元素。

上面2个方法返回结果一样

可用用于数组去重：

es6数组方法find()findIndex() filter()的总结

find()查找符合条件数组的元素（只能够找出第一个符合条件的）

// 查找出大33的元素.
// find查找第一个符合条件的数组元素(只查找出第一个  找不到返回undefined)
// 它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。
// 回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。
let arr = [11, 22, 33, 44, 45, 66, 77, 88];
let firstArr = arr.find((v) => {
     return v > 34
});
console.log(firstArr); //输出44



// 找到下标为1的那个元素
let conarr = [1, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr = conarr.find((value, index, arr) => {
    return index == 1;
})
console.log(newArr); //3

查找符合数组元素的下标（只能够找出第一个符合条件的）

// findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素
// 如果没有符合条件元素时findIndex()返回的是-1，
// 注意find()方法返回的是 undefined
let arr2 = [11, 22, 33];
let newarr1 = arr2.findIndex((v, i, arr) => {
    return v > 22;
})
console.log(newarr1) // 输出小标是2

filter()查找符合条件的元素数组，（返回多个只要符合条件）

// filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。
// filter()返回的是符合条件的元素数组。通常用于过滤
// find()只返回第一个满足条件的元素。如果条件不满足，返回的是undefined. 满足条件返回第一个元素(只返回一个)
//filter()条件不满足返回的是一个空数组，而find()返回的是undefined,满足条件返回符合元素的数组(返回多个)
let arr3 = [{
        book: "三国演义",
        id: "180001",
        price: 44,
    },
    {
        book: "幻城",
        id: "180002",
        price: 30
    },
    {
        book: "西游记",
        id: "180003",
        price: 41
    }
];
let newarr4 = arr3.filter((v, i, arr) => {
    return v.price > 40
})
console.log(newarr4)

在一个数组中删除某一个特定的值。如在下面的数组中删除小明。返回一个新的数组

let arr5 = [‘小明‘, ‘张三‘, ‘李四‘, ‘王武‘];
let arrindex6 = arr5.findIndex((v, i, arr) => {
    return v == "小明"
});
console.log(arrindex6); //输出为0,只能够找到一个
arr5.splice(arrindex6, 1); //注意呀！数组的很多基本方法，会改变原数组，同时返回被删除的那个元素。
console.log(arr5);
// ==============

// 可以将上面的代码优化一下
let arr6 = [‘小明‘, ‘张三‘, ‘李四‘, ‘王武‘];
arr6.splice(arr6.findIndex(v => v == "小明"), 1);
console.log(arr6);

返回被删除的那个元素

arr7= [‘小明‘, ‘张三‘, ‘李四‘, ‘王武‘];
console.log(arr7.splice(0,1));//返回被删除的那个元素

注意和上面的区别

arr8 = [‘小明‘, ‘张三‘, ‘李四‘, ‘王武‘];
arr8.splice(0, 1); //改变原数组。返回被删除的那个元素
console.log(arr8);//?["张三", "李四", "王武"]