聊聊JS中map()方法,遍历操作？懂？

方法总结

map()方法创建一个新数组，其结果是数组中的每个元素都调用一个提供的函数后返回的结果

案例1

let array1 = [1, 4, 9, 16]
const map1 = array1.map(x => x * 2)
console.log("map1 => ", map1)

运行结果：

map1 =>  [ 2, 8, 18, 32 ]

案例2

这样写

let array1 = [1, 4, 9, 16]
const map2 = array1.map(x => {
    if (x === 4) {
        return x * 2
    }
})

console.log("map2 => ", map2)

运行结果：

map2 =>  [ undefined, 8, undefined, undefined ]

这里为什么会出现三个undefined呢？而不是我预期的[1, 8, 9, 16]

这样写只是增加了一个条件，即x的值为4时才*2。之所以会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。所以，下面这样修改后就正确了：

let array1 = [1, 4, 9, 16]
const map2 = array1.map(x => {
    if (x === 4) {
        return x * 2
    }
    return x
})

console.log("map2 => ", map2)

运行结果：

map2 =>  [ 1, 8, 9, 16 ]

这里注意箭头函数有两种格式：
①只包含一个表达式，这时花括号和return都省略了；
②包含多条语句，这时花括号和return都不能省略