.map(), .filter(), .reduce() 和 .find() 与 .forEach() 的用法很相似,本文主要记录map()、filter()、forEach()的区别和运用场景
map()
语法: array.map(function(currentValue,index,arr), thisValue)
var new_arr=arr.map(function callback(item[,index[,arr]]){
//return值组成新数组
}[, thisArg])
参数 | 说明 |
---|---|
currentValue | 必须。当前元素的值 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
- map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
实例:返回一个数组,数组中元素为原始数组的平方根
实例:返回一个数组,数组中元素为原始数组的double
filter()
语法:array.filter(function(currentValue,index,arr), thisValue)
参数 | 说明 |
---|---|
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素所属的数组对象 |
- 过滤操作,筛选符合条件的所有元素,若为true则返回组成新数组;
- 它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素;
- filter的参数是一个回调函数,回调函数结果必须返回一个布尔值。
注意:filter不会改变原数组
注意: filter() 不会对空数组进行检测。
事例:过滤数组,筛选大于3的元素
实例:返回数组中的偶数
let arr = [48, 16, 45, 31, 7];
let newArr = arr.filter(function (value, index, array) {
return value % 2 === 0;
});
console.log(newArr)
// [48, 16]
forEach()
语法:array.forEach(function(currentValue, index, arr), thisValue)
参数 | 说明 |
---|---|
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素所属的数组对象 |
forEach不会返回新的数组,而是在原数组的基础上改变数组,可以用于数组的修改
注意: forEach() 对于空数组是不会执行回调函数的。
返回值:undefined,并且总是返回undefined值,并且不可链式调用
forEach() 只是一种for循环不同的实现方法,但是对比for循环又有自己的优势,我将它理解为升级版的for循环
性能上: for循环 > forEach > map
可读性: forEach/map > for循环
var array = [1,2,3];
for (var i = 0; i < array.length; i++){ for循环遍历数组
console.log(i);
}
var array = [1,2,3];
array.forEach(function(i){ forEach()遍历数组
console.log(i);
});
-
forEach()需要更少的配置,for循环需要设置迭代器数值
(var i = 0)
,结束条件(i < array.length)
以及迭代规则(i++)
。使用 forEach() 你只需要简单的传入一个会被每个元素执行的方法。 -
当使用 forEach() 时,传入了一个具有它自己作用域的函数。而在 for 循环中,导致污染循环中的作用域。
总结:
filter函数:主要是过滤作用,筛选符合条件的所有元素,为true就返回一个新的数组
map函数: 通过函数处理原数组中的每一个元素,并返回一个处理后新的数组。
forEach函数: 按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过
forEach 和 map 能实现的功能相似
forEach 、 map、filter 都能实现对原数组的修改
forEach 没有返回值,map 有返回值,filter 有返回值