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. 手动创建分区以及软硬raid的问题

    本文章旨在介绍安装centos7时手动分区问题,及其所对应的软硬raid问题.在新建centos7系统时,需要手动分区时,提供给我们三个选项: 在上图中,默认选项为“Standard Partitio ...

  2. C#实现数据回滚,A事件和B事件同时执行,其中任何一个事件执行失败,都会返回失败

    /// <summary> /// 执行数据库回滚操作,用于sql语句执行失败后,恢复执行前的数据 /// </summary> /// <param name=&quo ...

  3. 内核态发生非法地址访问是否会panic

    https://mp.weixin.qq.com/s?__biz=MzAwMDUwNDgxOA==&mid=2652663676&idx=1&sn=b18ab57322594e ...

  4. 好久没玩laravel了,今天玩下Laravel项目迁移步骤

    .在新的目录中克隆git远程版本库 .执行composer install安装依赖 .执行php artisan key:generate生成key 好久没玩laravel了,今天玩下Laravel项 ...

  5. 裸奔的支付X聊天,你还敢用吗?

    - 语音消息 使用HTTP明文传输,没有任何加密措施,使用域名为up-mayi.django.t.taobao.com,从报文中可以看出,语音消息是以文件形式在网络中传输的,下图为一次语音的发送传输过 ...

  6. Linux实现免密码登录

    一.验证ssh远程登录,未作免密处理的两台机器,登录时,是需要输入密码的 二.本地系统执行 ssh-keygen -t rsa 命令,生成密钥文件 三.在相应的目录下查看生成的密钥文件,其中:id_r ...

  7. Mysql—事务原理与详解

    事务的四大特性 事务的隔离级别 https://www.cnblogs.com/57rongjielong/p/8036418.html https://blog.csdn.net/zwq123211 ...

  8. Maven 跳过Junit单元测试

    转载自:https://blog.csdn.net/arkblue/article/details/50974957 -DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至 ...

  9. 类数组(Array-like)对象应用

    类数组(Array-like)对象 slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组.你只需将该方法绑定到这个对象上. 一个函数中的  arguments 就是一 ...

  10. Html学习之十五(盒模型)

    Web页面中的每一个元素都是一个盒模型,CSS中使用盒模型来描述一个元素.CSS盒子模型又称框模型,它包含四个边界,分别是外边距边界(Margin).边框边界(border).内边距边界(paddin ...