JavaScript Day 12. 每个元素都做运算的 map()

这一篇要来讨论另一个跟 filter 很相似的方法 map，在我们讨论 map 的同时，也可能会觉得怎麽好像在讨论 filter，事实上确实这两种方法差异真的不大，但为什麽 JavaScript 还是要分成两种方法呢？其实他们最大的差异在於回传的结果。

map 语法：

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

• callback / 是一个函数，用来产生新阵列的元素。新数值会在每次执行 callback 时加到 new_array，并且此函数可传入三个参数：
  1. currentValue 代表目前处理到的元素的值。
  2. index 代表目前处理到的元素的索引位置。
  3. array 代表阵列本身。
• 根据 callback 的执行结果，回传 true 表示测试通过；回传 false 则表示失败。
• thisArg 代表 callback 里面的 this 是指向哪一个物件。
• map 执行的结果与 filter 一样会回传一个新阵列。

以上 map 的解说，几乎可以感觉就像是在看 filter，那这边乾脆直接来做个差异分析好了。

map 和 filter 的相似之处在於：

• 皆为 JavaScript 的阵列方法。
• 都不会影响到原来的阵列，而是会回传一个新的阵列。
• 都是透过 callback 函式来处理阵列中的元素，函式参数可带入「目前正在处理的元素 (currentValue)」、「正在处理的元素索引 (index)」、「原始阵列 (array)」。

map 与 filter 最大的差异在於，filter 产生的新阵列只包含「符合回传条件」的元素，map 则是会包含「运算後」的所有元素。

上一篇 filter 的范例可以看到，filter 回传的是「判断为 true 的元素」，而底下 map 阵列回传的是「元素的运算结果」。这边要注意的是，map 一定会替原始阵列的每个元素回传一个值，如果没有值则会回传 undefined。

let a = [1,2,3,4];
mapEmpty = a.map(function(num){
    return num * 2;
});
console.log(mapEmpty); // [2, 4, 6, 8]

map 对资料的矫正与处理

我们已经知道 map 的原理，接下来可以开始讨论，除了上面我们所知道的操作以外，map 究竟还可以做些什麽事？map 还可以针对资料进行过滤或矫正，举例来说我们获得一组资料，里面包含很多数值，现在我们希望这些数值不要超过我们设定的上限，这时便可以使用 map 来矫正与过滤。

let arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

let newArr = arr.map(function(element) {
    // 数值大於 2 的数值视为 4
    if (element > 2)
        return 4;
        
    return element;
});

console.log(newArr); // [1, 2, 4, 4, 4, 4, 4, 4, 4, 4]

在查找资料的过程，也看见了一个自己之前没有遇过的方法，也觉得这个方法能够在某些实务上获得不少的提升，因此我也放在这里讨论。

reduce

reduce 可以进行数值的加总或是统计运算，传统我们对於数值的加总会这麽写：

let arr = [ 4, 5, 6 ];
let result = 0;

for (let index in arr) {
    result += arr[index];
}

console.log(result); // 15

但如果我们使用 reduce，可以看到元素的加总计算，不会再需要去存取到外层的 result，而是算完以後才把结果回传，这部分我理解是，所有的工作都在内层完成，不会去污染到外部。

let arr = [ 4, 5, 6 ];

// 处理每个元素後等待回传结果，第一次处理时代入初始值 0
let result = arr.reduce(function(prev, element) {
    // 与之前的数值加总，回传後代入下一轮的处理
    return prev + element;
}, 0);

console.log(result); // 15

map 与 reduce

这两种方法都适用阵列处理，因此也可以一起使用，map 可以对阵列资料进行矫正，reduce 则能够对资料进行加总：

let arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

let result = arr
    .map(function(element) {
        // 数值大於 2 的数值视为 4
        if (element > 2)
            return 4;
            
        return element;
    })
    .reduce(function(prev, element) {
        // 与之前的数值加总，回传後代入下一轮的处理
        return prev + element;
    }, 0);

console.log(result); // 35

误打误撞遇到 reduce 这个方法，其实觉得蛮好用的，关於它的使用方式或许可以再做一篇文章来讨论，这里就不放太多抢走 map 的光环啦~

参考资料：
JavaScript 阵列处理方法
上手使用 JavaScript 的 Map、Reduce 吧！