js常用的数组高阶函数

举报
FGGIT 发表于 2024/10/23 11:08:52 2024/10/23
【摘要】 js常用的数组高阶函数1.filter()filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素注意: filter() 不会对空数组进行检测。注意: filter() 不会改变原始数组。 //filter() var arr = [1,2,3,4,5] const newArr1 = arr.filter((i...

js常用的数组高阶函数

1.filter()

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

        //filter()
        var arr = [1,2,3,4,5]
        const newArr1 = arr.filter((item) => {
            return item % 2 === 0;
        });
        console.log(newArr1); //[2,4]


2.map()

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
array.map(function(currentValue,index,arr), thisValue)

        //map()
        var arr = [1, 3, 5, 7, 10];
        const newArr2 = arr.map((item) => {
          return item * 2;
        });
        console.log(newArr2); //[2,6,10,14,20]


3.forEach()

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
array.forEach(callbackFn(currentValue, index, arr), thisValue)
forEach() 本身是不支持的 continue 与 break 语句的,使用 return 语句实现 continue 关键字的效果

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


4.find() findIndex()

**find()** 方法返回数组中满足提供的测试函数的第一个元素的值
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

    var arr = [
            {
                id:'1',
                name:'a',
            },
            {
                id:'2',
                name:'b',
            },
            {
                id:'3',
                name:'a',
            }
        ]
        var obj = arr.find((item) => {
          return item.name === 'a';
        });
        var index = arr.findIndex((item) => {
          return item.name === 'a';
        });
        console.log(obj,index) //{id: "1", name: "a"} 0


5.every()

判断数组中每一项的数据是否满足设定的条件,只要找到不满足条件元素返回false,不继续向下执行,否则返回true

        var arr = [2,4,6,8]
        const state1 = arr.every((item) => {
            return item % 2 === 0;
        });
        const state2 = arr.every((item) => {
            return item > 5;
        });
        console.log(state1,state2)  //true false


6.some()

判断数组中的数据是否有满足条件的元素,只要找到满足条件的元素则返回 true,不继续向下执行; 否则返回false

        var arr = [2,3,4,5]
        const state3 = arr.some((item) => {
            return item % 2 === 0;
        });
        const state4 = arr.some((item) => {
            return item < 0;
        });
        console.log(state1,state2)  //true false


7.reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
array.map(function(currentValue,index,arr), thisValue)

        var arr = [1,2,3,4,5]
        const num1 = arr.reduce((a, b) => {
          return a + b;
        });
        console.log(num1);// 15
        const num2 = arr.reduce((a, b) => {
          return a + b;
        },10);
        console.log(num2); // 25


8.sort()

sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
注意:当数字是按字母顺序排列时&quot;40&quot;将排在&quot;5&quot;前面。
使用数字排序,你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解,你可以通过本页底部实例进一步了解它。
注意: 这种方法会改变原始数组!

        //sort()
        var points = [40,100,1,5,25,10];
        points.sort(function(a,b){return a-b});
        console.log(points) // [1,5,10,25,40,100]
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。