JavaScript 数组方法filter与reduce

目录
  • 前言
  • filter
  • reduce
  • 数组求和
  • 筛选首字母是否是含有b字母
  • 结语

前言

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

赞 (0)

相关推荐

  • JavaScript稀疏数组示例教程

    目录 前言 什么是稀疏数组? 创建带有孔洞的稀疏数组 删除元素的映射 现象 稀疏数组的快速映射(强制创建映射关系) 总结 前言 最近有空在看一本关于 JS 数据结构和算法的书,里面有提到数组,却对数组的基本概念轻轻带过,虽然用了 JS 很久但是一直忙于需求业务的实现从未停下好好回视一下这个 既熟悉又陌生的朋友,于是查阅了一些资料,尤其是密集数组和稀疏数组的区别,意犹未尽之下,写了这篇文章,以便更好地帮助理解书中的要点,稍显浅显,也有不足望各位提点. 什么是稀疏数组? 通常编程语言中(C.JAVA

  • JavaScript数组的使用详解

    JavaScript数组的使用详解

    目录 一.数组的创建 二.数组的元素和长度 三.数组的遍历 四.数组的常用方法 一.数组的创建 第一种: var 数组名 = new Array();创建一个空数组 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var arr=new Array(); console.log(arr)//以日志

  • JavaScript数组实例的9个方法

    JavaScript数组实例的9个方法

    目录 前言 map filter some every reduce forEach find和findIndex join 总结 前言 手写JS原生API在面试中很常见,今天努力工作之余(摸鱼的时候)翻到了MDN文章中关于数组实例方法这部分,正好无聊就手写几个实例方法玩玩,复习一下基础内容,并记录一下. 如果你还不知道数组实例中迭代方法有什么区别,可以看下面这张图: map 这个方法会返回一个新的数组,数组中的每一项都是执行过map提供的回调函数结果. 实现代码如下: const map =

  • 前端进阶JS数组高级用法大全教程示例

    前端进阶JS数组高级用法大全教程示例

    目录 1.批量制造数据 2.数组合并去重 3.创建数组的几种方式 4.类数组 常见的类数组 判断是否是类数组 类数组如何转换为数组 如何让类数组使用上数组丰富的内建方法 类数组和数组的区别 5.数组方法的使用注意事项 数组的长度 数组的空元素 empty 基于值进行运算,空位的值作为undefined join和toString,空位怎么处理 数组不会自动添加分号 indexOf与includes 数组可变长度问题 数组查找和过滤 改变自身的方法 delete误区 push vs concat

  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    目录 稀疏数组是什么 JavaScript数组天生就是稀疏数组 JavaScript数组稀疏特性带来的“怪异现象” slice会复制孔 forEach.every会跳过孔(不对孔调用回调函数) map不对孔调用回调函数,但是孔会保留 filter不对孔调用回调函数,但是孔会被过滤掉 join会将孔转化为一个空字符串进行拼接,与undefined一样 初始化无孔数组的方法 Array.apply(null, Array(n))的原理 稀疏数组是什么 在绝大多数JavaScript的实现中,数组是稀

  • JavaScript数组常用方法解析及数组扁平化

    目录 前言 一.常用数组操作方法 push末尾追加元素 pop删除数组末尾元素 sort排序 shift数组开头添加元素 && unshift数组开头删除元素 数组合并concat indexOf查找元素 && includes查找元素是否存在 reverse反转数组 数组切割成字符串join slice操作数组,替换,删除,新增 every校验数组所有元素 some 测试数组中是不是至少有1个元素通过了被提供的函数测试.返回值是布尔值 深层次递归数组flat map遍历数

  • js实现数组转树示例

    js实现数组转树示例

    目录 原生 封装工具函数 getTree 结构图: 原生 封装工具函数 getTree 1.1 定义 -映射对象 map 数组 treeList=[] 1.2 遍历后端返回的数组 list 为 每个数组对象item 添加 children 属性 值为空数组 1.3 为映射对象 map 添加属性 并赋值key:id值 value:item 1.4 遍历数组对象list 当item.pid为空时 为一级目录 将该一级目录数组对象 添加到treeList中 1.5 通过 item.pid获取到 id

  • 一文掌握JavaScript数组常用工具函数总结

    目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

  • JavaScript 数组方法filter与reduce

    目录 前言 filter reduce 数组求和 筛选首字母是否是含有b字母 结语 前言 在ES6新增的数组方法中,包含了多个遍历方法,其中包含了用于筛选的filter和reduce filter 主要用于筛选数组的filter方法,在使用中,不会改变原数组,同时会将符合筛选条件的元素,放入新的数组进行返回. /*** * @item 数组元素 * @index 遍历数组下标 * @thisArr 当前数组 */ let arr1 = [1, 2, 3, 4, 5]; let newArr1 =

  • Javascript数组方法reduce的妙用之处分享

    前言 Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从reduce语法开始介绍. 语法 array.reduce(function(accumulator, arrayElement, currentIndex, arr), initialValue) 若传入初始值,accumulator首次迭代就是初始值,否则就是数组的第一个元素:后续迭代中将是上一

  • JavaScript数组方法大全(推荐)

    数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy&

  • JavaScript数组方法总结分析

    由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在一起,并以字符串形式返回 参数:可选,指定元素之间的分隔符,没有参数则默认为逗号 返回值:字符串 对原数组的影响:无 2.reverse()将数组的元素顺序变成倒序返回 参数:无 返回值:数组 对原数组的影响:原数组被修改为倒序排列之后的数组 3.sort()对数组元素进行排序并返回 参数:可选,排

  • 常用的JavaScript数组方法

    目录 1.filter() 2.forEach() 3.some() 4.every() 5.reduce() 6.合并数组 1.filter() 语法: array.filter(function(currentValue,index,arr), thisValue) 参数说明: currentValue:当前元素对象(必选) index:当前元素的索引值(可选) arr:当前元素属于的数组对象(可选) thisValue:对象作为该执行回调时使用,传递给函数,用作 "this" 的

  • JavaScript数组方法实例详解

    JavaScript数组方法实例详解

    目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill()  (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和

  • 深入探密Javascript数组方法

    在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. 1. Array.prototype.slice方法 数组的 slice 方法通常用来从一个数组中抽取片断.不过,它还有将"类数组"(比如arguments和​HTMLCollection​)转换为真正数组的本领. 复制代码 代码如下: var nodesArr = Array.proto

  • JavaScript数组方法的错误使用例子

    1. 不要使用Array.indexOf,使用Array.includes "如果你要在数组中查找元素,使用Array.indexOf!".记得在我学习JavaScript课程时候,有这样一句话.这句话没错,确实可以这么使用! 根据MDN文档:"Array.indexOf会返回被查找元素第一个匹配的位置的下标."因此,如果后面需要用到这个索引,Array.indexOf是一个很好的解法.但是,我们要解决的问题是:查找数组中是否包含某个元素.这是一个Yes/No的问题

  • 超详细的javascript数组方法汇总

    超详细的javascript数组方法汇总

    一.数组的常用方法 1:join(); 将数组转为字符串显示.不输入参数,默认以逗号连接:输入参数,则以参数连接. var arr=[1,2,3]; console.log(arr.join()); // 1,2,3; console.log(arr.join("_")); // 1_2_3; console.log(arr); // [1,2,3]; 原数组不变. 2:reverse(); 将数组逆序排列,原数组被修改. var arr=[1,2,3]; var arr2=arr.r

  • 可能被忽略的一些JavaScript数组方法细节

    前言 自以为还算一个比较高产的人吧-但是感觉好久都没有写点什么没有营养的东西了,这一篇本来是打算去年年底都要拿出来说一说的,但是年底事情太多了,加上我真的变懒了拖到现在才要把这个准备了好久的标题完善一下. 之所以会突然想讲一讲JavaScript中的数组,是因为我经历了好多次事后发现很傻的问题,所以就想说还是总结一下,这篇相当于总结一样的文章我也不想讲数组的方法是怎么用的,毕竟不管是在哪,数组方法的使用都有很多教程了,单纯的就来说一说那些我们可能忽略的细节. 抛砖引玉 在开始正式讲被我们忽略的一

随机推荐