高阶函数——让代码更简单，内含实例

本文中使用了箭头函数，若无了解可以查看👇

ES6学习笔记https://blog.csdn.net/TeAmo__/article/details/123053529?spm=1001.2014.3001.5501

---

目录

forEach 遍历

filter 过滤

find 查找

findIndex 查找下标

map 映射

reduce 累加

some 一些

every 所有

sort 排序

---

forEach 遍历

与for本质相同
对于空数组是不会执行回调函数的。
不改变原数组，没有返回值
可以用return；实现continue
不能使用break；

eg:用return;再forEach中实现continue

回调函数中的三个参数：item 遍历的当前项；index 遍历的当前下标；self 遍历的数组本身

    var arr = [1, 2, 3, 4, 5];
    arr.forEach((item, index, self) => {
        if (item === 3) {
            return;
        }
        console.log(item, index, self);
    });

 

filter 过滤

不对空数组检测
不改变原数组
返回值为满足过滤条件的新数组
当return为true时，当前元素输出

eg：求两个数组的交集

    var arr1 = [1, 2, 3];
    var arr2 = [2, 3, 4];
    var arr_j = arr1.filter(item => arr2.includes(item));
    console.log("交集:", arr_j);//交集: (2) [2, 3]

find 查找

对空数组不执行
返回第一个满足条件的元素
没有则返回undefined
不改变原数组

eg：找到第一个大于50的数字及下标

    var arr = [9, 10, 29, 0, 58, 100, 1];
    var num = arr.find(item => item > 50);
    var ind = arr.findIndex(item => item > 50);
    console.log(num);//58
    console.log(ind);//4

 

findIndex 查找下标

与find特点一致，返回的时第一个满足条件的下标

实例见上方代码

map 映射

返回值为新数组
新数组中的元素为对应的原数组经过函数处理后值
不对空数组进行检测
不改变原数组

实例1：将数组[,,]转化为对象[{},{},{}]

    // 将数组 urls 修改为 pics
    // var urls = [“https://dwz.cn/f2Jy4YZz”,”https://dwz.cn/pkShASrA”,”https://dwz.cn/5aBs4Tyn”] 
    // 修改为
    // pics=[{pic:”https://dwz.cn/f2Jy4YZz”},{pic:”https://dwz.cn/pkShASrA”},{pic:”https://dwz.cn/5aBs4Tyn”}]
    var urls = ["https://dwz.cn/f2Jy4YZz", "https://dwz.cn/pkShASrA", "https://dwz.cn/5aBs4Tyn"];
    console.log(urls);
    var pics = urls.map(item => ({
        "pic": item
    }));
    console.log(pics);

 实例2：将对象数组中的年龄组成新数组

    var arr = [{
            name: '小明',
            age: 16,
            sex: '男'
        },
        {
            name: '小红',
            age: 17,
            sex: '女'
        },
        {
            name: '小白',
            age: 18,
            sex: '女'
        },
    ]
    var age = arr.map(item => item.age);
    console.log(age);//(3) [16, 17, 18]

 

reduce 累加

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total     必需。初始值, 或者计算结束后的返回值。
currentValue     必需。当前元素
currentIndex     可选。当前元素的索引
arr     可选。当前元素所属的数组对象。

eg：求和函数

    function add(...arg) {
        return arg.reduce((a, b) => a + b);
    }
    console.log(add(1, 2, 3));//6
    console.log(add(1, 2, 3, 4, 5));//15

 

some 一些

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

    如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
    如果没有满足条件的元素，则返回false。

some() 不会对空数组进行检测。

some() 不会改变原始数组。

eg:判断数组是否有一个大于16岁  ，是否所有小于60岁

    var computers = [{
            name: "Apple",
            age: 8
        },
        {
            name: "IBM",
            age: 12
        },
        {
            name: "Acer",
            age: 32
        },
    ];
    var isHas = computers.some(item => item.age > 16);
    var isAll = computers.every(item => item.age < 60);
    console.log("是否有一个大于16岁:" + isHas);//true
    console.log("是否所有小于60岁:" + isAll);//true

every 所有

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

    如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
    如果所有元素都满足条件，则返回 true。

every() 不会对空数组进行检测。

every() 不会改变原始数组。

实例见上方代码 

sort 排序

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

改变原始数组！

实例1：数组排序

    var arr1 = [1, 12, 15, 33, 7, 9];
    arr1.sort((a, b) => a - b);
    console.log(arr1); //[1, 7, 9, 12, 15, 33]

实例2：对象数组中按年龄排序

    var arr2 = [{
            name: '小明',
            age: 16,
            sex: '男'
        },
        {
            name: '小红',
            age: 35,
            sex: '女'
        },
        {
            name: '小白',
            age: 18,
            sex: '女'
        },
    ]
    arr2.sort((a, b) => a.age - b.age);
    console.log(arr2);

 运行结果：

---

 点个赞吧👍