JavaScript数组的map()、forEach()、filter()方法

1.map() 方法

在 javaScript 里 map 方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果

组成一个新数组返回。

如：

var num = [1, 2, 3];
var nums = num.map(function(ele){
    return ele + 1;
});
console.log("-----map运行后的数组-----");
console.log(nums); // [2, 3, 4]
console.log("-----原数组-----");
console.log(num);  // [1, 2, 3]

map 方法接受一个函数作为参数。该函数调用时， map 方法可以向它传入三个参数分别为：

数组元素成员、数组元素下标和数组本身(第三个参数在实际中基本省略)。

如：

var num = [1, 2, 3];
var nums = num.map(function(ele, index, num){
    return ele + index;
});
console.log("-----map运行后的数组-----");
console.log(nums); // [1, 3, 5]

map 方法还可以接受第二个参数，用来绑定参数函数内部的 this 变量

如：

var num = [1, 2, 3];
var arr = ['a', 'b', 'c'];
var nums = num.map(function(ele){
    return this[ele];
}, arr);
console.log("-----map运行后的数组-----");
console.log(nums); // ["b", "c", undefined]

上图中的 this 指向 arr 数组，返回结果为 ["b", "c", undefined]，出现 undefined 的原因是由于遍历到 num 数组元素 3 时，

在 arr 数组中最大的下标为 2 不存在下标为 3 的元素，所以返回 undefined 。

2.forEach() 方法

forEach 方法也是对数组的所有成员依次执行参数函数，但是 forEach 方法不

返回值，只操作数据。

如：

var num = [1, 2, 3];
var nums = num.forEach(function(ele){
    return ele * 2;
});
console.log("-----forEach运行后的数组-----");
console.log(nums); // undefined

上面代码中为数组 num 的每个元素乘以 2 然后返回，但结果是 undefined，

所以 forEach 没有返回值。

forEach 的函数参数里也可以接受三个参数：

数组元素成员、数组元素下标和数组本身(第三个参数在实际中基本省略)。

如：

var num = [1, 2, 3];
num.forEach(function(ele, index, num){
    console.log(index + ' : ' + ele);
    // 输出结果
    // 0 ： 1
    // 1 ： 2
    // 2 ： 3
});

forEach 方法也可以接受第二个参数，绑定参数函数的 this 指向

如：

var num = [1, 2, 3];
var arr = ['a', 'b', 'c'];
num.forEach(function(ele){
    console.log(this[ele]);
    // 输出结果
    // 'b' 'c' undefined
}, arr);

和 map 的结果一致，因为数组 arr 没有下标为 3 的元素， 所以最后输出 undefined。

3.filter() 方法

filter 方法用于过滤数组成员，返回满足条件的成员组成一个新的数组不会改变原数组。

它的参数也是一个函数。

如：

var num = [1, 2, 3, 4, 5];
var nums = num.filter(function(ele){
    return (ele > 3);
});
console.log("-----filter运行后的数组-----");
console.log(nums); // [4, 5]
console.log("-----原数组-----");
console.log(num);  // [1, 2, 3, 4, 5]

上面 num 数组中只有 4 和 5 两个元素大于 3 ，所以返回的新数组为[4, 5];

filter 方法的参数函数也可以接受三个参数：

数组元素成员、数组元素下标和数组本身(第三个参数在实际中基本省略)。

var num = [1, 2, 3, 4, 5];
var nums = num.filter(function(ele, index, num){
    return ele % 2 === 0;
});
console.log("-----filter运行后的数组-----");
console.log(nums); //[2, 4]

上面代码中返回数组中为偶数的成员组成的新数组。

filter 方法也可以接受第二个参数用来绑定参数函数内部 this 指向

如：

var num = [1, 2, 3, 4, 5];
var obj = {MAX: 3}
var nums = num.filter(function(ele){
    return ele > this.MAX;
}, obj);
console.log("-----filter运行后的数组-----");
console.log(nums); // [4, 5]

如上图所示，同样是返回大于 3 的元素，这次传入的是对象 obj 的一个属性值 3，

然后组成一个新的数组返回。

更详细的可以看阮一峰老师的 JavaScript入门教程链接:https://wangdoc.com/javascript/stdlib/array.html