1、Map

我们知道,在JS中其实对象的方式就跟Java中的Map极为相似,即键值对的方式。JS中,key必须是字符串,实际上Number等值作为key也是合理的,所以为了解决这个问题,在最新的ES6规范中加入了新的数据类型 Map 。
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
2
 
1
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); 
2
m.get('Michael'); // 95

Map类似二维数组,且每个元素数组的长度为2,其中索引0作为键key,索引1作为值value。所以初始化Map需要一个二维数组,或者直接初始化一个空Map。(常用方法:get获取、set存储、delete删除、has判断包含)
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam' --> true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
7
 
1
var m = new Map(); // 空Map
2
m.set('Adam', 67); // 添加新的key-value
3
m.set('Bob', 59);
4
m.has('Adam'); // 是否存在key 'Adam' --> true
5
m.get('Adam'); // 67
6
m.delete('Adam'); // 删除key 'Adam'
7
m.get('Adam'); // undefined

同样,作为Map,如果多次对同一个key设置不同的value,之前的值会被替换掉。

2、Set

Set和Map类似也是一组key的集合,但是不存储value,且key不能重复。

创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
2
 
1
var s1 = new Set(); // 空Set
2
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤:
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"} --> 注意数字3和字符串'3'是不同的元素
2
 
1
var s = new Set([1, 2, 3, 3, '3']);
2
s; // Set {1, 2, 3, "3"}  --> 注意数字3和字符串'3'是不同的元素

通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果;通过delete(key)方法可以删除元素。

可以利用这个特性对数组进行去重:
'use strict';
// var set = new Set([1,2,1,2,2,1]); var arr = [1,2,1,2,2,1]; //new Set 数组去重
function unique(arr){
return Array.from(new Set(arr));
};
//使用ES6的方法可以去重.
console.log(unique(arr));
x
 
1
'use strict';
2
// var set = new Set([1,2,1,2,2,1]);
3

4
var arr = [1,2,1,2,2,1];
5

6
//new Set 数组去重
7
function unique(arr){
8
  return Array.from(new Set(arr));
9
};
10
//使用ES6的方法可以去重.
11
console.log(unique(arr));

3、iterable

Array可以通过下标循环遍历,但是Map和Set则无法,所以ES6标准引入了新的iterable类型,Array、Map、Set都属于iterable类型。

回顾:对象可以通过 for in 的方式遍历对象所有属性,虽然说实际上Array也是一个对象,但是用 for in 遍历数组会出现问题,具体的可以戳这里,Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果。

所以对于数组,我们还是尽量避免用 for in 的方式,要么老老实实用 for(var i = 0; i < arr.length; i++) 的方式,要么接着往下看:

具有iterable类型的集合,可以通过 for ... of 循环来遍历,直接遍历其元素,而不单纯是索引:
'use strict';
var a = [1, 2, 3];
for (var x of a) {
alert(x);
}
5
 
1
'use strict';
2
var a = [1, 2, 3];
3
for (var x of a) {
4
    alert(x);
5
}

遍历集合用法如下
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + '=' + x[1]);
}
12
 
1
var a = ['A', 'B', 'C'];
2
var s = new Set(['A', 'B', 'C']);
3
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
4
for (var x of a) { // 遍历Array
5
    alert(x);
6
}
7
for (var x of s) { // 遍历Set
8
    alert(x);
9
}
10
for (var x of m) { // 遍历Map
11
    alert(x[0] + '=' + x[1]);
12
}

还有更好的方式,直接使用 iterable 内置的 forEach 方法,它接收一个函数,每次迭代会自动回调该函数,以Array为例:
var a = ['A', 'B', 'C'];
a.forEach(function(element, index, array){
//element --> 指向当前元素的值
//index --> 指向当前索引
//array --> 指向Array对象本身
alert("element-->"+element);
alert("index-->"+index);
alert("array-->"+array);
});
9
 
1
var a = ['A', 'B', 'C'];
2
a.forEach(function(element, index, array){
3
    //element --> 指向当前元素的值
4
    //index --> 指向当前索引
5
    //array --> 指向Array对象本身
6
    alert("element-->"+element);
7
    alert("index-->"+index);
8
    alert("array-->"+array);
9
});

这里的element、index、array的命名是不固定的,但是固定位置的含义是如上所示的固定的,有一点点类似Java中的方法重载。试一下下面的代码你就明白了:
//Array
var a = ['A', 'B', 'C'];
a.forEach(function(element, index, array){
//element --> 指向当前元素的值
//index --> 指向当前索引
//array --> 指向Array对象本身
alert(element); //首次输出A
alert(element); //首次输出0
alert(element);
});
10
 
1
//Array
2
var a = ['A', 'B', 'C'];
3
a.forEach(function(element, index, array){
4
    //element --> 指向当前元素的值
5
    //index --> 指向当前索引
6
    //array --> 指向Array对象本身
7
    alert(element); //首次输出A
8
    alert(element); //首次输出0
9
    alert(element);
10
});

而Map和Set的话:

//Map
var b = new Map([['indexA', 'a'],['indexB', 'b'],['indexC', 'c']]);
b.forEach(function(value, key, map){
//value --> 指向当前元素的值
//key --> 指向当前键
//map --> 指向Map对象本身
alert(value); //首次输出a
alert(key); //首次输出indexA
alert(map);
});
10
 
1
//Map
2
var b = new Map([['indexA', 'a'],['indexB', 'b'],['indexC', 'c']]);
3
b.forEach(function(value, key, map){
4
    //value --> 指向当前元素的值
5
    //key --> 指向当前键
6
    //map --> 指向Map对象本身
7
    alert(value); //首次输出a
8
    alert(key);  //首次输出indexA
9
    alert(map);
10
});
//Set
var c = new Set(['a', 'b', 'c']);
c.forEach(function(key, key, set){
//key --> 指向当前键
//key --> 指向当前键
//set --> 指向Map对象本身
alert(key); //首次输出a
alert(key); //首次输出a
alert(set);
});
 
1
//Set
2
var c = new Set(['a', 'b', 'c']);
3
c.forEach(function(key, key, set){
4
    //key --> 指向当前键
5
    //key --> 指向当前键
6
    //set --> 指向Map对象本身
7
    alert(key); //首次输出a
8
    alert(key); //首次输出a
9
    alert(set);
10
});

ES6中迭代器部分,更多可以参考:[译]JavaScript ES6迭代器指南

01快速入门-04-Map、Set和iterable(ES6)的更多相关文章

  1. MyBatis 学习总结 01 快速入门

    本文测试源码下载地址: http://onl5wa4sd.bkt.clouddn.com/MyBatis0918.rar 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级 ...

  2. [Android应用开发] 01.快速入门

    前言 这一篇,主要是把之前[安卓基础]系列的东西,做一个总结和补充.并举了两个例子:电话拨号器.短信发送器做巩固,在此也参考了黑马训练营的教学大纲. Android项目的目录结构 Activity:应 ...

  3. AngularJS快速入门指南01:导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. 079 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 01 初识面向对象 04 实例化对象

    079 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 01 初识面向对象 04 实例化对象 本文知识点:实例化对象 说明:因为时间紧张,本人写博客过程中只是对知 ...

  5. 004 01 Android 零基础入门 01 Java基础语法 01 Java初识 04 Java程序的结构

    004 01 Android 零基础入门 01 Java基础语法 01 Java初识 04 Java程序的结构 Java程序的结构 Java程序外层--类 程序外层,如下面的代码,是一个类的定义. c ...

  6. AngularJS快速入门指南04:指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  7. Java程序员快速入门Go语言

    这篇文章帮助Java程序员快速入门Go语言. 转载至 开源中国社区. http://www.oschina.net 本文将以一个有代表性的例子为开始,以此让Java程序员对Go语言有个初步认识,随后将 ...

  8. Hadoop生态圈-Hive快速入门篇之HQL的基础语法

    Hadoop生态圈-Hive快速入门篇之HQL的基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客的重点是介绍Hive中常见的数据类型,DDL数据定义,DML数据操作 ...

  9. SpringMvc_快速入门,深入分析

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

随机推荐

  1. C语言指针(二)指向指针的指针

    注意:指向指针的指针适合于做链表 1.声明方式:在变量名前放置两个*符号 int**var; 2.实例: #include<stdio.h>int main (){intvar;int*p ...

  2. python的while嵌套 99乘法表 三角形和正方形

    python的99乘法表 num1=1 while num1<=9 : num2 = 1 while num2 <=num1 : print (str(num2)+"X" ...

  3. Java对象中的finalize()方法使用说明

    我在写java程序的时候,从来没有遇见过是用Object.finalize()的时候,但是在学习Java虚拟机的垃圾回收机制时,虚拟机在进行垃圾回收时需要使用finalize()方法来进行对象清理.下 ...

  4. 2017年8月28日 HTML/CSS 语法(待填坑)

    今天这种节日真的是 ----------------------------------------------------------- HTML  

  5. java使用字节流和字符流实现文件复制

    大家在Java开发中都会遇到文件复制的文件,众所周知,需要通过文件输入输出流实现. 那究竟该怎么做那,话不多说,直接上代码: 一,使用字节流复制文件 public class FileByteCopy ...

  6. chrome开发工具指南(十一)

    检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...

  7. spring配置和注解事务同时存在导致的事务嵌套

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt123 首先先看配置文件: [html] view plaincopy < ...

  8. PHP初入--表单元素

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 学会Git

    学会Git   目录 一.版本控制概要 1.1.什么是版本控制 1.2.常用术语 1.3.常见的版本控制器 1.4.版本控制分类 1.4.1.本地版本控制 1.4.2.集中版本控制 1.4.3.分布式 ...

  10. 团队作业4——第一次项目冲刺(Alpha版本) 日志集合处

    第一天(2017.4.23) http://www.cnblogs.com/1413none/p/6752325.html 第二天(2017.4.24) http://www.cnblogs.com/ ...