数组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;
};

引用

此文基本根据文档总结来的，可以细看原文档

mdn 的 map