乐趣区

关于javascript: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;
}
退出移动版