概念
方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
MDN web docs上面说:
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
两个特性:
- map需要返回值,如果不return,则返回undefined。
- map返回的是一个新的数组。
语法
array.map(function(currentValue, index, arr), thisIndex)
参数说明:
function(currentValue, index, arr):必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
currentValue:必须。当前元素的的值。
index:可选。当前元素的索引。
arr:可选。当前元素属于的数组对象。
thisValue:可选。对象作为该执行回调时使用,传递给函数,用作"this"的值。
用法
其实我们用不到上面那么多参数。经常用的demo如下:
var new_array = array.map(function(item){...});//这里的item是array的参数
demo1:
var data = [[1,2,3],[2,3,4],[3,4,5],[]];
var new_data = data.map(function (item) {
return item[0];
})
console.log(new_data)//[1, 2, 3, undefined]
demo2:
let array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
return item * item;
})
console.log(newArray) // [1, 4, 9, 16, 25]
使用场景
场景1:将数组A的值,double后放到数组B里边
//ES5 的学法 for循环
var numbers = [1,2,3]
var doubledNumbers = []
// ES 5
for(var i = 0;i<numbers.length;i++){
doubledNumbers.push(numbers[i]*2)
}
// ES6 直接使用map,返回新的需要的数组B
var doubled = numbers.map(function(number){
return number * 2
})
console.log(doubled) // doubled 就是想要得到的数组B
场景2:将数组对象A里的某一个属性值,添加到数组B里
// ES5 的for循环
var cars = [
{model:'BUick',price:'CHEAP'},
{model:'NICK',price:'expensive'}
]
var needCars = []
for(var i = 0;i < cars.length; i++){
needCars.push(cars[i].price)
}
console.log(needCars) // needCars 就是需要的数组
// ES6 的map方法
var cars = [
{model:'BUick',price:'CHEAP'},
{model:'NICK',price:'expensive'}
]
var prices = cars.map(function(pri){
return pri.price
})
console.log(prices) // prices 就是需要的数组
还有种情况需注意,举个栗子
var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);
打印结果为:
> Array [2,8,18,32]
而我这样写时:
var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
});
console.log(map1);
打印结果为:
> Array [undefined, 8, undefined, undefined]
为什么会出现三个undefined呢?而不是我预期的[1,8,9,16]。
这样写只是增加了一个条件,即x的值为4时才乘以2,之所以会出现undefined,是因为map()方法创建了一个新数组,但新数组并不是在遍历完array1后才被赋值的,而是每遍历一次就得到一个值。所以,下面这样修改后就正确了:
var array1 = [1, 4, 9, 16];
const map1 = array1.map(x => {
if (x == 4) {
return x * 2;
}
return x;
});
箭头函数
https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080
关于fliter和map的区别
https://blog.51cto.com/11871779/2126561
最后总结:
filter方法是对原数组进行过滤筛选,产生一个新的数组对象
map方法对元素中的元素进行加工处理,产生一个新的数组对象。
网友评论