数组方法扩展 find() findIndex() reduce()

1. find方法

作用：用来查找符合条件的元素，返回的是值

注意：查找到第一个指定的元素就不再查找后面的元素

注意：不改变数组原有的值

注意：不处理空数组

下面的代码解释：

1.发现控制台输出索引index时，只会输出0，因为数组的第一个值1就是小于3，那么后面的代码都不再执行。

2.因为返回值是数组的值，所以常量a的值是1

         let arr = [1, 2, 3, 4, 5];
         const a = arr.find(function (value, index) {
             console.log(index);
             // return value > 4;
             return value < 3;
         })
         console.log(a);

其它写法1：箭头函数

注意：箭头函数，只有一个参数，可以省略形式参数的括号，函数执行体就是函数的返回结果时，可以省略return和花括号

        var arr2 = [
             {
                 id: 1,
                 name: '李四',
             },
             {
                 id: 2,
                 name: '张三'
             },
             {
                 id: 1,
                 name: '李四四'
             }
         ];
         let target = arr2.find(item => item.id === 1);
         // let target = arr2.find((item) => { return item.id === 1 });
         console.log(target);
         let target2 = arr2.find(item => item.id === 3);
         console.log(target2);// undefined 因为不存在id 等于3的值

其它写法2：

提前声明函数，直接函数名作为find里面的参数即可。

         let arr = [1, 2, 3, 4, 5];
         function fn(value) {
             return value > 3;
         }
         const b = arr.find(fn);
         console.log(b);

详细查看菜鸟教程：JavaScript find() 方法 | 菜鸟教程

1.7 findIndex()方法

作用： 用来查找符合条件的元素，返回的是值的索引

注意：查找到第一个指定的元素就不再查找后面的元素

注意：查不到满足条件的值就会返回-1，

下面的代码解释：

1.发现控制台输出索引index时，只会输出0，因为数组的第一个值1就是小于3，那么后面的代码都不再执行。

2.因为返回值是数组的值的索引，所以常量a的值也是0

         let arr = [1, 2, 3, 4, 5];
         const a = arr.findIndex(function (value, index) {
             console.log(index);
             // return value > 4;
             return value < 3;
         })
         console.log(a);

其它写法1：箭头函数

         var list = [
             {
                 id: 1,
                 name: '李四',
             },
             {
                 id: 2,
                 name: '张三'
             },
             {
                 id: 1,
                 name: '李四四'
             }
         ];
         let target = list.findIndex((item) => { return item.id === 1 });
         console.log(target);// 只打印0
         let target2 = list.findIndex(item => item.id === 3);
         console.log(target2);// -1

其它写法2：

提前声明函数，直接函数名作为findIndex里面的参数即可。

最终输出3，表示索引为3的值4，它是大于3的，后面5不再执行函数

         let arr = [1, 2, 3, 4, 5];
         function fn(value) {
             return value > 3;
         }
         const b = arr.findIndex(fn);
         console.log(b); // 3 

3. reduce()

作用：数组求和

reduce里面跟回调函数：参数1是求和值，参数2是遍历数组中的值；100是累加初始值【任意】

        var arr = [1, 3, 5, 99, 100];
        const num = arr.reduce(function (sum, val) {
            return sum += val;
        }, 100);
        console.log(num); // 208
        // 箭头函数写法
        // const num = arr.reduce((sum, val) => sum += val, 0);
        // console.log(num); // 208

--后面还会补充includes方法

结尾：

学习id： 201903090124-40

现在是大三学生，学习到了vue阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处