数组map方法的应用场景及经典面试题
map最大的作用：从一个数组得到一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
上句是核心。
换言之，平时只要有从数组中得到一个新数组的时候，就可以联想下map
大部分情况下，map里的函数传入一个参数就够用。
以下是应用场景，可以的话，先自己实现下
求数组中每个元素的平方
function pow(x) { return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // [1, 4, 9, 16, 25, 36, 49, 64, 81] var results = arr.map(pow);
把数组中每个元素变成字符串
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // ['1', '2', '3', '4', '5', '6', '7', '8', '9'] var results2 = arr.map(String);
重新格式化数组中的对象
就是数组的每项都是对象，然后进行操作。或者对对象的某个值进行改变。
var kvArray = [ { key: 1, value: 10 }, { key: 2, value: 20 }, { key: 3, value: 30 } ]; // [{1: 10}, {2: 20}, {3: 30}] var reformattedArray = kvArray.map(function(obj) { var rObj = {}; rObj[obj.key] = obj.value; return rObj; });
map用在离散数组的时候
map遍历的时候，如果当前值是undefined，则直接返回undefined。
// [2,4,,,8] [1,2,,,4].map(item=>item*2)
字符串也可使用map，生成新的数组
如获取字符串中每个字符所对应的 ASCII 码组成的数组
var map = Array.prototype.map; var a = map.call("Hello World", function(x) { return x.charCodeAt(0); }); // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
类数组也可使用map，生成新的数组
比如得到所有选中选项的值，并将其打印：
var ele = document.querySelectorAll("select option:checked"); var values = Array.prototype.map.call(ele, function(obj) { return obj.value; });
map易错的地方 -- 面试常碰到
<!-- res的值 --> var res = ["1", "2", "3"].map(parseInt);
如果不小心的话，可能会说成 [1,2,3]
考点：map的callback不止一个参数，总共三个参数，cur、index、curIndex。
parseInt可以接受两个参数，所以上面会[1, NaN, NaN]，因为第二个参数index被传进去了。改进方法
["1", "2", "3"].map( item => parseInt(item));
``
手写实现map方法
这里官方的更权威，这里只是简单实现大概逻辑
Array.prototype.map = function(fn) { let res = []; // this指当前的数组 let curArr = this; for (let i = 0; i < curArr.length; i++) { let value = curArr[i]; if (typeof value !== "undefined") { let mappedValue = fn(value, i, curArr); res[i] = mappedValue; } } return res; };
引用
此文基本根据文档总结来的，可以细看原文档
