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 相关文章推荐
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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 过滤危险html代码
2009/06/29 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery中each()方法用法实例
2014/12/27 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python 日期操作类代码
2018/05/05 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
拆迁委托协议书
2014/09/15 职场文书
茶花女读书笔记
2015/06/29 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书