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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 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
PHP高自定义性安全验证码代码
2011/11/27 PHP
php实现微信发红包
2015/12/05 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
微信小程序icon组件使用详解
2018/01/31 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python的动态重新封装的教程
2015/04/11 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
wxPython实现分隔窗口
2019/11/19 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
请假条的格式
2014/04/11 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
python 中的jieba分词库
2021/11/23 Python
Windows server 2016服务器基本设置
2022/08/14 Servers