Javascript中Array.prototype.map()详解


Posted in Javascript onOctober 22, 2014

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

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 自动播放的实例代码
Nov 19 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JS中操作JSON总结
Dec 06 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
javascript回调函数详解
Feb 06 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
javascript数组详解
Oct 22 #Javascript
Javascript 数组排序详解
Oct 22 #Javascript
Javascript中arguments对象详解
Oct 22 #Javascript
Javascript中的默认参数详解
Oct 22 #Javascript
js style动态设置table高度
Oct 21 #Javascript
js读写json文件实例代码
Oct 21 #Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php json相关函数用法示例
2017/03/28 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
JS验证不重复验证码
2017/02/10 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
python3实现逐字输出的方法
2019/01/23 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
物流司机岗位职责
2013/12/28 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers