map VS forEach

今天我们来聊一聊经常使用到的两个方法 map forEach
由于好多次都搞混了两个方法，因此记录下来。

来看看官网怎么说的：
forEach() 方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
简言之，map 会返回一个数组，经过你处理的数组。

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

简单做个总结
map 返回其原始数组的新数组，forEach 却没有。

顺带提一下容易混淆的 Map 方法
官网写的八股文读起来绕口不易看懂，就直接上示例代码吧

let myMap = new Map();

let keyObj = {};
let keyFunc = function() {};
let keyString = 'a string';

// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");

myMap.size; // 3

// 读取值
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get(keyObj);       // "和键keyObj关联的值"
myMap.get(keyFunc);      // "和键keyFunc关联的值"

myMap.get('a string');   // "和键'a string'关联的值"
                         // 因为keyString === 'a string'
myMap.get({});           // undefined, 因为keyObj !== {}
myMap.get(function() {}); // undefined, 因为keyFunc !== function () {}

了解了基础用法后，我们来看看原理（这样能更深刻理解）

map

Array.prototype.map = function(fn) {
    let newArr = [];
    for (let i = 0; i < this.length; i++) {
        newArr.push(fn(this[i]))
    };
    return newArr;
}