ES6学习day05

今天学习ES6

---

一、Set

ES6提供了新的数据结构Set，类似于数组，但是成员得值都是唯一的，没有重复得值。Set本身是一个构造函数，用来生成Set数据结构。

const s=new Set();
[1,2,3,3,4,4,5].forEach(x=>s.add(x));
for(let i of s){
  console.log(i);// 1 2 3 4 5
}

通过add()方法加入成员，结果表明Set结构不会添加重复的值。
Set函数还可以接收数组作为参数，用于初始化。

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

这些代码展示了一种新的去除数组重复成员的方法。

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

这种方法也能用于去除字符串里面的重复字符

const str='yyds';
console.log([...new Set(str)].join(''));//"yds"

向Set加入值时，不会发生类型转换，所以5和"5"是两个不同的值。

let set=new Set();
let a=NaN;
let b=NaN;
let c=5;
let d="5";
set.add(a);
set.add(b);
set.add(c);
set.add(d);
console.log(set);//set(3){NaN,5,'5}

上面的代码中，Set实例中添加了两次NaN，但是只会加入一个，说明在Set内，两个NaN是相等的。
Set实例的属性和方法
Set结构的实例有以下属性

• Set.prototype.constructor:构造函数，默认就是Set函数
• Set.prototype.size:返回Set实例的成员总数

Set 实例的方法分为两大类：操作方法（用于操作数据）和变量方法（用于遍历成员）。

操作方法：

• Set.prototype.add(value):添加某个值，返回Set结构本身。
• Set.prototype.delete(value):删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value):返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear():清除所有成员，没有返回值

遍历操作

• Set.prototype.keys()：返回键名的遍历器
• Set.prototype.values()：返回键值的遍历器
• Set.prototype.entries()：返回键值对的遍历器
• Set.prototype.forEach()：使用回调函数遍历每个成员

二、WeakSet

WeakSet结构与Set结构类似，都是不重复的值的集合。但是WeakSet和Set有两个区别，首先WeakSet的成员只能是对象，而不能是其他的值。其次WeabSet中的对象都是弱引用。

创建
WeakSet是一个构造函数，所以可以使用new命令，来创建WeakSet数据结构。

const w=new WeakSet();

作为构造函数，WeakSet可以接受一个数组或类数组对象作为参数。（实际上，任何具有Iterable 接口的数据都可以作为WeakSet的参数）。该数组的所有成员，都会自动成为WeakSet实例对象的成员。

const arr=[[1,2],[3,4]]
const w=new WeakSet(arr);//WeakSet {[1,2],[3,4]}

上述代码中，参数arr的成员[1,2]和[3,4]自动成为了WeakSet对象的成员。注意，是数组arr的成员成为了WeakSet的成员，而不是arr数组本身。
这意味着，只有数组的成员是对象才能够成为WeakSet的成员。

const arr=[1,2,3,4]
const w=new WeakSet(arr);
//报错
//Uncaught TypeError: Invalid value used in weak set(…)

上述代码中，数组arr的成员不是对象，加入WeakSet就会报错。
WeakSet结构有三个操作方法

• WeakSet.prototype.add(value):向WeakSet实例添加一个新成员
• WeakSet.prototype.delete(value):删除WeakSet实例中的一个指定成员
• WeakSet.prototype.has(value):返回一个布尔值，表示一个值是否存在WeakSet实例中

三、Map

JavaScript的对象(Object)，本质上是由键值对的集合(Hash结构)，但传统上只能使用字符串作为键，这给它的使用带来了很大的限制。

  <div id="div"></div>
  <script>
    const data={};
    const e=document.getElementById('div');
    data[e]='this is a data';
    console.log(data['[object HTMLDivElement]']);//this is a data
  </script>

上述代码，本是将dom节点作为对象的键名，但是因为对象只能使用字符串作为键名，所以将dom节点转化为字符串
‘[object HTMLDivElement]’。
为了解决这类问题，ES6提供了Map结构。Map类似于对象，也是键值对的集合，但是区别于对象的是，它的键可以为非字符串,各种类型的值都可以作为键。
对象结构是"字符串-值"对应，而Map结构是“值-值”对应，这是一种更完善的Hash结构的体现，如果你需要"键值对"的数据结构，Map显然更适合。
实例属性

• size属性：返回Map结构的成员数
• Map.prototype.set(key,value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构
• Map.prototype.get(key)：读取key对应的键值，读取不到返回underfined
• Map.prototype.delete(key)：删除某个键，删除成功返回true，否则返回false
• Map.prototype.has(key)：判断某个键是否存在当前Map对象中
• Map.prototype.clear()：清空所有成员，没有返回值

遍历方法

• Map.prototype.keys()：返回键名的遍历器
• Map.prototype.values()：返回键值的遍历器
• Map.prototype.entries()：返回所有成员的遍历器
• Map.prototype.forEach()：遍历 Map 的所有成员