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 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 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
通过文字传递创建的图形按钮
2006/10/09 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
PHP进程通信基础之信号
2017/02/19 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python使用PyQt5的简单方法
2019/02/27 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
投标邀请书范文
2014/01/31 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
物流管理专业自荐信
2014/06/23 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
班主任自我评价范文
2015/03/11 职场文书
护理培训心得体会
2016/01/22 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
SQL注入详解及防范方法
2021/12/06 MySQL