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

LinMeng 等级 543 1 0

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----可选。传递给函数的初始值
  • 返回值
  • -----返回计算结果
收藏
评论区

相关推荐

Swift 常见面试题解
基础 1、class 和 struct 的区别 2、不通过继承,代码复用(共享)的方式有哪些 3、Set 独有的方法有哪些? 4、实现一个 min 函数,返回两个元素较小的元素 5、map、filter、reduce 的作用 6、map 与 flatmap 的区别 7、什么是 copy on write 8、如何获取当前代码的函
js基本搜索算法实现与170万条数据下的性能测试
前言 今天让我们来继续聊一聊js算法,通过接下来的讲解,我们可以了解到搜索算法的基本实现以及各种实现方法的性能,进而发现for循环,forEach,While
项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
js 的 forEach,map,filter,some,every,find(es6),reduce详解
forEach() 定义和用法 forEach()方法用于调用数组的每个元素,并将元素传递给回调函数 注意: forEach()对于空数组是不会执行回调函数的。 语法 array.forEach(function(currentValue,index,arr),thisValue) 参数 function(currentValue,index,a
js数组Api之reduce()方法的详解
reduce()的基础概念和用法在上一篇已经粗略讲过,本篇主要来讲一讲它的高级用法。reduce()能实现的功能,我们用常规的for()/forEach()也能搞定,但是相对来说reduce()算得上是捷径 我们先来用例子解析一下initialValue参数 var arr 1, 2, 3, 4; var sum arr.reduc
JS - ES6 的 Module
一、介绍 模块,(Module),是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体)。 两个基本的特征:外部特征和内部特征 外部特征是指模块跟外部环境联系的接口(即其他模块或程序调用该模块的方式,包括有输入输出参数、引用的全局变量)和模块的功能 内部特征是指模块的内部环境具有的特点(即该模
JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
组合使用map 和find重组数组对象
需求:有两个均是数组对象结构的数组,如下: //第一个数组对象结构如下: arr1数组长度大于arr2arr1 {adCode:"12340",adName:'河南省'}, {adCode:"12341",adName:'山东省'}, {adCode:"12342",adName:'广东省'}, {adCode:"12343",adNa
Ant Design 可编辑的树形表格
Ant Design Editable Tree TableAnt Design of React Editable Tree Table可编辑的树形表格Need in the work, but i did not find readymade components easy to understand after Baidu and Googl
轻松搞定构造函数,new,实例对象,原型,原型链,ES6中的类
本文主要是之前我的 《一文搞懂JS系列》 的后续,至于为什么标题变了,因为标题字数写不下,对于JS基础感兴趣的可以看看我之前写的系列。标题变初心不变,接下来开始今天的内容。前言本文主要讲的就是函数,方法,构造函数,new操作符,实例对象,原型,原型链,ES6类。因为这几个知识点都是有互通的关系的,所以一起讲,方便大家疏通整个关于这方面
Python爬虫常见异常及解决办法
给大家介绍一门互联网行业认知课,带你一起深入认识互联网这个行业,为将来的就业铺好路。 1.selenium.common.exceptions.WebDriverException: Message: unknown error: cannot find Chrome binary在爬虫时经常会使用selenium实现自动化,来模拟Google访问目
js高频手写大全
1. 手写instanceofinstanceof作用:判断一个实例是否是其父类或者祖先类型的实例。instanceof 在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype查找失败,返回 false2. 实现数组的map方法3. reduce实现数组的map方法4. 手写数组的reduce方法reduce() 方法接收一个函数作为累
JS - 用 for 循环实现常见的数组迭代方法
常见的数组迭代方法有很多种,比如 some, filter, map等等,底层也都可以用for来实现,我们来康一康。 some js const some (arr, fn) for (let i 0; i < arr.length; i++) if (fn(arr[i], i, arr)) re
js数组的遍历
js中数组的遍历 1\. Map()方法Map 映射的意思,可以看做是一个映射函数,所谓的映射。一个萝卜一个坑,一 一对应的关系; 语法:const arrArray();arr.map((item,index,arr) //函数体 return ;);//参数1:数组中的每一项(必选)//参数2:索引(可选)//参数3:当前遍历的数组本身(可选)//注
linux find 命令查找文件和文件夹
查找目录:find /(查找范围) name '查找关键字' type d 查找文件:find /(查找范围) name 查找关键字 print详解:find命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。