Javascript中Array.prototype.map()详解

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

在我们日常开发中,操作和转换数组是一件很常见的操作,下面我们来看一个实例:

复制代码代码如下:

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.

时间: 2024-10-22 23:20:10

Javascript中Array.prototype.map()详解的相关文章

javascript中=、==、===区别详解

javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题,却有着大影响,所以决定深入分析下.1.= 赋值运算符 //例: var n=1; console.log(n);//1 n=n+1; console.log(n);//2 2.== 值比较运算符 值比较运算符在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较. //例: var a=

javascript中 Array.prototype.slice的用法.

首先看到 www.w3school.cn上的解释:http://www.w3school.com.cn/jsref/jsref_slice_array.asp 定义和用法 slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end 可选.规定从何处结束选取.该参数是数

JavaScript 中 Array.prototype.slice.call(arr, 2) 这样的写法用意是什么?

看了很多 JavaScript 的源代码,发现很多类似这样的写法 Array.prototype.slice.call(arr, 2) 比较不解的是,既然 arr 是数组,为什么不直接这样写呢 arr.slice(2) 为什么实例对象本身已经有这个方法,为什么不直接调用,而采用这样的写法?有什么特殊用意吗 主要原因是为了防止有些对象没有slice方法. 举个例子: 在javascript里有一种array-like的对象,就是和Array很像,比如拥有push,slice等方法,拥有length

JavaScript中的Date类型详解与moment简介

关于JavaScript中的Date类型,相信JSer们都不会陌生吧,但是也必然为那个复杂难记的各种转换函数所头疼,本文将分享一下我对JS中的Date类型的一些知识小总结,并把其中容易犯错的地方指出来,同时简介和推广moment.js这个js库,希望大家看完文章后以后在对Date类处理如鱼得水. 1 时间的唯一性与多样性 某一时刻在全世界任何地区应该是唯一的,时区的不同是为了让地球不同时区的人的中午十二点都是太阳正上当头,形成交流上没有那么多障碍.而这一标准就是大家熟知的格林威治标准时间(Gre

javascript 中的 this 关键字详解

1.javascript 中 什么是 this? this 指的是当前行为执行的主体,或者是当前方法执行的主体 context:是当前行为或者方法执行的环境 实例: xx 去北京饭店吃东西:上下文是“北京饭店”, this 是 xx 2. 那么如何判断一个函数在执行的时候,函数体内的 this 关键字是谁呢?主要有以下几条规律:  1)一个函数体内的 this 关键字和这个函数的在哪里定义,哪里执行都没有关系;   2) 判断一个方法执行的时候,函数的执行主体是谁?主要看方法前面有没有点(.),

js中Array对象方法详解

操作方法:concat() slice() splice() concat()方法可以基于当前数组中的所有项创建一个新数组.具体来说,这个方法会创建当前数组一个副本,将接收到参数添加到副本的末尾,最后返回新构建的数组.如果没有参数,复制当前数组并返回副本.如果参数是一个或多个数组,会将数组中的每一项添加到结果数组中.如果参数不是数组,将参数值添加到数组末尾. var colors = ['red','green','blue']; var colors2 = colors.concat('yel

Javascript中的原型继承详解

js中的继承,是面向对象的知识,因为js没有类的概念,所以继承是通过对象实现的,谈到继承,就必须说到prototype,就不得不先说下new的过程. 一个小小的列子: <script type="text/javascript"> var Person = function () { }; var p = new Person(); </script> 我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步: <1> var p={}

JavaScript中的跨域详解(内附源码)

什么是跨域? 什么是跨域? 所谓跨域,就是如果在不同的域名下面存在数据交互,这个时候就会存在跨域的问题,这里要说明的是在同一个网站不同的文件夹下的数据交互是不存在跨域问题的. 哪些情况下存在跨域问题? 主域和子域之间会存在跨域问题(比如 www.a.com 和 www.a.b.com). 不同的域名存在跨域问题,哪怕这两个域名指向的是同一个ip地址. 为什么 ajax 不可以跨域? 因为 ajax 是通过 XMLHttpRequest 这个对象来进行数据之间的交互的,而 XMLHttpReque

JavaScript中的eval()函数详解

和其他很多解释性语言一样,JavaScript同样可以解释运行由JavaScript源代码组成的字符串,并产生一个值.JavaScript通过全局函数eval()来完成这个工作 eval(“1+2”),-> 3 动态判断源代码中的字符串是一种很强大的语言特性,几乎没有必要在实际中应用.如果你使用了eval(),你应当仔细考虑是否真的需要使用它. 一.eval()是一个函数还是一个运算符 eval()是一个函数,但由于它已经被当成运算符来对待了..JavaScript语言的早期版本定义了eval函