Javascript中Array.prototype.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);
从上例可以看出，所有的操作重复率都比较高，如何来优化呢，幸运的是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方法详情请戳这里。
1.map基本定义：
array.map(callback[, thisArg]);
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。
如果 thisArg 参数有值，则每次 callback 函数被调用的时候，this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined，则 this 指向全局对象 。
map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。
当一个数组运行 map 方法时，数组的长度在调用第一次 callback 方法之前就已经确定。在 map 方法整个运行过程中，不管 callback 函数中的操作给原数组是添加还是删除了元素。map 方法都不会知道，如果数组元素增加，则新增加的元素不会被 map 遍历到，如果数组元素减少，则 map 方法还会认为原数组的长度没变，从而导致数组访问越界。如果数组中的元素被改变或删除，则他们被传入 callback 的值是 map 方法遍历到他们那一刻时的值。
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最多只能接收两个参数，以至于第三个参数被直接舍弃，与此同时，parseInt把传过来的索引值当成进制数来使用.从而返回了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));
后面两个很容易理解，但是前两个为什么返回1呢？为了解释这个问题，我们看看官方的描述：
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).
在第三点中当string为其他值时，进制默认为10。
那么我们如何修改才能使上例正常输出呢？看下例：
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.
以上就是对map方法的理解，希望对初学者有所帮助，文中不妥之处，还望斧正！
相关文章
用到javascript的排序一组数字，js没有直接的数字比较的函数可以调用，所以自己写了一个快速排序,需要的朋友可以了解下2012-12-12
文件作为一种特殊的表单数据，通过http post请求方式提交至服务器的时候，php会生成一个$_FILES全局数组，相关的文件信息会存放在这个全局数组中。我将在这篇文章中通过一些示例代码来阐述php下的文件上传，并且深入看下关于文件上传内部的实现机制，最后简单说下如何加强这方面的安全性!2014-04-04
这里我们说的操作符包括算数运算符和逻辑操作符等,包括布尔与赋值等,为大家进行了JavaScript中的各种操作符使用总结,需要的朋友可以参考下2016-05-05
在JavaScript中处理时间之setMinutes()方法的使用
这篇文章主要介绍了在JavaScript中处理时间之setMinutes()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要简单介绍了JavaScript函数节流的相关知识，有相同需求的小伙伴们可以仔细阅读下2014-12-12
在本篇文章里小编给大家分享了关于JavaScript中构造函数与原型链之间的关系相关知识点，需要的朋友们学习下。2019-02-02
window这个对象我们之前也稍微接触过了，其实就是对窗体进行操作，利用这个对象我们可以实现很多的操作，比如窗口移动啊，设置窗口大小啊等等2012-03-03
本文是谈谈自己对于javascript中变量声明的一些看法、感想和理解，算是自己的一个小总结吧，分享出来给大家，希望对小伙伴们能有所帮助2014-11-11
本文详细讲解了JavaScript操作DOM对象的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
这篇文章主要介绍了JavaScript中的parse()方法使用简介,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
最新评论