JavaScript 数组方法filter与reduce

作者:程序员布欧 时间:2024-04-29 13:14:38 

前言

在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还可以处理数组去重,遍历最大值最小值的操作

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

来源:http://lewyon.xyz/es6Reducer.html

标签:JavaScript,数组,filter,reduce
0
投稿

猜你喜欢

  • python爬虫筛选工作实例讲解

    2023-12-01 19:59:26
  • MySQL数据库INNODB表损坏修复处理过程分享

    2024-01-16 10:59:56
  • DevOps,CI,CD,自动化简述

    2022-06-22 06:47:27
  • 页面内查找

    2023-07-02 05:25:46
  • 通过python的matplotlib包将Tensorflow数据进行可视化的方法

    2023-04-21 17:37:43
  • Python按钮的响应事件详解

    2023-12-24 15:35:08
  • ASP 操作cookies的方法

    2011-03-10 11:24:00
  • Python用HBuilder创建交流社区APP

    2023-08-27 13:22:19
  • 解决python replace函数替换无效问题

    2022-05-20 18:51:57
  • Python实现微信自动好友验证,自动回复,发送群聊链接方法

    2021-10-22 00:11:23
  • MySQL大小写敏感导致的问题分析

    2024-01-17 05:41:12
  • Python网络编程之使用email、smtplib、poplib、imaplib模块收发邮件

    2023-06-30 08:45:42
  • 仿淘宝星级评分效果

    2010-09-03 18:37:00
  • python实现自动重启本程序的方法

    2022-07-18 14:16:19
  • MAC系统IDEA颜值插件MaterialThemeUI

    2022-12-26 00:29:07
  • Python安装官方whl包和tar.gz包的方法(推荐)

    2022-04-27 05:37:47
  • perl的cgi高级编程介绍

    2022-10-04 23:41:28
  • 使用python实现抓取腾讯视频所有电影的爬虫

    2022-05-09 12:19:03
  • Pytorch之view及view_as使用详解

    2023-10-09 23:10:34
  • 解决使用layui对select append元素无效或者未及时更新的问题

    2024-04-16 09:27:43
  • asp之家 网络编程 m.aspxhome.com