《深入理解ES6》——Set集合与Map集合

深藏阁楼爱情的钟 2022-05-09 11:06 282阅读 0赞

## Set集合 ##

ES6中新增的Set类型是一种有序列表，其中含有一些相互独立的非重复值，通过Set集合可以快速访问其中的数据，更有效的追踪各种离散值。

### 创建Set集合并添加元素 ###

调用new Set()创建Set集合，调用add()方法向集合中添加元素，访问集合的size属性可以获取集合中目前的元素数量。

let set = new Set();
    set.add(5);
    set.add("5");
    console.log(set.size);//2

如果多次调用add()方法并传入相同的值作为参数，那么后续的调用实际上会被忽略：

let set = new Set();
    set.add(5);
    set.add("5");
    set.add(5);//重复-本次调用直接被忽略
    console.log(set.size);//2

也可以用数组来初始化Set集合，Set构造函数同样会过滤掉重复的值从而保证集合中的元素各自唯一。

let set = new Set([1,2,3,4,5,5,5,5]);
    console.log(set.size);//5

通过has()方法可以检测Set集合中是否存在某个值：

let set = new Set();
    set.add(5);
    set.add("5");
    console.log(set.has(5));//true
    console.log(set.has(6));//false

### 移除元素 ###

调用delete()方法可以移除Set集合中的某一个元素，调用clear()方法会移除集合中的所有元素：

let set = new Set();
    set.add(5);
    set.add("5");
    
    console.log(set.has(5));//true
    
    set.delete(5);
    
    console.log(set.has(5));//false
    console.log(set.size);//1
    
    set.clear();
    
    console.log(set.has("5"));//false
    console.log(set.size);//0

### Set集合的forEach()方法 ###

forEach()方法的回调函数接受以下3个参数：

*  Set集合中下一次索引的位置
 *  与第一个参数一样的值
 *  被遍历的Set集合本身

let set = new Set([1,2]);
    
    set.forEach(function(value,key,ownerSet){
        console.log(key + " " + value);
        console.log(ownerSet === set);
    });

这段代码迭代了Set集合中的每一个元素并在forEach()方法的回调函数中输出每一个参数，回调函数每次执行时，输出的键和值都保持一致，ownerSet永远与set相等。输出的内容如下：

1 1
    true
    2 2
    true

### 将Set集合转换为数组 ###

将数组转换为Set集合的过程很简单，只需给Set构造函数传入数组即可；将Set集合再转回数组的过程同样很简单，需要用到展开运算符（…），它可以将数组中的元素分解为各自独立的函数参数。如下：

let set = new Set([1,2,3,3,3,4,5]),
        array = [...set];
    console.log(array);//1,2,3,4,5

用一个含重复元素的数组初始化Set集合，集合会自动移除这些重复元素；然后再用展开运算符将这些元素放到一个新的数组中。

## Map集合 ##

ES6中的Map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有的数据类型。

如果要向Map集合中添加新的元素，可以调用set()方法并分别传入键名和对应值作为两个参数；如果要从集合中获取信息，可以调用get()方法，如下：

let map = new Map();
    map.set("title","Understanding ES6");
    map.set("year",2018);
    
    console.log(map.get("title"));//"Understanding ES6"
    console.log(map.get("year"));//2018

### Map集合支持的方法 ###

*  has(key)检测指定的键名在Map集合中是否已经存在
 *  delete(key)从Map集合中移除指定键名及其对应的值
 *  clear()移除Map集合中的所有键值对

Map集合同样支持size属性，其代表当前集合中包含的键值对数量。下面这段代码展示了3个方法及size属性的使用方式：

let map = new Map();
    map.set("name","Nicholas");
    map.set("age",25);
    
    console.log(map.size);//2
    
    console.log(map.has("name"));//true
    console.log(map.get("name"));//"Nicholas"
    console.log(map.has("age"));//true
    console.log(map.get("age"));//25
    
    map.delete("name");
    console.log(map.has("name"));//false
    console.log(map.get("name"));//undefined
    console.log(map.size);//1
    
    map.clear();
    console.log(map.has("name"));//false
    console.log(map.get("name"));//undefined
    console.log(map.has("age"));//false
    console.log(map.get("age"));//undefined
    console.log(map.size);//0

### Map集合的初始化方法 ###

可以向Map构造函数传入数组来初始化一个Map集合，这一点同样与Set集合相似。数组中的每个元素都是一个子数组，子数组中包含一个键值对的键名与值两个元素。因此，整个Map集合中包含的全是这样的两元素数组：

let map = new Map([["name","Nicholas"],["age",25]]);
    
    console.log(map.has("name"));//true
    console.log(map.get("name"));//"Nicholas"
    console.log(map.has("age"));//true
    console.log(map.get("age"));//25
    console.log(map.size);//2

### Map集合的forEach()方法 ###

Map集合的forEach()方法与Set集合和数组中的forEach()方法类似，回调函数都接受3个参数：

*  Map集合中下一次索引的位置
 *  值对应的键名
 *  Map集合本身

这些回调参数与数组中的更相近，第一个参数是值，第二个是键名（在数组中对应的是数值型的索引值），实例如下：

let map = new Map([["name","Nicholas"],["age",25]]);
    
    map.forEach(function(value,key,ownerMap){
        console.log(key + " " + value);
        console.log(ownerMap === map);
    });

forEach()回调函数会输出传入的信息，直接输出value和key，然后将ownerMap与map对比，输出二者相等的信息。如下：

name Nicholas
    true
    age 25
    true