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