js 自带的 map() 方法全面了解


Posted in Javascript onAugust 16, 2016

1. 方法概述

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

2. 例子

2.1 在字符串中使用map

在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

2.2 易犯错误

通常情况下,map 方法中的 callback 函数只需要接受一个参数(很多时候,自定义的函数形参只有一个),就是正在被遍历的数组元素本身。

但这并不意味着 map 只给 callback 传了一个参数(会传递3个参数)。这个思维惯性可能会让我们犯一个很容易犯的错误。

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

/*
//应该使用如下的用户函数returnInt

function returnInt(element){
 return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/

参考 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

以上这篇js 自带的 map() 方法全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
JavaScript实战之菜单特效
Aug 16 #Javascript
深入理解js generator数据类型
Aug 16 #Javascript
js 创建对象 经典模式全面了解
Aug 16 #Javascript
js 上传文件预览的简单实例
Aug 16 #Javascript
js removeChild 方法深入理解
Aug 16 #Javascript
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
php实现微信公众号无限群发
2015/10/11 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python迭代器的使用方法实例
2013/11/21 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python设置环境变量的作用和实例
2019/07/09 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
同事吵架检讨书
2014/02/05 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
教育合作协议范本
2014/10/17 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
工商局调档介绍信
2015/10/22 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Redis入门教程详解
2021/08/30 Redis