美文网首页
数组方法find、filter、findIndex简介

数组方法find、filter、findIndex简介

作者: JEECG | 来源:发表于2023-05-28 17:54 被阅读0次

    前言

    ES6提供了很多新的API,数组对象的尤为实用,但是如果我们没有在相对应的开发环境下,很难对这些API有深入的了解,毕竟实践出真知。
    find、filter、findIndex这三个方法都是对于数组的查找,其中返回的值略微相关,所以在这里做一个介绍。

    Array.prototype.find()

    这是一个数组原型上的方法,调用格式应该是使用数组对象来调用,该方法接收一个回调函数callback,如:array.find(callback)。
    find方法用途是查找符合条件的第一个数组元素。
    例子:

    var array = [1,4,6,7,9,11,13];
    //需求: 查找大于10的第一个数
    function callback(elem){
        return elem > 10;
    }
    var dayu10 = array.find(callback);
    console.log(dayu10); // 11
    

    如果找不到,返回undefined
    例子:

    var array = [1,4,6,7,9,11,13];
    //需求: 查找大于100的第一个数
    function callback(elem){
        return elem > 100;
    }
    var dayu100 = array.find(callback);
    console.log(dayu100); // undefined
    

    很显然,这个方法比较适合用来判断数组内是否包含某种条件的值的元素。
    或者进一步扩展,查找json数组内包含某个值的对象。如下:

    var array = [
        {name:'xxa',age: 15},
        {name:'xxb',age:18}
    ];
    var xx = array.find(elem => elem.name === 'xxa');
    console.log(xx); // {name:'xxa',age: 15}
    

    Array.prototype.findIndex()

    作为原型上的方法,调用和参数与find相同。
    顾名思义,这个对比find方法,这个方法返回的是符合条件的元素的下标index。
    例子:

    var array = [1,4,6,7,9,11,13];
    //需求: 查找大于10的第一个数
    function callback(elem){
        return elem > 10;
    }
    var dayu10index = array.find(callback);
    console.log(dayu10index); // 5
    

    如果找不到,返回-1,这点类似字符串查找的indexOf或者正则表达式search,总而言之,无论什么查找方法,找不到就是-1.
    例子:

    var array = [1,4,6,7,9,11,13];
    //需求: 查找大于100的第一个数
    function callback(elem){
        return elem > 100;
    }
    var dayu100index = array.find(callback);
    console.log(dayu100index); // -1
    

    很显然,这个方法更适合用来判断数组内是否包含某种条件的值的元素。

    Array.prototype.filter()

    作为原型上的方法,调用和参数如上。
    filter方法,意思为过滤,同样接收一个回调函数callback,该方法的使用场景是查找数组内符合指定条件的所有元素。
    例子:

    var array = [1,6,5,9,7,16,18];
    //查找偶数
    function callback(elem){
        return elem % 2 === 0;
    }
    var oushu = array.filter(callback);
    console.log(oushu);// [6,16,18];
    

    该方法返回的是一个集合,即数组如果找不到,返回空数组[]。
    例子:

    var array = [1,6,5,9,7,16,18];
    //查找大于20的数
    function callback(elem){
        return elem > 20;
    }
    var dayu20 = array.filter(callback);
    console.log(dayu20);// [];
    

    结语

    这三个方法,都是对数组元素的查找,find返回第一个符合的元素的值,findIndex返回第一个符合的元素的下标,filter返回符合的元素的集合。
    这三个方法都不会改变原数组的值,具有很大的相同点,所以在这里统一介绍。
    相关链接 MDN web docs -- Array

    相关文章

      网友评论

          本文标题:数组方法find、filter、findIndex简介

          本文链接:https://www.haomeiwen.com/subject/bcudedtx.html