明天咱们来聊一聊常常应用到的两个办法 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;
}