/**
* 11、Set和Map数据结构
*
* ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
* Set 本身是一个构造函数，用来生成 Set 数据结构。
* 11.1 Set 里面不会有返重复的值，但是两个相同的对象不算，还可以利用扩展运算符把Set展开并用数组的遍历方法操作完了再放到新的Set变量里，由于Set自带去重，所以可以轻松的实现并集、差集、交集。
*/
const s1_1 = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s1_1.add(x)); //添加新元素
var arr1_1 = [];
for (let i of s1_1) {
arr1_1.push(i);
}
console.log(arr1_1); // 2 3 5 4 //Set不会存在重复的值，所以相当于去重了
/**
* 上面代码通过add方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。
* Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。
*/
// 例一
const set1_2 = new Set([1, 2, 3, 4, 4]);
[...set1_2]; // [1, 2, 3, 4] 传入的数组被去重了
// 例二
const items1_2 = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items1_2.size; // 5
// 例三
function divs() {
return [...document.querySelectorAll('div')]; //取得页面上所有的div元素
}
const set1_3 = new Set(divs()); //直接用Set构造函数去重
set1_3.size; // 1 页面上只有一个div
// 类似于
divs().forEach(div => set1_3.add(div)); //用forEach把divs里的每个元素都传入set1_3
set1_3.size; // 1
/**
* 上面代码中，例一和例二都是Set函数接受数组作为参数，例三是接受类似数组的对象作为参数。
* 上面代码中，也展示了一种去除数组重复成员的方法。
*/
// 去除数组的重复成员
const arr1_4 = [1, 2, 5];
[...new Set(arr1_4)];
/**
* 向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。
*/
let set1_5 = new Set();
let a1_5 = NaN;
let b1_5 = NaN;
set1_5.add(a1_5);
set1_5.add(b1_5);
set1_5; // Set {NaN} 因为在Set里NaN等于自身，所以只会存一个
/**
* 上面代码向 Set 实例添加了两个NaN，但是只能加入一个。这表明，在 Set 内部，两个NaN是相等。
* 另外，两个对象总是不相等的。
*/
let set1_6 = new Set();
set1_6.add({});
set1_6.size; // 1
set1_6.add({}); //对象就算是相同的也不会相等
set1_6.size; // 2
/**
* 上面代码表示，由于两个空对象不相等，所以它们被视为两个值。
*/
/* *
* Set 实例的属性和方法
* Set 结构的实例有以下属性。
* Set.prototype.constructor：构造函数，默认就是Set函数。
* Set.prototype.size：返回Set实例的成员总数。
* Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。
* add(value)：添加某个值，返回 Set 结构本身。
* delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
* has(value)：返回一个布尔值，表示该值是否为Set的成员。
* clear()：清除所有成员，没有返回值。
* 上面这些属性和方法的实例如下。
*/
let set1_7 = new Set();
set1_7.add(1).add(2).add(2);
// 注意2被加入了两次，单因为set自带去重功能，所以只有一个2。
set1_7.size // 2
set1_7.has(1) // true
set1_7.has(2) // true
set1_7.has(3) // false
set1_7.delete(2);
set1_7.has(2) // false
//下面是一个对比，看看在判断是否包括一个键上面，Object结构和Set结构的写法不同。
// 对象的写法
const properties1_8 = {
'width': 1,
'height': 1
};
if (properties1_8['width']) { //通过对象判断键来检查
//console.log("对象包含键");
}
// Set的写法
const properties1_9 = new Set();
properties1_9.add('width');
properties1_9.add('height');
if (properties1_9.has('width')) { //通过has检查
//console.log("set包含键");
}
//Array.from方法可以将 Set 结构转为数组。------可以把数据添加到set结构的变量里，自动去重之后再转为数组,但是不能把整个数组添加进去，得用forEach来遍历添加，如果是数组去重的话可以用下面的方法-----------
const items1_10 = new Set([1, 2, 3, 4, 5]);
const array_10 = Array.from(items1_10);
//这就提供了去除数组重复成员的另一种方法。
function quchong1(array) { //传入数组
return Array.from(new Set(array)); //把数组放到一个新的Set结构里
}
quchong1([1, 1, 2, 3]); // [1, 2, 3]
/**
* 遍历操作
Set 结构的实例有四个遍历方法，可以用于遍历成员。
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。
（1）keys()，values()，entries()
keys方法、values方法、entries方法返回的都是遍历器对象（详见《Iterator 对象》一章）。由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。
*/
let set1_11 = new Set(['red', 'green', 'blue']);
for (let item of set1_11.keys()) {
//console.log(item);
}
// red
// green
// blue
for (let item of set1_11.values()) { //键和值一样，因为Set没有键名,或者说键值是同一个值，比如下面的entries遍历。
//console.log(item);
}
// red
// green
// blue
for (let item of set1_11.entries()) {
//console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
//上面代码中，entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。
//Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。
Set.prototype[Symbol.iterator] === Set.prototype.values; // true 可以看Set.prototype找到Symbol.iterator这个属性，这个属性是部署了用来遍历的。而且他内部的遍历器和values方法相同，所以遍历和values方法获取到的值是一样的。
//这意味着，可以省略values方法，直接用for...of循环遍历 Set。
let set1_12 = new Set(['red', 'green', 'blue']);
for (let x of set1_12) {
//console.log(x);
}
// red
// green
// blue
//（2）forEach()
//Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
let set1_122 = new Set([1, 4, 9]);
set1_122.forEach((value, key) => console.log(key + ' : ' + value)); //和数组的forEach一样
// 1 : 1
// 4 : 4
// 9 : 9
//上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。
//另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象。（跟普通的forEach一样，作用于当前方法的this对象）
//（3）遍历的应用
//扩展运算符（...）内部使用for...of循环，所以也可以用于 Set 结构。(扩展运算符...其实是用的for...of遍历属性再赋值)
let set1_13 = new Set(['red', 'green', 'blue']);
let arr1_13 = [...set1_13];
// ['red', 'green', 'blue']
//扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。
let arr1_14 = [3, 5, 2, 2, 5, 5];
let unique1_14 = [...new Set(arr1_14)]; //利用扩展运算符和Set结合去重，跟上面的return Array.from(new Set(array))一样的效果，不过扩展运算符是展开赋值，这样可以用于多个数组拼接以后去重。
// [3, 5, 2]
//而且，数组的map和filter方法也可以间接用于 Set 了。
let set1_15 = new Set([1, 2, 3]);
set1_15 = new Set([...set1_15].map(x => x * 2)); //先用扩展运算符展开赋值给一个数组，再在这个数组上调用map或filter方法，把结果返回来以后放到新的Set里。
// 返回Set结构：{2, 4, 6}
let set1_16 = new Set([1, 2, 3, 4, 5]);
set1_16 = new Set([...set1_16].filter(x => (x % 2) == 0));
// 返回Set结构：{2, 4}
//因此使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。
let a1_17 = new Set([1, 2, 3]);
let b1_17 = new Set([4, 3, 2]);
// 并集
let union1_18 = new Set([...a1_17, ...b1_17]); //合并数组，Set自带去重，所以没有重复值。
// Set {1, 2, 3, 4}
// 交集
let intersect1_18 = new Set([...a1_17].filter(x => b1_17.has(x))); //返回用数组a去遍历，检查每个值是否存在于变量b这个Set结构里，如果存在则返回。
// set {2, 3}
// 差集
let difference1_18 = new Set([...a1_17].filter(x => !b1_17.has(x))); //返回用数组a去遍历，检查每个值是否不存在于变量b这个Set结构里，如果不存在则返回。
// Set {1}
//如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用Array.from方法。
// 方法一
let set1_19 = new Set([1, 2, 3]);
set1_19 = new Set([...set1_19].map(val => val * 2)); //map返回回调函数处理以后的值，改变原来的数据结构以后再放到一个新的Set数据结构里并赋给原来这个变量
// set的值是2, 4, 6
// 方法二
let set1_20 = new Set([1, 2, 3]);
set1_20 = new Set(Array.from(set1_20, val => val * 2)); //from第一个参数是作用于的数组，第二个参数是一个回调函数，第三个参数是this对象，返回的是一个新的数组实例，在这里把结果放到了新的Set结构里并赋值给了原变量。跟上面的用法差不多。
// set的值是2, 4, 6
//上面代码提供了两种方法，直接在遍历操作中改变原来的 Set 结构。
/**
* 11.2 WeakSet 与Set不同的地方是他的成员只能是对象或数组，笼统的来说是对象，就是非值，二维数组二维对象，赋值的时候都是把变量里的成员添加给WeakSet而不是把整个变量，所以用单位数组或者对象赋值会失败。可以用来管理内存，看最后一个例子。
*
* WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
* 首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
*/
const ws = new WeakSet();
//ws.add(1); //Uncaught TypeError: value must be an object 这是chrome浏览器的报错，值必须是对象
// TypeError: Invalid value used in weak set
//ws.add(Symbol());
// TypeError: invalid value used in weak set
//上面代码试图向 WeakSet 添加一个数值和Symbol值，结果报错，因为 WeakSet 只能放置对象。
//其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
//这是因为垃圾回收机制依赖引用计数，如果一个值的引用次数不为0，垃圾回收机制就不会释放这块内存。结束使用该值之后，有时会忘记取消引用，导致内存无法释放，进而可能会引发内存泄漏。WeakSet 里面的引用，都不计入垃圾回收机制，所以就不存在这个问题。因此，WeakSet 适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在 WeakSet 里面的引用就会自动消失。
//由于上面这个特点，WeakSet 的成员是不适合引用的，因为它会随时消失。另外，由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。
//这些特点同样适用于本章后面要介绍的 WeakMap 结构。
//WeakSet 是一个构造函数，可以使用new命令，创建 WeakSet 数据结构。
const ws2_1 = new WeakSet();
//作为构造函数，WeakSet 可以接受一个数组或类似数组的对象作为参数。（实际上，任何具有 Iterable 接口的对象，都可以作为 WeakSet 的参数。）该数组的所有成员，都会自动成为 WeakSet 实例对象的成员。
const a2_2 = [
[1, 2],
[3, 4]
];
const ws2_2 = new WeakSet(a2_2);
// WeakSet {[1, 2], [3, 4]}
//上面代码中，a是一个数组，它有两个成员，也都是数组。将a作为 WeakSet 构造函数的参数，a的成员会自动成为 WeakSet 的成员。
//注意，是a数组的成员成为 WeakSet 的成员，而不是a数组本身。这意味着，数组的成员只能是对象。
const b2_3 = [3, 4];
//const ws2_3 = new WeakSet(b2_3); //传入的参数只能是对象或数组，不能是值。
// Uncaught TypeError: Invalid value used in weak set(…)
//上面代码中，数组b的成员不是对象，加入 WeaKSet 就会报错。
/**
* WeakSet 结构有以下三个方法。
WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。
*/
//下面是一个例子。
const ws2_4 = new WeakSet();
const obj2_4 = {};
const foo2_4 = {};
ws2_4.add(window);
ws2_4.add(obj2_4);
ws2_4.has(window); // true
ws2_4.has(foo2_4); // false //不能直接添加值，因为往里添加的时候是添加的这个变量的成员，并不是添加的这个变量，所以要添加对象得用嵌套对象，也就是二维。
ws2_4.delete(window);
ws2_4.has(window); // false
//WeakSet 没有size属性，没有办法遍历它的成员。
ws2_4.size; // undefined
ws2_4.forEach; // undefined
//ws2_4.forEach(function(item) { console.log('WeakSet has ' + item) });
// TypeError: undefined is not a function
//上面代码试图获取size和forEach属性，结果都不能成功。
//WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。
//下面是 WeakSet 的另一个例子。
const foos2_5 = new WeakSet();
class Foo2_5 {
constructor() {
foos2_5.add(this) //把当前实例添加到foos2_5里，如果当前实例存在于foos2_5里，这可以调用这个类的实例化对象里的方法，只要这个实例化的引动执行完了(也就是在内存里消失了),则内存自动释放，不用考虑删除了实例foos2_5的内存释放，也不会出现内存泄漏。(因为只要这个对象在外部消失，他的引用在WeakSet里消失，内存就会自动释放，因为WeakSet是弱引用，不会计入垃圾回收机制的引用计数，所以这个方法避免了手动管理内存)。
}
method() {
if (!foos2_5.has(this)) {
throw new TypeError('Foo2_5.prototype.method 只能在Foo2_5的实例上调用！');
}
}
}
//上面代码保证了Foo的实例方法，只能在Foo的实例上调用。这里使用 WeakSet 的好处是，foos对实例的引用，不会被计入内存回收机制，所以删除实例的时候，不用考虑foos，也不会出现内存泄漏。
/**
* 11.3 Map 值值对组合数据，可以接受一个键值对数组，就像map3_3那样。
*/
//JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
const data3_1 = {};
const element3_1 = document.getElementById('test');
data3_1[element3_1] = 'metadata3_1';
data3_1['[object HTMLDivElement]']; // "metadata3_1"
//上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。
//为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
const m3_2 = new Map();
const o3_2 = { p: 'Hello World' };
m3_2.set(o3_2, 'content'); //写入键，键是o3_2这个对象
m3_2.get(o3_2); //读取键， "content"
m3_2.has(o3_2); //检查键， true
m3_2.delete(o3_2); //删除键值对， true
m3_2.has(o3_2); // false
//上面代码使用 Map 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。
//上面的例子展示了如何向 Map 添加成员。作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
const map3_3 = new Map([
['name', '张三'],
['title', 'Author']
]); // {"name" => "张三", "title" => "Author"} 在控制台打印发现变成了一个键值对的对象，Map接受键值对数组作为参数以后发生的是下面那个处理过程
map3_3.size; // 2
map3_3.has('name'); // true
map3_3.get('name'); // "张三"
map3_3.has('title'); // true
map3_3.get('title'); // "Author"
//上面代码在新建 Map 实例时，就指定了两个键name和title。
//Map构造函数接受数组作为参数，实际上执行的是下面的算法。
const items3_4 = [
['name', '张三'],
['title', 'Author']
];
const map3_4 = new Map();
items3_4.forEach(
([key, value]) => map3_4.set(key, value) //Map接受键值对数组之后执行的操作，相当于遍历了键值然后再写入到数据里。
);
//事实上，不仅仅是数组，任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构（详见《Iterator》一章）都可以当作Map构造函数的参数。这就是说，Set和Map都可以用来生成新的 Map。
const set3_5 = new Set([ //Set结构的键值对数组
['foo', 1],
['bar', 2]
]);
const m3_5 = new Map(set3_5); //{"foo" => 1, "bar" => 2} Map结构变成了键值对
m3_5.get('foo'); // 1
const set3_6 = new Set(m3_5);
set3_6; //Set(2) {Array(2), Array(2)} Map和Set互相转换，数据结构并没有发生变化，
for (let item of set3_6.keys()) {
//console.log(item[0]); //item[1]打印的是值，0是键，在Set里存放了数组之后只能这样遍历来取值。
}
const m3_6 = new Map([
['baz', 3]
]);
const m3_7 = new Map(m3_6);
m3_7.get('baz'); // 3
//上面代码中，我们分别使用 Set 对象和 Map 对象，当作Map构造函数的参数，结果都生成了新的 Map 对象。
//如果对同一个键多次赋值，后面的值将覆盖前面的值。
const map3_8 = new Map();
map3_8.set(1, 'aaa').set(1, 'bbb'); //可以连续执行写入不用分两行。
map3_8.get(1); // "bbb"
//上面代码对键1连续赋值两次，后一次的值覆盖前一次的值。
//如果读取一个未知的键，则返回undefined。
new Map().get('asfddfsasadf'); // undefined
//************************注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。
const map = new Map();
map.set(['a'], 555); //因为两个a都是数组，并不是字符串，所以相当于是两个对象，除非用一个变量来表示
map.get(['a']); // undefined
//上面代码的set和get方法，表面是针对同一个键，但实际上这是两个值，内存地址是不一样的，因此get方法无法读取该键，返回undefined。
//同理，同样的值的两个实例，在 Map 结构中被视为两个键。
const map3_9 = new Map();
const k13_9 = ['a'];
const k23_9 = ['a'];
map3_9
.set(k13_9, 111)
.set(k23_9, 222);
map3_9.get(k13_9); // 111 虽然是两个相同值的变量但是由于内存地址不一样，所以是两个值，而且也在两个不同的变量上。
map3_9.get(k23_9); // 222
//上面代码中，变量k1和k2的值是一样的，但是它们在 Map 结构中被视为两个键。
// ********************由上可知，Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。
//如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。
//总结，键名如果是简单类性值，如果严格相等则作为一个键，如果是对象作为键名，重名也没关系(undefined和null是两个不同的键，但是由于这两种特殊类型都是只有自己这一个数据，所以作为键名在Map里不会存在两个undefined或两个null)。
let map3_10 = new Map();
map3_10.set(-0, 123);
map3_10.get(+0); // 123
map3_10.set(true, 1);
map3_10.set('true', 2);
map3_10.get(true); // 1
map3_10.set(undefined, 3);
map3_10.set(null, 4);
map3_10.get(undefined); // 3 undefined和null是作为同一个键，如果已经有这个键了再用set写入undefined和null，就会把原来的值替换掉。
map3_10.set(NaN, 123);
map3_10.get(NaN); // 123
//Map 结构的实例有以下属性和操作方法。
//（1）size 属性
//size属性返回 Map 结构的成员总数。
const map3_11 = new Map();
map3_11.set('foo', true);
map3_11.set('bar', false);
map3_11.size; // 2
//（2）set(key, value)
//set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
const m3_12 = new Map();
m3_12.set('edition', 6); // 键是字符串
m3_12.set(262, 'standard'); // 键是数值
m3_12.set(undefined, 'nah'); // 键是 undefined
//set方法返回的是当前的Map对象，因此可以采用链式写法。
let map3_13 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
//（3）get(key)
//get方法读取key对应的键值， 如果找不到key， 返回undefined。
const m3_13 = new Map();
const hello = function() { console.log('hello'); };
m3_13.set(hello, 'Hello ES6!'); // 键是函数
m3_13.get(hello); // Hello ES6!
//（4）has(key)
//has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
const m3_14 = new Map();
m3_14.set('edition', 6);
m3_14.set(262, 'standard');
m3_14.set(undefined, 'nah');
m3_14.has('edition'); // true
m3_14.has('years'); // false
m3_14.has(262); // true
m3_14.has(undefined); // true
//（5）delete(key)
//delete方法删除某个键，返回true。如果删除失败，返回false。
const m3_15 = new Map();
m3_15.set(undefined, 'nah');
m3_15.has(undefined); // true
m3_15.delete(undefined);
m3_15.has(undefined); // false
//（6）clear()
//clear方法清除所有成员，没有返回值。
let map3_16 = new Map();
map3_16.set('foo', true);
map3_16.set('bar', false);
map3_16.size; // 2
map3_16.clear();
map3_16.size; // 0
/**
* 遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
需要特别注意的是，Map 的遍历顺序就是插入顺序。(也就是跟数组一样，后插入的在末尾添加)
*/
const map3_17 = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map3_17.keys()) {
//console.log(key);
}
// "F"
// "T"
for (let value of map3_17.values()) {
//console.log(value);
}
// "no"
// "yes"
for (let item of map3_17.entries()) {
//console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map3_17.entries()) {
//console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map3_17) {
//console.log(key, value);
}
// "F" "no"
// "T" "yes"
//上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。
map[Symbol.iterator] === map.entries; // true
//Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。（与Set相比:Set也用扩展运算符，但是还可以用Array.from）
const map3_18 = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map3_18.keys()];
// [1, 2, 3]
[...map3_18.values()];
// ['one', 'two', 'three']
[...map3_18.entries()];
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map3_18];
// [[1,'one'], [2, 'two'], [3, 'three']]
//结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。（Set有forEach方法）
const map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
const map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}
//此外，Map 还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历。
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
//forEach方法还可以接受第二个参数，用来绑定this。 和Set一样
const reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value); //%s是占位符，会被后面的字符串替换掉
}
};
map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter);
//上面代码中，forEach方法的回调函数的this，就指向reporter。
//与其他数据结构的互相转换
//（1）Map 转为数组
//前面已经提过，Map 转为数组最方便的方法，就是使用扩展运算符（...）。
const myMap = new Map()
.set(true, 7)
.set({ foo: 3 }, ['abc']);
[...myMap];
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
//（2）数组 转为 Map
//将数组传入 Map 构造函数，就可以转为 Map。
new Map([
[true, 7],
[{ foo: 3 },
['abc']
]
]);
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
//（3）Map 转为对象
//如果所有 Map 的键都是字符串，它可以无损地转为对象。
function strMapToObj3_19(strMap) {
let obj = Object.create(null);
for (let [k, v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap3_19 = new Map()
.set('yes', true)
.set('no', false);
strMapToObj3_19(myMap3_19);
// { yes: true, no: false }
//如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。因为对象的键名只能是字符串。
//（4）对象转为 Map
function objToStrMap3_20(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) { //先把键遍历出来，再把键值写入到map数据结构里。也可以直接用Object.entries遍历出键值对来。
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap3_20({ yes: true, no: false });
// Map {"yes" => true, "no" => false}
//（5）Map 转为 JSON
//Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。
function strMapToJson3_21(strMap) {
return JSON.stringify(strMapToObj3_19(strMap)); //用到了上面转为对象的方法
}
let myMap3_21 = new Map().set('yes', true).set('no', false);
strMapToJson3_21(myMap3_21);
// '{"yes":true,"no":false}'
//另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。
function mapToArrayJson3_22(map) {
return JSON.stringify([...map]); //直接用扩展运算符展开转为数组再转为JSON
}
let myMap3_22 = new Map().set(true, 7).set({ foo: 3 }, ['abc']);
mapToArrayJson3_22(myMap3_22);
// '[[true,7],[{"foo":3},["abc"]]]'
//（6）JSON 转为 Map
//JSON 转为 Map，正常情况下，所有键名都是字符串。
function jsonToStrMap3_23(jsonStr) {
return objToStrMap3_20(JSON.parse(jsonStr)); //用到了上面对象转Map的方法，如果传进来是JSON对象的话可以用这个方法，因为通常情况下键名都是字符串。
}
jsonToStrMap3_23('{"yes": true, "no": false}');
// Map {'yes' => true, 'no' => false}
//但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。
function jsonToMap3_24(jsonStr) {
return new Map(JSON.parse(jsonStr)); //因为下面传入的是JSON格式的键值对数组，所以解析之后直接传入新的Map数据里就可以。
}
jsonToMap3_24('[[true,7],[{"foo":3},["abc"]]]');
// Map {true => 7, Object {foo: 3} => ['abc']}
//11.4 WeakMap
//WeakMap结构与Map结构类似，也是用于生成键值对的集合。
// WeakMap 可以使用 set 方法添加成员
const wm14_1 = new WeakMap();
const key4_1 = { foo: 1 };
wm14_1.set(key4_1, 2);
wm14_1.get(key4_1); // 2
// WeakMap 也可以接受一个数组，
// 作为构造函数的参数
const k14_1 = [1, 2, 3];
const k24_1 = [4, 5, 6];
const wm24_1 = new WeakMap([
[k14_1, 'foo'],
[k24_1, 'bar']
]);
wm24_1.get(k24_1); // "bar"
//WeakMap与Map的区别有两点。
//首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。与WeakSet相比，WeakSet只接受对象作为成员
const map4_2 = new WeakMap();
//map4_2.set(1, 2);
// TypeError: 1 is not an object!
//map4_2.set(Symbol(), 2);
// TypeError: Invalid value used as weak map4_2 key
//map4_2.set(null, 2);
// TypeError: Invalid value used as weak map4_2 key
//上面代码中，如果将数值1和Symbol值作为 WeakMap 的键名，都会报错。
//其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。------与WeakSet相同
//WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。请看下面的例子。
const e14_3 = document.getElementById('test');
const e24_3 = document.getElementById('test');
const arr4_3 = [
[e14_3, 'foo 元素'],
[e24_3, 'bar 元素'],
];
//上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。
//一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。
//// 不需要 e1 和 e2 的时候
// 必须手动删除引用
arr4_3[0] = null;
arr4_3[1] = null;
//上面这样的写法显然很不方便。一旦忘了写，就会造成内存泄露。
//WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。
//基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。一个典型应用场景是，在网页的 DOM 元素上添加数据，就可以使用WeakMap结构。当该 DOM 元素被清除，其所对应的WeakMap记录就会自动被移除。
const wm4_4 = new WeakMap();
const element4_4 = document.getElementById('test');
wm4_4.set(element4_4, 'some information');
wm4_4.get(element4_4); // "some information"
//上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。
//也就是说，上面的 DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。
//总之，WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。WeakMap结构有助于防止内存泄漏。
//注意，WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。------------------------------------------
const wm4_5 = new WeakMap();
let key4_5 = {};
let obj4_5 = { foo: 1 };
wm4_5.set(key4_5, obj4_5);
obj4_5 = null;
wm4_5.get(key4_5);
// Object {foo: 1} //值依然存在，并没有被修改。
//上面代码中，键值obj是正常引用。所以，即使在 WeakMap 外部消除了obj的引用，WeakMap 内部的引用依然存在。
//WeakMap 的语法
//WeakMap 与 Map 在 API 上的区别主要是两个，一是没有遍历操作（即没有keys()、values()和entries()方法），也没有size属性。因为没有办法列出所有键名，某个键名是否存在完全不可预测，跟垃圾回收机制是否运行相关。这一刻可以取到键名，下一刻垃圾回收机制突然运行了，这个键名就没了，为了防止出现不确定性，就统一规定不能取到键名。二是无法清空，即不支持clear方法。因此，WeakMap只有四个方法可用：get()、set()、has()、delete()。
const wm4_6 = new WeakMap();
// size、forEach、clear 方法都不存在
wm4_6.size; // undefined
wm4_6.forEach; // undefined
wm4_6.clear; // undefined
//WeakMap 的示例
//WeakMap 的例子很难演示，因为无法观察它里面的引用会自动消失。此时，其他引用都解除了，已经没有引用指向 WeakMap 的键名了，导致无法证实那个键名是不是存在。
//贺师俊老师提示，如果引用所指向的值占用特别多的内存，就可以通过 Node 的process.memoryUsage方法看出来。根据这个思路，网友vtxf补充了下面的例子。 https://github.com/ruanyf/es6tutorial/issues/362#issuecomment-292109104
//首先，打开 Node 命令行。
//$ node --expose-gc
//上面代码中，--expose-gc参数表示允许手动执行垃圾回收机制。
//然后，执行下面的代码。
/**
* // 手动执行一次垃圾回收，保证获取的内存使用状态准确
> global.gc();
undefined
// 查看内存占用的初始状态，heapUsed 为 4M 左右
> process.memoryUsage();
{ rss: 21106688,
heapTotal: 7376896,
heapUsed: 4153936,
external: 9059 }
> let wm = new WeakMap();
undefined
// 新建一个变量 key，指向一个 5*1024*1024 的数组
> let key = new Array(5 * 1024 * 1024);
undefined
// 设置 WeakMap 实例的键名，也指向 key 数组
// 这时，key 数组实际被引用了两次，
// 变量 key 引用一次，WeakMap 的键名引用了第二次
// 但是，WeakMap 是弱引用，对于引擎来说，引用计数还是1
> wm.set(key, 1);
WeakMap {}
> global.gc();
undefined
// 这时内存占用 heapUsed 增加到 45M 了
> process.memoryUsage();
{ rss: 67538944,
heapTotal: 7376896,
heapUsed: 45782816,
external: 8945 }
// 清除变量 key 对数组的引用，
// 但没有手动清除 WeakMap 实例的键名对数组的引用
> key = null;
null
// 再次执行垃圾回收
> global.gc();
undefined
// 内存占用 heapUsed 变回 4M 左右，
// 可以看到 WeakMap 的键名引用没有阻止 gc 对内存的回收
> process.memoryUsage();
{ rss: 20639744,
heapTotal: 8425472,
heapUsed: 3979792,
external: 8956 }
*/
//上面代码中，只要外部的引用消失，WeakMap 内部的引用，就会自动被垃圾回收清除。由此可见，有了 WeakMap 的帮助，解决内存泄漏就会简单很多。
//WeakMap 的用途
//前文说过，WeakMap 应用的典型场合就是 DOM 节点作为键名。下面是一个例子。
let myElement4_7 = document.getElementById('test');
let myWeakmap4_7 = new WeakMap();
myWeakmap4_7.set(myElement4_7, { timesClicked: 0 });
myElement4_7.addEventListener('click', function() {
let logoData = myWeakmap4_7.get(myElement4_7);
logoData.timesClicked++; //可以通过点击test这个容器之后来查看myWeakmap4_7里面的值的变化。
}, false);
//上面代码中，myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。
//WeakMap 的另一个用处是部署私有属性。
const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
constructor(counter, action) {
_counter.set(this, counter); //传入两个属性，存放在上面这两个WeakMap里面，这样实例如果删除，这两个属性也就消失了。
_action.set(this, action);
}
dec() {
let counter = _counter.get(this);
if (counter < 1) return;
counter--;
_counter.set(this, counter);
if (counter === 0) {
_action.get(this)();
}
}
}
const c4_8 = new Countdown(2, () => console.log('DONE'));
c4_8.dec();
c4_8.dec();
// DONE 因为c4_8.dec()执行完了，所以存放在WeakMap里的属性消失了，只打印了一个DONE
//上面代码中，Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏。
/**
* 总结，这四种数据结构大同小异，Set大多时候更像是去重后的数组，因为他的键值是一样的，Map则算是值值对的组合，键可以是方法，WeakSet和Set差不多，但是他的成员只能是对象(包括数组，这里的对象指的是非单一值比如数字字符串)，而且添加的时候是把成员遍历添加给了WeakSet，所以要传入一个单维数组的话得嵌套，不然传进去的其实是这个数组里的成员。Set那俩方法是用add添加，遍历来查看属性，Map那俩是用set来添加，get来读取属性，Weak那俩都是弱引用，但是WeakMap的值却不是，是正常引用。
*/ECMAScript学习笔记——Set&Map
猜你喜欢
转载自my.oschina.net/lmqswp/blog/1820487
今日推荐
周排行