JavaScript 数组方法filter与reduce

 更新时间:2022年07月01日 15:41:46   作者:程序员布欧  
这篇文章主要介绍了JavaScript 数组方法filter与reduce,在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce

前言

在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce

filter

主要用于筛选数组的filter方法,在使用中,不会改变原数组,同时会将符合筛选条件的元素,放入新的数组进行返回。

/***
   * @item 数组元素
   * @index 遍历数组下标
   * @thisArr 当前数组
   */
let arr1 = [1, 2, 3, 4, 5];
  let newArr1 = arr1.filter((item, index, thisArr) => {
    console.log(item);
    console.log(index);
    console.log(thisArr);
    return item > 2;
  })
  console.log(arr1);
  console.log(newArr1);`

上面的代码,运行之后,可以看到原来的数组arr1没有发生改变,而newArr1用于接收符合筛选条件的数组

// [1, 2, 3, 4, 5]  arr1
// [3, 4, 5]    newArr1

reduce

不同于map和filter这类遍历方法,reduce的语法较为特殊一点

语法:

array.reduce(function(total,currentValue,currentIndex,thisArr){},initValue);
@function回调函数作为第一个参数,
  • total作为返回值或者初始值进行返回
  • currentValue当前遍历的元素
  • currentIndex当前遍历元素下标
  • thisArr为当前执行操作的数组。
  • initValue是作为传递给函数的初始值

数组求和

// 数组求和
let arr1 = [1, 2, 3, 4, 5]
let totals = arr1.reduce(function (prev, next) {
    console.log(prev);
    console.log(next);
    return prev + next;
}, 0)
console.log(totals)

筛选首字母是否是含有b字母

let arr = ['beep', 'boop', 'foo', 'bar'];
console.log(arr.reduce((acc, val) => (val[0] === 'b' && acc.push(val), acc), []));

// 进阶每个数是否含有'b'
arr.reduce((acc, val) =>
           (val.indexOf('b') >-1 && acc.push(val), acc),
           [])

除了数组求和之外,reduce还可以处理数组去重,遍历最大值最小值的操作

同时还能已高阶函数的形式供其他函数进行调用。

结语

reduce和filter作为ES6中数组新增的方法,在面试和开发中经常会遇到,可以通过这两个函数结合其他类似map等新方法去处理一些较为复杂的数据。

到此这篇关于JavaScript 数组方法filter与reduce的文章就介绍到这了,更多相关JavaScript filter与reduce内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    这篇文章主要介绍了Bootstrap jquery.twbsPagination.js动态页码分页实例代码,需要的朋友可以参考下
    2017-02-02
  • javascript函数定义的几种区别小结

    javascript函数定义的几种区别小结

    本篇文章主要是对javascript函数定义的几种区别进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • ES6的内置对象扩展实现示例

    ES6的内置对象扩展实现示例

    本文主要介绍了ES6的内置对象扩展实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • uniapp 使用定位示例详解

    uniapp 使用定位示例详解

    这篇文章主要为大家介绍了uniapp如何使用定位过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JS实现放烟花效果

    JS实现放烟花效果

    这篇文章主要为大家详细介绍了JS实现放烟花效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript中点击事件的写法

    JavaScript中点击事件的写法

    这篇文章主要介绍了JavaScript中点击事件的写法的相关资料,其中还给大家分享js触发按钮点击功能的实现,本文介绍的非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript实现大图轮播效果

    JavaScript实现大图轮播效果

    这篇文章主要为大家详细介绍了JavaScript实现大图轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript实现级联菜单的方法

    JavaScript实现级联菜单的方法

    这篇文章主要介绍了JavaScript实现级联菜单的方法,涉及javascript页面元素操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 原生js实现购物车逻辑和功能

    原生js实现购物车逻辑和功能

    这篇文章主要为大家详细介绍了原生js实现购物车逻辑和功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript实现页面跳转的5种方法总结

    JavaScript实现页面跳转的5种方法总结

    在前台开发中会涉及页面跳转的问题,下面这篇文章主要给大家总结介绍了关于JavaScript实现页面跳转的5种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论