es6的map()方法解释

 
map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方:
var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {

return item * item;

});

alert(arrayOfSquares); // 1, 4, 9, 16

callback需要有return值,如果没有,就像下面这样:

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function() {});

arrayOfSquares.forEach(console.log);

数组所有项都被映射成了undefined:

在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。例如下面这个例子(之后的兼容demo也是该例子):

var users = [
{name: "张XX", "email": "zhang@email.com"},
{name: "江XX", "email": "jiang@email.com"},
{name: "李XX", "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(",")); // zhang@email.com, jiang@email.com, li@email.com
 

es6的map()方法解释的更多相关文章

  1. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  2. es6数组的方法

    1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null  (是实参构成的数组 ...

  3. ES6中map和set用法

    ES6中map和set用法 --转载自廖雪峰的官方网站 一.map Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Arra ...

  4. ES6的数组方法之Array.from

    首先说说什么是数组:数组在类型划分上归为Object,属于比较特殊的对象,数组的索引值类似于对象的key值. 数组的几个注意点: 1.数组的长度是可读属性,不可更改,数组的长度根据索引最大值. 2.数 ...

  5. Array.prototype.map()方法详解

    Array.prototype.map() 1 语法 const new_array = arr.map(callback[, thisArg]) 2 简单栗子 let arr = [1, 5, 10 ...

  6. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  7. JS中的map()方法

    map定义和方法 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值. map()方法按照原始数组元素顺序依次处理元素. 注意: map不会对空数组进行检测 map不会改变原始 ...

  8. ES6中Map数据结构学习笔记

    很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...

  9. JavaScript Array map() 方法

    语法: array.map(function(currentValue,index,arr), thisValue) currentValue:必须.当前元素的值index:可选.当期元素的索引值ar ...

随机推荐

  1. python3中的数字类型

    今天在学校机房刷python题时发现自己对python中的数字类型不理解,回寝室后百度一下. 现在做一个总结. python中的数字类型有: 整数,布尔值,复数,科学计数法,浮点数 1,整数,大小没有 ...

  2. Java开发桌面程序学习(六)——拖动文件获得文件路径

    拖动获得文件路径 在windows软件中,很多软件都提供了拖动文件的打开文件的功能,JavaFx中也是有这功能,是通过监听器来实现的 监听器 setOnDragDetected(new EventHa ...

  3. 采用邻接矩阵表示图的深度优先搜索遍历(与深度优先搜索遍历连通图的递归算法仅仅是DFS的遍历方式变了)

    //采用邻接矩阵表示图的深度优先搜索遍历(与深度优先搜索遍历连通图的递归算法仅仅是DFS的遍历方式变了) #include <iostream> using namespace std; ...

  4. java基础(32):类加载、反射

    1. 类加载器 1.1 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载 就是指将class文件读入内存,并为之创建一个C ...

  5. Python打包成exe文件很难?一分钟即可学会,并添加图标!

    环境1.python 3.72.pyinstaller下载方式:2.1 python安装(略)2.2 安装pyinstaller打开DOS窗口输入以下命令:pip install pyinstalle ...

  6. 虚拟机Centos6.7安装VMTools

    安装VMware Tools,设置共享文件夹 一.基本步骤 1.VMware Workstation菜单栏中,选择“虚拟机”,”安装VMware Tools...“.(注:此时下方可能会弹出“确保您已 ...

  7. JavaScript继承的最初设想

    JavaScript没有真正的类(class)和实例(instance),而是靠一种奇特的原型链模式,来实现继承. 在Brendan Eich设计之初,Javascript里面都是对象,必须有一种机制 ...

  8. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  9. 使用百度的webuploader进行附件上传

    相较于之前使用的上传空间的优点:支持html5,不用再安装flash插件,没有大小限制,分片以后上传,上传以后再进行合并. 前端js代码 <script type="text/java ...

  10. sqlserver2008R2 本地不能用localhost连接

    问题 在重新安装sql Server2008R2的时候,本地安装完成之后,想用localhost或者127.0.0.1登录的时候发现一直报错,无法连接,以下是解决方案. 打开Sql Server配置管 ...