返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript 数组方法filter与reduce
  • 641
分享到

JavaScript 数组方法filter与reduce

2024-04-02 19:04:59 641人浏览 安东尼
摘要

目录前言filterreduce数组求和筛选首字母是否是含有b字母结语前言 在es6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter

前言

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

filter

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


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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript 数组方法filter与reduce

本文链接: https://lsjlt.com/news/153210.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript 数组方法filter与reduce
    目录前言filterreduce数组求和筛选首字母是否是含有b字母结语前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter...
    99+
    2024-04-02
  • JavaScript如何使用reduce实现数组filter方法
    这篇文章主要为大家展示了“JavaScript如何使用reduce实现数组filter方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何...
    99+
    2024-04-02
  • JavaScript数组reduce()方法
    将某个值减去数组中的每个元素: var items = [5, 10, 15]; var reducer = function minus(minusSum, item) {    ...
    99+
    2024-04-02
  • JavaScript数组filter方法
    目录1、定义2、语法3、参数说明4、用法5、注意事项6、使用实例1、定义   filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元...
    99+
    2022-12-08
    js数组filter js数组filter方法
  • JavaScript数组reduce()方法的语法与实例解析
    前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数...
    99+
    2024-04-02
  • Javascript数组方法reduce怎么用
    这篇文章主要为大家展示了“Javascript数组方法reduce怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Javascript数组方法reduce怎...
    99+
    2024-04-02
  • JavaScript数组reduce()方法怎么用
    本篇内容主要讲解“JavaScript数组reduce()方法怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法怎么用”吧!将某个值减去数组中的每个...
    99+
    2023-06-26
  • JavaScript中如何使用 .map()、.reduce() 和 .filter()方法
    这篇文章主要为大家展示了“JavaScript中如何使用 .map()、.reduce() 和 .filter()方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何使用...
    99+
    2023-06-02
  • javascript数组中的reduce方法和pop方法
    目录一、reduce方法1直接vs打开2代码部分3运行结果二、pop方1直接vs打开2代码部分3运行结果前言: 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说fo...
    99+
    2024-04-02
  • JavaScript数组reduce()方法怎么使用
    这篇文章主要介绍了JavaScript数组reduce()方法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript数组reduce()方法怎么使用文章都会...
    99+
    2024-04-02
  • JavaScript数组reduce常见实例方法
    目录前言一、 reduce定义和用法语法:二、reduce浏览器支持情况三、reduce累加带初始值不带初始值四、reduce数组去重五、reduce求数组项最大值六、reduce将...
    99+
    2024-04-02
  • JavaScript数组reduce方法如何使用
    今天小编给大家分享一下JavaScript数组reduce方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。redu...
    99+
    2023-07-05
  • JavaScript数组reduce()方法的语法和应用
    本篇内容主要讲解“JavaScript数组reduce()方法的语法和应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法的语法和应用”吧!前言redu...
    99+
    2023-06-20
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2024-04-02
  • javascript数组中的map方法和filter方法
    目录一、map方法1编辑器2代码部分3运行结果二、filter方法 1编辑器2代码3运行结果一、map方法 1编辑器 编辑器搞出来 一起研究研究数组中的map方法: 2代...
    99+
    2024-04-02
  • javascript数组中reduce方法和pop方法怎么用
    这篇文章给大家分享的是有关javascript数组中reduce方法和pop方法怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、reduce方法1直接vs打开2代码部分var geyao=[1,...
    99+
    2023-06-29
  • javascript数组includes、reduce的基本使用方法
    这篇文章主要讲解了“javascript数组includes、reduce的基本使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript数组includes、reduce的...
    99+
    2023-06-20
  • JavaScript数组reduce()方法使用实例详解
    目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言 今天请让我详细介绍一下这个方法,希望对你有帮助。 这是 reduce...
    99+
    2024-04-02
  • js 数组 find,some,filter,reduce区别详解
    区分清楚Array中filter、find、some、reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中。 Array.find Array.find 返回一...
    99+
    2024-04-02
  • 详解JavaScript数组reduce()方法的高级技巧
    目录1、语法2、实例解析 initialValue 参数3、reduce的简单用法4、reduce的高级用法reduce()方法可以搞定的东西,for循环,或者forEach方法有时...
    99+
    2023-03-24
    JavaScript reduce()方法用法 JavaScript reduce()方法 JavaScript reduce
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作