forEach()
- 定义和用法 forEach()方法用于调用数组的每个元素,并将元素传递给回调函数 注意: forEach()对于空数组是不会执行回调函数的。
- 语法
- array.forEach(function(currentValue,index,arr),thisValue)*
- 参数
- function(currentValue,index,arr) ---必须,数组中每个元素需要调用的函数*
函数参数:
thisValue: ---可选,传递给函数的值一般用"this"值,如果这个参数为空,"undefined"会传递给this值currentValue: ---必须,当前元素 index: ---可选,当前元素的索引值 arr: ---可选,当前元素所属的数组对象
- forEach的continue和break forEach本身不支持continue和break语句的,我们可以通过some和every来实现
- 使用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
- 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) ---必须,数组中每个元素需要调用的函数*
函数参数:
thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。currentValue: ---必须,当前元素 index: ---可选,当前元素的索引值 arr: ---可选,当前元素所属的数组对象
- 返回值 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
常见面试题补充
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) ---必须,函数中每个元素都会执行这个函数*
函数参数:
thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue, "this"的值为"undefined"。currentValue: ---必须,当前元素 index: ---可选,当前元素的索引值 arr: ---可选,当前元素所属的数组对象
- 返回值
返回数组,包含了符合条件的所有元素,如何没有符合条件的元素则返回空数组。
//返回数组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()方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true,剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false.
注意:some()不会对空数组进行检测。 注意:some()不会改变原始数组。
- 语法: array.some(function(currentValue,index,arr),thisValue)
- 参数
- function(currentValue,index,arr) ---必须,数组中每个元素都会执行这个函数*
函数参数:
thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue, "this"的值为"undefined"。currentValue: ---必须,当前元素 index: ---可选,当前元素的索引值 arr: ---可选,当前元素所属的数组对象
- 返回值
返回布尔值,如果数组中有元素满足条件返回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()方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测
- 如果所有的元素都满足条件,则返回true
注意:every()不会对空数组进行检测。 注意:every()不会改变原始数组。
- 语法: array.every(function(currentValue,index,arr),thisValue)
- 参数
- function(currentValue,index,arr) ---必须,函数,数组中每个元素都会执行这个函数*
函数参数:
thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue, "this"的值为"undefined"。currentValue: ---必须,当前元素 index: ---可选,当前元素的索引值 arr: ---可选,当前元素所属的数组对象
- 返回值
返回布尔值,如果所有元素都满足条件返回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()方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回true时,find()返回符合条件的元素,之后的值不会再调用执行函数
- find() 方法为数组中的每个元素都调用一次函数执行:
- 无序列表当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 无序列表如果没有符合条件的元素返回 undefined
- 注意:* find() 对于空数组,函数是不会执行的。
- 注意:* find() 并没有改变数组的原始值。
- 语法 array.find(function(currentValue, index, arr),thisValue)
- 参数
- function(currentValue,index,arr) ---必须,数组中每个元素都会执行这个函数*
函数参数:
thisValue: ---可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果这个参数值为空, "this"的值为"undefined"。currentValue: ---必须,当前元素 index: ---可选,当前元素的索引值 arr: ---可选,当前元素所属的数组对象
- 返回值
返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 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----可选。传递给函数的初始值
- 返回值
- -----返回计算结果