参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/
Set和Map数据结构
1.Set
基本用法
Set是一种新的数据结构，它的成员都是唯一的不重复的。
let s1 = new Set();
s1.add({"name":"123"});
s1 // Set(1){{"name":"123"}}
let s2 = new Set([1,2,3,4,4,3,2,1]);
s2 //Set(4) {1, 2, 3, 4}
Set判断重复的方式是精准相等，同Object.is()
NaN == NaN //false
NaN === NaN //false
Object.is(NaN,NaN)//true
let s3 = new Set();
s3.add(NaN);
s3.add(NaN);
s3 //Set(1) {NaN} //Set添加的成员都是不重复的
Object.is({},{});//false 两个空对象总是不相等
s3.add({});
s3.add({});
s3 //Set(3) {NaN, {}, {}}
Set实例的属性和方法
属性
Set.prototype.constructor:返回set结构的构造器 ƒ Set() { [native code] }
Set.prototype.size：返回set存储数据的大小
方法
add:向set结构中添加成员
has:判断set中是否有某个成员
delete:删除set中的某个成员
clear:清楚set中的所有成员
let s1 = new Set();
s1.add({"test":"11"});
s1.add({"test":"22"});
s1//Set(2) {{"test":"11"}, {"test":"22"}}
s1.has("test");//false
s1.delete("test");//false
s1.has({"test":"11"});//false
s1.delete({"test":"11"});//false
let s2 = new Set();
s2.add("name");
s2.has("name");//true
对象与Set解构判断是否含有某一个key值的不同方式
var obj = {
name : "test",
value : "123"
}
obj.name//"test"
obj[name]//"test"
obj.value//"123"
obj[value]//"123"
let s4 = new Set();
s4.add("name");
s4.add("value");
s4.has("name");//true
遍历操作
(1)数组结构，对象结构，set结构调用keys(),values(),entries()遍历比较
数组结构
let arr = [1,2,3,4,5];
for(let k of arr.keys()){
console.log(k);//0 1 2 3 4
}
for(let v of arr.values()){
console.log(v);//1 2 3 4 5
}
for(let entry of arr.entries()){
console.log(entry);//[0,1] [1,2] [2,3] [3,4] [4,5]
}
对象结构
let obj = {
name : "test",
size : 13,
color : "red"
}
for(let k of Object.keys(obj)){
console.log(k);//name size color
}
for(let v of Object.values(obj)){
console.log(v);//test 13 red
}
for(let o of Object.entries(obj)){
console.log(o);//["name", "test"] ["size", 13] ["color", "red"]
}
Set 结构:set结构没有键名，只有键值，所以keys和valus方法返回值一致，entries每次调用返回的是一个数组，数组成员是这个entry的键名和键值，所以两个数组成员是相等的
let s = new Set();
s.add({name : "test"});
s.add({age : 13});
s.add({color :"red"});
for(let k of s.keys()){
console.log(k);//{name: "test"} {age: 13} {color: "red"}
}
for(let v of s.values()){
console.log(v);//{name: "test"} {age: 13} {color: "red"}
}
for(let o of s.entries()){
console.log(o);//[{name: "test"}, {name: "test"}] [{age: 13},{age: 13}] [{color: "red"},{color: "red"}]
}
for(let v of s){
console.log(v);//{name: "test"} {age: 13} {color: "red"} Set结构的实例默认是可遍历的，默认遍历器是values()方法
}
(2)数组结构与set结构调用forEach()遍历比较
数组结构
let arr = [1,2,3,4,5];
arr.forEach(function(i,v){
v = v + 2;
console.log(v);
});// 2 3 4 5 6
arr.forEach((i,v) => console.log(v*5));//0 5 10 15 20
Set结构
let s = new Set([1,2,3,4,5]);
s.forEach(function(i,v){
console.log(v - 1);
});//0 1 2 3 4
等同于
s.forEach((i,v) => console.log(v - 1););//0 1 2 3 4
遍历的应用
扩展运算符(...)内部使用for...of循环，因此set结构也可以使用
let s = new Set();
s.add({name : "test"});
s.add({age : 13});
s.add({color :"red"});
[...s] //[{name : "test"}, {age : 13}, {color :"red"}]
目前可以使用扩展运算符(...)的结构:Array,Object,Set
数组的map和filter也可以间接用在Set结构上
let s = new Set([1,2,3,4,5]);
s = new Set([...s].map(x => x+2));//Set(5) {3, 4, 5, 6, 7}
s = new Set([...s].filter(x => (x%2) === 0));//Set(2) {2, 4}
使用Set实现交集，并集，差集
let s1 = new Set([1,2,3,4,5]);
let s2 = new Set([3,4,5,6,7]);
并集
let s3 = new Set([...s1,...s2]);
s3 //Set(7) {1, 2, 3, 4, 5, 6, 7}
交集
let s4 = new Set([...s1].filter(x => s2.has(x)))
s4 //Set(3) {3, 4, 5}
差集
let s5 = new Set([...s1].filter(x => !s2.has(x)))
s5 //Set(2) {1, 2}
2.WeakSet
含义:WeakSet和Set一样都是不可重复的数据结构，但是WeakSet的成员只能是对象
let s1 = new Set();
s1.add(3);
s1.add({name : "test"});
s1 //Set(2) {3, {name : "test"}}
let s2 = new WeakSet();
s2.add({name : "test"});
s2 //WeakSet {{name : "test"}}
s2.add(3);//Uncaught TypeError: Invalid value used in weak set 只能接受加入对象成员
WeakSet中的对象都是弱引用，如果其他地方没有引用这个对象，垃圾回收机制就会自动回收该对象所占用的内存，不考虑对象还存在于WeakSet中
语法
let w1 = new WeakSet();
w1.add({name : "test"});
除对象外，数组以及类数组都可以添加到weakSet结构中
let dd = document.querySelectorAll("tr");
w1.add(dd);
w1.add([1,2]);
w1 //WeakSet {{name : "test"},NodeList(626), [1,2]}
let a = [3,4];
w1.add(a);//WeakSet {{name : "test"},NodeList(626), [1,2],[3,4]}
let w2 = new WeakSet(a);
//Uncaught TypeError: Invalid value used in weak set
//此处数组a的成员是单个数值,不是对象,调用WeakSet构造器生成WeakSet结构时,被加入到WeakSet中的是数组的成员，由于成员不是对象，所以报错
WeakSet结构有三个方法add,has和delete
WeakSet.prototype.add:向WeakSet结构中添加一个新成员
WeakSet.prototype.has:返回一个布尔值，表示某一个值是否存在WeakSet实例当中
WeakSet.prototype.delete:清除WeakSet实例的指定成员
w1.add(window);
w1.has(window);//true
w1.delete(window);//true
WeakSet没有size属性，不能遍历，因为它的成员都是弱引用，随时可能消失。
数组去重的方法
(1)Set结构与扩展运算符(...)相结合
let arr = [1,2,3,4,3,2,'a','aa','b','a'];
[...new Set(arr)] //[1, 2, 3, 4, "a", "aa", "b"]
3.Map
含义:Map是一种键值对构成的数据结构，不同于对象，map的键可以是任何简单值或者对象。
基本用法
set:set(key,value) 向Map结构中添加键值对。返回值map因此可以链式调用
get:get(key) 读取Map结构中键值为key所对应的value值
has:has(key) 判断Map结构中是否含有键值为key的键值对，返回值是布尔类型
delete:delete(key) 删除Map结构中键值为key所对应的键值对
clear:map.clear() 清除map结构实例的所有成员
生成Map实例的方法
(1)先用new Map构造器的方式生成map结构，再使用基本方法将数据添加到Map结构中
let m1 = new Map();
m1.set(0,"t1");
m1.set({name : "maptest"},"test2");
m1.set("color",2);
m1.get({name : "maptest"});//undefined
//{name : "maptest"} == {name : "maptest"} false {name : "maptest"} === {name : "maptest"} false Object.is({name : "maptest"},{name : "maptest"})
//虽然看起来值相同，但是{name : "maptest"} == {name : "maptest"} 左右两个对象是不同的内存地址，所以是两个对象
//'color' === 'color' true ['color'] === ['color'] false
let obj = {name : "maptest"};
m1.set(obj,"t3");
m1.get(obj);// "t3"
m1.has(0);//true
m1.delete('color');//true
m1.has('color');//false
(2)使用new Map构造器创建map实例时，
将有iterator迭代器接口的数据结构，并且此结构成员是一个双成员的数组，传入构造器中做参数
有iterator迭代器接口的结构如数组，类数组对象，set,map
数组
let m2 = new Map([["name","value"]]);
m2 //Map(1) {"name" => "value"}
m2.get("name");//"value"
类数组对象
let divArr = document.querySelectorAll("tr");
let arr = [];
function test(){
[...divArr].forEach(function(value,index){
arr.push([index,value]);
});
}
test();
arr //[[0, NodeList(69)]]
let m3 = new Map(arr);
m3.get(0);//NodeList(69) [n1,n2,n3......]
Set数据结构
let s1 = new Set([[1,10],[2,20]]);
let m4 = new Map(s1);
m4.get(1);//10
m4.has(2);//true
Map数据结构
let m5 = new Map([["run","fast"]]);
let m6 = new Map(m5);
m6.get("run");//"fast"
如果针对同一个键重复赋值，则后赋的值会代替先赋的值
m6.set("run","slow");
m6.get("run");//"slow"
Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个值。
'a' === 'a' true 简单值严格相等，map视为同一个值
['a'] === ['a'] false 内存地址不同，map视为不同的值
实例的属性和操作方法
属性
size:返回Map结构的成员总数
方法
set/get/has/delete/clear
遍历方法
keys()/values()/entries()/forEach()用法同set,遍历顺序即插入顺序。
let m = new Map();
m.set(name,"test");
m.set(age,13);
m.set(color,"red");
for(let k of m.keys()){
console.log(k);//name age color
}
for(let v of m.values()){
console.log(v);//test 13 red
}
for(let o of m.entries()){
console.log(o);//["name": "test"] ["age": 13] ["color": "red"]
}
for(let v of m){
console.log(v);//["name": "test"] ["age": 13] ["color": "red"] map结构的实例默认是可遍历的，默认遍历器是entries()方法
}
m.forEach(function(v,i){
console.log("key : "+i+",value : "+v);
});
//key : name,value : test
//key : age,value : 13
//key : color,value : red
m.forEach(function(v,i){
console.log(navigator.userAgent);
},navigator);
//3 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
//forEach除了回调函数还可以传第二个参数，可以用来绑定对象
Map与其他数据结构互相转换
let m = new Map();
m.set(name,"test");
m.set(age,13);
m.set(color,"red");
(1)Map与数组互相转换
a.(...)扩展运算符可以将map转换成数组
console.log([...m]);//[["name": "test"],["age": 13],["color": "red"]]
b.通过将符合标准的数组传入map构造器中生成map实例，可以实现数组转换成map结构
let arr = [[0,'a'],[1,'b'],[2,'c']];
let m = new Map(arr);
m //Map(3) {0 => "a", 1 => "b", 2 => "c"}
(2)Map与对象互相转换
a.通过循环遍历将map的key值赋值给对象的属性名，value值赋值给对象的属性值，可以实现map转换成对象。
let m = new Map([[{color : "black"},"22"]]).set(0,'test').set(1,'a');
m //Map(3) {{color: "black"} => "22", 0 => "test", 1 => "a"}
let obj = {};
for(let [k,v] of m){
obj[k] = v;
}
obj //{0: "test", 1: "a", [object Object]: "22"}
//{color: "black"} 这个键名是非字符串的，所以被转化成了[oject object]
b.对象转换成map 遍历对象，将对象的属性名设置成map的key值，将对象的属性值设置成map的value值
let obj = {0: "test", 1: "a", 2: "22"}
let m = new Map(Object.entries(obj));
m //Map(3) {"0" => "test", "1" => "a", "2" => "22"}
(3)Map与JSON互相转换
a.可以通过map-->Array-->json或map-->Object-->json的两种方式实现map转换成json
let m = new Map([[{color : "black"},"22"]]).set(0,'test').set(1,'a');
m //Map(3) {{color: "black"} => "22", 0 => "test", 1 => "a"}
JSON.stringify([...m]);//'[[{"color":"black"},"22"],[0,"test"],[1,"a"]]'
let m = new Map([[2,"22"]]).set(0,'test').set(1,'a');
m //Map(3) {2 => "22", 0 => "test", 1 => "a"}
let obj = {};
for(let [k,v] of m){
obj[k] = v;
}
obj //{0: "test", 1: "a", 2: "22"}
JSON.stringify(obj);//'{"0":"test","1":"a","2":"22"}'
b.可以通过json-->Array-->map或json-->Object-->map的两种方式实现map转换成json
let j1 = '[[{"color":"black"},"22"],[0,"test"],[1,"a"]]';
let m = new Map(JSON.parse(j1));
m //Map(3) {{"color":"black"} => "22", 0 => "test", 1 => "a"}
let j1 = '{"0":"test","1":"a","2":"22"}';
let obj = JSON.parse(j1);
let m = new Map(Object.entries(obj));
m //Map(3) {"0" => "test", "1" => "a", "2" => "22"}
4.WeakMap
含义:用于生成键值对的集合，但是键名只能是对象或者null，而且WeakMap键名所引用的对象是弱引用。
语法:可以通过set来向WeakMap添加结构，也可以使用向WeakMap构造器中传参数的方式生成WeakMap结构
set/get/has/delete
let w1 = new WeakMap();
w1.set({name : "test"},"12");
w1.has({name : "test"});//false {name : "test"} === {name : "test"} 内存地址不同，WeakMap视为不同的值
let obj = {name : "test1"};
w1.set(obj,"0");
w1.has(obj);//true
w1.set(window,'window');
w1.has(window);//true
w1.delete(window);//true
let a1 = [1,2,3],a2 = [4,5,6];
let w2 = new WeakMap([[a1,'abc'],[a2,'def']]);
w2 //WeakMap {Array(3) => "def", Array(3) => "abc"}
w2.has(a2);//true
特点:同WeakSet,WeakMap键名指向的对象，不计入垃圾回收机制。
因此，只要WeakMap键名所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。