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"代码
Jan 09 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
JS中的作用域链
Mar 01 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue实现评价星星功能
Jun 30 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
浅析return false的正确使用
2013/11/04 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Vue实现验证码功能
2019/12/03 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python中文件的读取和写入操作
2018/04/27 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
python如何随机生成高强度密码
2020/08/19 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
党员自我评议个人对照检查材料
2014/09/16 职场文书
后勤工作个人总结
2015/02/28 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
重阳节主题班会
2015/08/17 职场文书