ES6之Set与Map

ES6向JS添加了Set和Map。

注意：forEach()方法与数组进行比较，语法是一模一样的。forEach()方法传入的回调函数的参数形式是一样的（value, key, owner）。

一、Set

定义：Set是一种无重复值的有序列表。

1.1 创建Set，并添加一个元素

<script type="text/javascript">
        //创建一个Set，名字为set
        let set = new Set();
        //向set中添加元素
        set.add(5);
        set.add('5');

        //统计元素个数
        console.log('set中的元素个数：' + set.size);
</script>

观察Chrome浏览器的控制台输出：

1.2 使用数组初始化一个Set

Set构造器会确保不重复地使用这些值。例如：

//使用数组初始化Set
let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); //5

观察控制台输出：

1.3 删除其中一个元素

//删除元素5
set.delete(5);

1.4 判断测试一个元素是否存在于Set

//测试一个元素是否在Set中
console.log(set.has('5')); //true
console.log(set.has(6)); //false

1.5 清空Set

//清空Set
set.clear();

1.6 遍历Set

想到ES5给数组添加了forEach()方法，使得更容易处理数组中的每一项，而不必使用for循环。

类似的，Set类型也添加了相同方法，其工作方式也一样。

forEach()方法会被传递一个回调函数，该回调接受三个参数：

① Set中下一个位置的值；

② 与第一个参数相同的值；

③ 目标Set自身；

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

观察控制台如下：

需要传递的回调函数参数的前面两个是一样的，这是为什么？

ES6标准的制定者为了让Set的forEach()法与数组及Map版本的保持一致，因此该回调函数的前两个参数就始终相同了。

二、Map

定义：Map就是键值对的有序列表，键和值都可以使任意类型。

2.1 创建Map，并添加键值对

//创建Map
let map = new Map();
//添加键值对
map.set("title", "Understanding ES6");
map.set("year", 2016);
//查看Map
console.log(map.get("title"));
console.log(map.get("year"));
//查看一个不存在的键
console.log(map.get("author"));//undefined

观察控制台结果：

2.2 Map常见的方法

● has(key) 判断指定的键是否存在与Map中；

● delete(key) 移除Map中的键以及对应的值

● clear() 移除Map中所有的键与值；

size属性：用于指明包含了多少个键值对

let map = new Map();
map.set("name", "张三");
map.set("age", 18);

console.log(map.size); //2

console.log(map.has("name")); //true
console.log(map.get("name")); //张三

console.log(map.has("age")); //true
console.log(map.get("age")); //18

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

观察控制台效果：

 2.3 Map遍历

Map的forEach()方法类似于Set与数组的同名方法，它接受一个能接收三个参数的回调函数：
① Map中下个位置的值；
② 该值所对应的键；
③ 目标 Map自身。

//将数组传递给Map构造器，来初始化Map
let map = new Map([["name", "张三"], ["age", 18]]);
map.forEach(function(value, key, ownerMap){
    console.log(key + '--' + value);
    console.log(ownerMap === map);
});

观察控制台输出：

回调函数的这些参数更紧密契合了数组 forEach() 方法的行为，即：第一个参数是值、第二个参数则是键（数组中的键是数值索引）

三、ES6之前为了实现Set与Map所采用的变通方法

 

参考有菜鸟教程等