JavaScript Array.prototype.map() 方法详解与常见陷阱

map方法基础与优化示例

在日常前端开发中，对数组进行遍历、操作和转换是极其高频的需求。为了直观展示传统处理方式，我们先看一个具体的代码示例。

var desColors = [],
srcColors = [
{r: 255, g: 255, b: 255 }, // White
{r: 128, g: 128, b: 128 }, // Gray
{r: 0, g: 0, b: 0 } // Black
    ];
for (var i = 0, ilen = srcColors.length; i < ilen; i++) {
 var color = srcColors[i],
 format = function(color) {
 return Math.round(color / 2);
 };
desColors.push( {
 r: format(color.r),
 g: format(color.g),
 b: format(color.b)
 });
}
// Outputs:
// [
// {r: 128, g: 128, b: 128 },
// {r: 64, g: 64, b: 64 },
// {r: 0, g: 0, b: 0 }
// ];
console.log(desColors);

观察上述代码可以发现，手动编写for循环处理数组元素时，代码重复率较高且逻辑较为繁琐。为了优化这一过程，ECMAScript 5标准引入了map方法，我们可以利用它来简化上述代码。

var srcColors = [
{r: 255, g: 255, b: 255 }, // White
{r: 128, g: 128, b: 128 }, // Gray
{r: 0, g: 0, b: 0 } // Black
    ],
desColors = srcColors.map(function(val) {
var format = function(color) {
return Math.round(color/2);
        };
return {
r: format(val.r),
g: format(val.g),
b: format(val.b)
        }
    });
// Outputs:
// [
// {r: 128, g: 128, b: 128 },
// {r: 64, g: 64, b: 64 },
// {r: 0, g: 0, b: 0 }
// ];
console.log(desColors);

通过对比可以看出，使用map方法替代传统的for循环后，开发者只需关注每个元素的具体转换逻辑，代码更加简洁清晰。关于map方法的更多细节，可参考相关官方文档。

map方法定义与行为机制

1.map基本定义： array.map(callback[, thisArg]);

map方法会遍历原数组中的每一个元素，并按顺序依次调用一次callback函数。每次调用callback后的返回值会被收集起来，组成一个新的数组返回。需要注意的是，callback函数仅在有值的索引上被调用；对于那些从未被赋值或使用delete语句删除的稀疏索引，不会被调用。

callback函数在调用时会自动接收三个参数：当前数组元素的值、当前元素的索引、以及原数组本身。

如果提供了thisArg参数，那么每次调用callback函数时，this关键字将指向thisArg所指定的对象。若省略thisArg参数，或者将其赋值为null或undefined，则this指向全局对象（在浏览器中为window）。

map方法本身不会修改调用它的原数组（尽管在callback执行过程中可能会改变原数组）。

当数组执行map方法时，其长度在第一次调用callback之前就已经确定。在整个map运行期间，无论callback函数对原数组进行了添加还是删除操作，map方法均不会感知这些变化。如果数组元素被新增，新元素不会被map遍历；如果元素被删除，map仍会按照原始长度进行访问，这可能导致访问越界。若数组元素在遍历过程中被修改或删除，传入callback的值是map遍历到该位置时该元素的快照值。

map方法实战与parseInt陷阱

2.map实例：

//实例一：字符串上调用map方法
var result = Array.prototype.map.call("Hello world", function(x, index, arr) {
//String {0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "w", 7: "o", 8: "r", 9: "l", 10: "d", length: 11}
console.log(arr);
return x.charCodeAt(0);
});
//Outputs: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log(result);

上述示例演示了如何在String对象上调用map方法，以获取字符串中每个字符对应的ASCII码组成的数组。请特别注意console.log(arr)的输出结果，它展示了被当作类数组对象处理的字符串结构。

//实例二：下面的操作结果是什么？
var result = ["1", "2", "3"].map(parseInt);
//Outputs: [1, NaN, NaN]
console.log(result);

读者可能会疑惑，为什么结果不是预期的[1, 2, 3]？这是因为parseInt方法接收两个参数：第一个是要转换的值，第二个是进制数。而map传递的callback函数接收三个参数：值、索引和原数组。当直接使用parseInt作为回调时，map会将索引值（0, 1, 2）作为第二个参数传给parseInt。由于parseInt将非0和非undefined的索引值视为进制数，导致后续转换出现异常，从而返回NaN。具体输出如下：

//Ouputs: 1
console.log(parseInt("1", 0));
//Ouputs: 1
console.log(parseInt("1", undefined));
//Ouputs: NaN
console.log(parseInt("2", 1));
//Ouputs: NaN
console.log(parseInt("3", 2));

后两个结果NaN比较容易理解，因为二进制中不能有2或3。但前两个为什么返回1？这涉及parseInt对radix参数的处理逻辑： If radix is undefined or 0 (or absent), JavaScript assumes the following: a) If the input string begins with “0x” or “0X”, radix is 16 (hexadecimal) and the remainder of the string is parsed. b) If the input string begins with “0″, radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet. For this reason always specify a radix when using parseInt. c) If the input string begins with any other value, the radix is 10 (decimal). 根据第三点，当字符串不以“0x”或“0”开头时，默认进制为10，因此parseInt("1", 0)和parseInt("1", undefined)均返回1。

那么如何修改代码以得到正确结果呢？参考以下修正方案：

var result = ["1", "2", "3"].map(function(val) {
return parseInt(val, 10);
});
//Outputs: [1, 2, 3]
console.log(result);

浏览器兼容性处理

3.map方法的兼容性： map方法在IE8及以下版本的浏览器中不支持。若需兼容旧版浏览器，可采取以下措施：

a) Don't use map.b) Use something like es5-shim to make older IE's support map.c) Use the _.map method in Underscore or Lodash for an equivalent utility function.

以上是对JavaScript中map方法的详细解析，希望对初学者有所帮助。文中如有疏漏或不当之处，欢迎指正。