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

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

相关推荐

js 的 forEach,map,filter,some,every,find(es6),reduce详解
forEach() 定义和用法 forEach()方法用于调用数组的每个元素,并将元素传递给回调函数 注意: forEach()对于空数组是不会执行回调函数的。 语法 array.forEach(function(currentValue,index,arr),thisValue) 参数 function(currentValue,index,a
JS - ES6 的 Module
一、介绍 模块,(Module),是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体)。 两个基本的特征:外部特征和内部特征 外部特征是指模块跟外部环境联系的接口(即其他模块或程序调用该模块的方式,包括有输入输出参数、引用的全局变量)和模块的功能 内部特征是指模块的内部环境具有的特点(即该模
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 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
Union Find
并查集是在各个不相交集合中查找某元素存在否,可以接近常数级查找例如,图的连通性,最近公共祖先等问题。一般用森林 数组实现。 一般有2个操作,查找(find)和合并(union) 查找:从集合中查找元素x是否存在。 合并:如果2个集合不想交则可以合并操作,一般方法是高度低的合并到高度高的。 初始化每个元素都可以是一个单独的集合,然后不断引入关系来合并他
linux命令:find命令
http://[blog.csdn.net/pipisorry/article/details/39831419](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.csdn.net%2Fpipisorry%2Farticle%2Fdetails%2F39831419) **linu
217. Contains Duplicate
### 217\. Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your function should return true if any value appears at least twice in the arr
217. Contains Duplicate
### 217\. Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your function should return true if any value appears at least twice in the arr
ES6 Babel 简单使用
ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。 PS:严格来说,ECMAScript 还包括其他很多语言的语言标准。 ### ECMAScript 发展历史 * 1995年:ECMAScript 诞生。 * 1997年:ECMAScript 标准确立。 * 1999年:ES3 出现,与此
ES6中数组方法( every 和 some )
判断对象数组中每个人是否成年,大于17成年,否则未成年 var arr = [ {name:'jerry',sex:'man',age:14}, {name:'jack',sex:'woman',age:19}, {name:'bill',sex:'ma
ES6中的map和reduce
一 实战 ==== <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS中some(),every(),forEach(),map(),filter()区别
[js](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Flib.csdn.net%2Fbase%2Fjavascript)在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了。 刚开始接触这些倒也记得不
JS数组filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()实例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Node JS World
Node JS World ============= Environment ----------- > tested on Ubuntu Install nvm/node/npm/yarn ------------------------- * nvm : node version manager * node: node js *
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。 #### 0.元素定位方法主要有: * id定位:find\_element\_by\_id(' ') * name定位:find\_element\_by\_name(' ') * class定位:find\_element\_by\_class\_name(' '