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

LinMeng
• 阅读 1583

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----可选。传递给函数的初始值
  • 返回值
  • -----返回计算结果
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
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:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
LinMeng
LinMeng
Lv1
争取早日实现“代码自由” wa !!!
文章
50
粉丝
7
获赞
33