js小记：filter()、forEach()、map()的区别

一、简述

ECMAScript 5为数组定义了5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象。
传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响访问的返回值。以下是这5个迭代方法的作用。

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true。
some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true ，则返回 true
filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

二、区别

filter()、forEach()、map()、some()、every()都是对数组的每一项调用函数进行处理。

区别：
– some()、every()的返回值：true / false
– filter()、map()的返回值：一个新数组
– forEach()无返回值。

使用filter()、forEach()、map()、some()、every()都不改变原数组。

下面进入正题，用例子区分一下filter()、forEach()、map()间的区别：

filter()

var arr = [1,2,3,4];
var my = arr.filter(function(item,index,arr){
    return item*2 > 2; 
});
console.log(my);   //[2, 3, 4] //说明filter返回 true的项组成的数组
console.log(arr);  //[1, 2, 3, 4]

var arr = [1,2,3,4];
var my = arr.filter(function(item,index,arr){
    return item*2;
});
console.log(my);   //[1, 2, 3, 4]  //说因为每一项都为true
console.log(arr);  //[1, 2, 3, 4]

forEach()

var arr = [1,2,3,4];
var my = arr.forEach(function(item,index,arr){
    return item*2;
});
console.log(my);   //undefined    //说明forEach方法没有返回值
console.log(arr);  //[1, 2, 3, 4]

map()

var arr = [1,2,3,4];
var my = arr.map(function(item,index,arr){
    return item*2;
});
console.log(my);   //[2, 4, 6, 8]
console.log(arr);  //[1, 2, 3, 4]

三、forEach() 与 map()

细讲下forEach() 与 map()的区别：
map()会分配内存空间存储新数组并返回，forEach()不会返回数据但可以改变原数组。

1、forEach()
forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入其他变量中或打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

当然forEach也可以改变原数组：

var arr = [1,2,3,4,5];
arr.forEach((num, index) => {
   return arr[index] = num * 2;
});
console.log(arr)   //[2, 4, 6, 8, 10]

2、map()
map()适用于你要改变数据值的时候，返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
console.log(arr2)  // [6, 8, 10]