ES6数组方法之map()、filter()-CFANZ编程社区

概念

方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
MDN web docs上面说：

两个特性：

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方法对元素中的元素进行加工处理，产生一个新的数组对象。