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. MQ的深入理解

    MQ的深入理解 MQ的作用: 解耦合,降低系统与系统之间的频繁改动 MQ的特点: 复杂的系统解耦合 (主系统将数据放入mq,子系统需要的时候直接从mq中取出数据)复杂链路的异步调用(将必要的链路执行完 ...

  2. Unity TextMeshPro 一键生成工具

    本文参考了这片博客文章,在此基础上进行优化和改进: https://blog.csdn.net/akof1314/article/details/80868869 先截张效果图: TextMeshPr ...

  3. python基础(14):生成器、列表推导式

    1. 生成器 什么是⽣成器?⽣成器实质就是迭代器. 在python中有三种⽅式来获取⽣成器: 1. 通过⽣成器函数 2. 通过各种推导式来实现⽣成器 3. 通过数据的转换也可以获取⽣成器 ⾸先,我们先 ...

  4. 100款机械CAD图纸,想要出图快,勤练是最有效的方式之一!

    提升CAD出图效率最有效的方式就是勤加练习,所以跟着小匠每天练习3个,30天把这100个常用的CAD机械图纸练完,再看你的出图效率!贵在坚持! 100个机械CAD图纸,请收好

  5. JS基础语法---练习:交换两个变量的值

    * JavaScript简称为JS * JavaScript是什么?     * 是一门脚本语言:不需要编译,直接运行     * 是一门解释性的语言:遇到一样代码就解释一行代码     * C#语言 ...

  6. css利用padding-top设置等比例遇到的问题

    外层盒子如果设置了左右margin,外层盒子设置对应比例的时候,是按外层盒子的宽+两边的margin算做横向总长度的,不是只算宽度的.

  7. Xamarin.Forms 移动开发

    Xamarin 提供两种原生app开发技术:1. Xamarin Native, 包括 Xamarin.Android, Xamarin.iOS, Xamarin.Mac 2. Xamarin 跨平台 ...

  8. [20190524]使用use_concat or_expand提示优化.txt

    [20190524]使用use_concat or_expand提示优化.txt --//上午看了链接https://connor-mcdonald.com/2019/05/22/being-gene ...

  9. MYSQL第二课

    创建数据库: 输入:CREATE DATABASE itcase;计算机输出: Query OK, 1 row affected 查看数据库:输入:SHOW DATABASES;计算机输出: +--- ...

  10. Shell—三剑客(grep、sed、awk)

    grep命令详解 文本搜索工具,根据用户指定的“模式(pattern)”对目标文本进行过滤,显示被模式匹配到的行. 命令格式:grep  [options]  pattern  filename.gr ...