javascript学习之map,filter,foreach的区别和用法

2,590

.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() 不会改变原始数组。


实例:返回一个数组,数组中元素为原始数组的平方根

image.png

实例:返回一个数组,数组中元素为原始数组的double

image.png

filter()

语法:array.filter(function(currentValue,index,arr), thisValue)

参数说明
currentValue必需。当前元素
index可选。当前元素的索引值
arr可选。当前元素所属的数组对象
  • 过滤操作,筛选符合条件的所有元素,若为true则返回组成新数组;
  • 它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素;
  • filter的参数是一个回调函数,回调函数结果必须返回一个布尔值。

注意:filter不会改变原数组

注意: filter() 不会对空数组进行检测。


事例:过滤数组,筛选大于3的元素

image.png

实例:返回数组中的偶数

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 有返回值