js 的 forEach,map,filter,some,every,find(es6),reduce详解

LinMeng
• 阅读 1323

forEach()

  • 定义和用法 forEach()方法用于调用数组的每个元素,并将元素传递给回调函数 注意: forEach()对于空数组是不会执行回调函数的。
  • 语法
  • array.forEach(function(currentValue,index,arr),thisValue)*
  • 参数
  • function(currentValue,index,arr) ---必须,数组中每个元素需要调用的函数* 函数参数:
    currentValue:  ---必须,当前元素
    index:   ---可选,当前元素的索引值
    arr:   ---可选,当前元素所属的数组对象
    thisValue: ---可选,传递给函数的值一般用"this"值,如果这个参数为空,"undefined"会传递给this值
  • forEach的continue和break forEach本身不支持continue和break语句的,我们可以通过some和every来实现
  1. 使用return来实现continue关键字的效果
    var arr = [1, 2, 3, 4, 5];
    arr.forEach(function (item) {
     if (item === 3) {
         return;     //是3的元素跳过
     }
     console.log(item);
    });
    //  1,2,4,5
    var arr = [1, 2, 3, 4, 5];
    arr.some(function (item) {
         if (item === 2) {
                 return;  // 不能为 return false
         }
         console.log(item);
    });
    //  1,3,4,5
  2. break实现
    var arr = [1, 2, 3, 4, 5];
    arr.every(function (item) {
         console.log(item);
         return item !== 3;
    });
    //1,2,3

总结:forEach(): 没有返回值,本质上等同于 for 循环,对每一项执行 function 函数。即map是返回一个新数组,原数组不变,forEach 是改变原数组。

  • 不支持 continue,用 return false 或 return true 代替。

  • 不支持 break,用 try catch/every/some 代替。

map()

  • 定义和用法 map()方法返回一个新数组,数组中的元素为原始数组调用函数处理后的值 map()方法按照原始数组元素顺序依次处理元素
  • 注意*map()不会对空数组进行检测
  • 注意*map()不会改变原始数组
  • 语法: array.map(function(currentValue,index,arr),thisValue)
  • 参数
  • function(currentValue,index,arr) ---必须,数组中每个元素需要调用的函数* 函数参数:
    currentValue:  ---必须,当前元素
    index:   ---可选,当前元素的索引值
    arr:   ---可选,当前元素所属的数组对象
    thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。
  • 返回值 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

常见面试题补充

var ls = ['1', '2', '3'].map(parseInt)
console.log(ls)

// ls => [1, NaN, NaN]

原理解析 首先了解一下 parseInt() 函数。

parseInt(string, radix),接收两个参数。

string:要转化的字符串。 radix:要转化的进制数(将这个字符串转为多少进制的数,默认为 10,即将字符串转为十进制的数),radix 的范围 为 2-36的整数, 超出这个返回将返回 NaN。如果省略该参数或者为 0,则数字将以 10 为基础来解析。 当 map() 中的函数可以接收参数时,map() 函数会自动把参数传递进去,所以三次执行顺序,parseInt() 接收的三次参数分别是:

[parseInt('1', 0), parseInt('2', 1), parseInt('3', 2)]
=> [1, NaN, NaN]

filter()

  • 定义和用法 filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • 注意:*filter()不会对空数组进行检测。
  • 注意:*filter()不会改变原始数组。
  • 语法: array.filter(function(currentValue,index,arr),thisValue)
  • 参数
  • function(currentValue,index,arr) ---必须,函数中每个元素都会执行这个函数* 函数参数:
    currentValue:  ---必须,当前元素
    index:   ---可选,当前元素的索引值
    arr:   ---可选,当前元素所属的数组对象
    thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue, "this"的值为"undefined"。
  • 返回值 返回数组,包含了符合条件的所有元素,如何没有符合条件的元素则返回空数组。
    //返回数组ages中大于18的元素
    var ages = [32, 33, 16, 40];
    function checkAdult(age) {
      return age >= 18;
    }
    function myFunction() {
      document.getElementById("demo").innerHTML = ages.filter(checkAdult);
    }
    //  32,33,40    

    some

  • 定义和用法 some()方法用于检测数组中的元素是否满足指定条件(函数提供)。 some()方法会依次执行数组的每个元素:
  1. 如果有一个元素满足条件,则表达式返回true,剩余的元素不会再执行检测。
  2. 如果没有满足条件的元素,则返回false.

注意:some()不会对空数组进行检测。 注意:some()不会改变原始数组。

  • 语法: array.some(function(currentValue,index,arr),thisValue)
  • 参数
  • function(currentValue,index,arr) ---必须,数组中每个元素都会执行这个函数* 函数参数:
    currentValue:  ---必须,当前元素
    index:   ---可选,当前元素的索引值
    arr:   ---可选,当前元素所属的数组对象
    thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue, "this"的值为"undefined"。
  • 返回值 返回布尔值,如果数组中有元素满足条件返回true,否则返回false。
    //检测元素中是否有大于18的
    var ages = [3, 10, 18, 20];
    function checkAdult(age) {
      return age >= 18;
    }
    function myFunction() {
      document.getElementById("demo").innerHTML = ages.some(checkAdult);
    }
    //true

    every()

  • 定义和用法 every()方法用于检测数组所有元素是否都符合指定元素(通过函数提供), every()方法使用指定函数检测数组中的所有元素:
  1. 如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测
  2. 如果所有的元素都满足条件,则返回true

注意:every()不会对空数组进行检测。 注意:every()不会改变原始数组。

  • 语法: array.every(function(currentValue,index,arr),thisValue)
  • 参数
  • function(currentValue,index,arr) ---必须,函数,数组中每个元素都会执行这个函数* 函数参数:
    currentValue:  ---必须,当前元素
    index:   ---可选,当前元素的索引值
    arr:   ---可选,当前元素所属的数组对象
    thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue, "this"的值为"undefined"。
  • 返回值 返回布尔值,如果所有元素都满足条件返回true,否则返回false。
    //检测数组ages的所有元素是都大于等于18
    var ages = [32, 33, 16, 40];
    function checkAdult(age) {
      return age >= 18;
    }
    function myFunction() {
      document.getElementById("demo").innerHTML = ages.every(checkAdult);
    }
    //false

    find()

  • 用法和定义 find()方法通过测试(函数内判断)的数组的第一个元素的值; find()方法为数组中的每个元素都调用一次函数执行:
  1. 当数组中的元素在测试条件时返回true时,find()返回符合条件的元素,之后的值不会再调用执行函数
  2. find() 方法为数组中的每个元素都调用一次函数执行:
  • 无序列表当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 无序列表如果没有符合条件的元素返回 undefined
  • 注意:* find() 对于空数组,函数是不会执行的。
  • 注意:* find() 并没有改变数组的原始值。
  • 语法 array.find(function(currentValue, index, arr),thisValue)
  • 参数
  • function(currentValue,index,arr) ---必须,数组中每个元素都会执行这个函数* 函数参数:
    currentValue:  ---必须,当前元素
    index:   ---可选,当前元素的索引值
    arr:   ---可选,当前元素所属的数组对象
    thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果这个参数值为空, "this"的值为"undefined"。
  • 返回值 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined。
    let bankInfo = that.bankList.find(v => {
      return v.bankCode == that.payForm.bankCode;
    });

    reduce()

  • 定义和用法 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 reduce() 可以作为一个高阶函数,用于函数的 compose。
  • 注意:* reduce() 对于空数组是不会执行回调函数的。
  • 语法 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • 参数 function(total,currentValue,index,arr)----必需。用于执行每个数组元素的函数 total----必需。初始值,或者计算结束后的返回值 currentValue----必需。当前元素 currentIndex----可选,当前元素的索引 arr------可选,当前元素所属的数组对象 initialValue----可选。传递给函数的初始值
  • 返回值
  • -----返回计算结果
点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue