ES6-新增Set/Map类型

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012054869/article/details/82108815

1.Set数据结构

（1）定义：

类似于数组，但是其成员是唯一的；

实现了Interator接口；

例子：

<script>
    let mySet =new Set([10,20,4,60,1]);
    console.log(mySet);//输出数组：Set [ 10, 20, 4, 60, 1 ]
  //接收Set
    let mySet2 =mySet;
    console.log(mySet2);//输出数组：Set [ 10, 20, 4, 60, 1 ]
</script>

（2）Set构造函数特性
a. 可以接收一个数组
b. 可以接收所有实现了Interator接口的数据结构；
例子：

<script>
    let mySet =new Set([10,20,4,60,1]);
    console.log(mySet);//输出数组：Set [ 10, 20, 4, 60, 1 ]

    //接收Set
    let mySet2 =mySet;
    console.log(mySet2);//输出数组：Set [ 10, 20, 4, 60, 1 ]

    // 实现数组+去重
    let arr = [10,30,4,30,4,10,90,76];

    //组合数组，方法一
    let newArr = [...new Set(arr)];
    console.log(newArr);//Array [ 10, 30, 4, 90, 76 ]

    //组合数组，方法二
    let newArr2 = Array.from(new Set(arr));
    console.log(newArr2);//Array [ 10, 30, 4, 90, 76 ]

</script>

（3）属性,size 例子：

<script>
    let mySet =new Set([10,20,4,60,1]);
    // set数据结构的属性
    console.log(mySet.size);//5
</script>

（4）方法：
a. add(value)添加成员
b. delete(value)删除成员
c. has(value)判断是否存在某个值
d. clear() 清空所有成员

<script>

    // 创建Set数据类型
    let mySet3= new Set([10,20]);

    // 添加
    mySet3.add('hello');
    console.log(mySet3);//Set [ 10, 20, "hello" ]

    // 删除
    mySet3.delete('hello');//指定删除的值,不能指定索引值，因为Set没有索引值
    console.log(mySet3);//Set [ 10, 20 ]

    //判断知否存在某个值has()
    console.log(mySet3.has('hello'));//返回false


    //clear()
    mySet3.clear();
    console.log(mySet3);//输出空Set []

</script>

e. 遍历Set结构方法：for(...of ...)和forEach()
例子：

<script>
    //Set数据结构的遍历
    let mySet4 = new Set([20,40,56,45,23,55]);

   // 方法一
   for(let value of mySet4){
   		console.log(value);//输出20,40,56,45,23,55
   }
   // 方法二
   mySet4.forEach(function(value){
   	console.log(value);//输出20,40,56,45,23,55
   })

</script>

f. keys()等同于values()
g. values()
h. entries() 没有索引，索引输出的都是其value值
例子：

<script>
    //Set数据结构的遍历
    let mySet4 = new Set([20,40,56,45,23,55]);

   console.log(mySet4.values());//Set Iterator {  },遍历器用for of

   for(let value of mySet4.values()){
   		console.log(value);//输出20,40,56,45,23,55
   }

   for(let value2 of mySet4.keys()){
   		console.log(value2);//输出20,40,56,45,23,55
   }

   for(let [k,v] of mySet4.entries()){
   		console.log(k,v);//输出20 20 ,40 40,56 56,45 45,23 23,55 55
   }

</script>

2.WeakSet

1.定义：

（1）结构与Set类型类似，成员唯一，区别在于WeakSet成员必须是对象

（2）WeakSet中的对象都是弱引用

（3）不能遍历，也没用size属性；

（4）没有实现Interator接口（for ...of 报错）

例子：

<script>
    // WeakSet

    // let ws = new WeakSet([20,30]);
    //报错，因为成员只是对象

    //String构造函数属于对象
    let ws2 = new WeakSet([String,{}]);
    console.log(ws2);//输出WeakSet [ {}, String() ]

</script>

2.方法
(1) add()
(2) delete()
(3)has

例子：

<script>

    //String构造函数属于对象
    let ws2 = new WeakSet([String,{}]);

    // add()
    ws2.add(window);
    console.log(ws2);//WeakSet [ String(), {}, Window ]

    //delete()
    ws2.delete(String);
    console.log(ws2);//WeakSet [ {}, Window ]
  
    console.log(ws2.has(window));//true

</script>

3.Map数据结构

（1）定义：Map跟对象类型类似，键值对组成的集合，键的类型可以是任意类型；

Map实现了Interator接口，可以实现遍历；

（2）构造函数：参数可以是数组，数组是二位数组，元素数组两个元素：key value，如[ [ ' key ' , ' value '] , [ ' key ' , ' value '] ]

例子：

<script>
    //Map
    let m = new Map();
    console.log(m);//输出Map {  }，

    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

</script>

（3）属性，获取长度size

<script>
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);

    console.log(m2.size);//4
</script>

（4）方法：

a. 获取里面的值get(key)，例子

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2.get('name'));//lili
    console.log(m2.get('age'));//20

</script>

b：添加 / 修改set(' key ',' value ')，任意类型都可以

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    //修改
    m2.set('name','Jack');
    console.log(m2);//Map { name → "Jack", title → "hello", age → "20", sex → "girl" }

    // 添加
    m2.set('grade','H5');
    m2.set(true,'H5');//任意类型都可以
    m2.set({tag:"k2"},{tag:"k3"});
    m2.set(undefined,[1,2,3]);
    console.log(m2);//Map { name → "Jack", title → "hello", age → "20", sex → "girl", grade → "H5" }

</script>

c：判断键是否存在has(key)

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    //判断某个键是否存在
    console.log(m2.has('age'));//true
    console.log(m2.has('tel'));//false
</script>

d：清空clear()

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    //清空
    m2.clear();
    console.log(m2);//Map {  }

</script>

（5）遍历方法

a. for...of

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    // 添加
    m2.set(true,'H5');//任意类型都可以
    m2.set({tag:"k2"},{tag:"k3"});
    m2.set(undefined,[1,2,3]);

    console.log("======================");


    //遍历:方法一
    for(let value of m2){
    	console.log(value);//0: "name"1: "Jack"length: 2__proto__: Array []
    	
    	console.log(value[0],":",value[1]);//name : Jack,title : hello,age : 20,sex : girl,true : H5,Object { tag: "k2" }: Object { tag: "k3" },undefined : Array [ 1, 2, 3 ]

    }
</script>

b. forEach

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    // 添加
    m2.set(true,'H5');//任意类型都可以
    m2.set({tag:"k2"},{tag:"k3"});
    m2.set(undefined,[1,2,3]);

    console.log("======================");
    
   //遍历：方法二
    m2.forEach(function(value,key){
    	console.log(key);//输出值
    	console.log(value,"::",key);//同样输出上面一样
    })
</script>

c. values()

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    // 添加
    m2.set(true,'H5');//任意类型都可以
    m2.set({tag:"k2"},{tag:"k3"});
    m2.set(undefined,[1,2,3]);

    console.log("======================");
    
   // 遍历：方法三
    for(let v of m2.values()){
    	console.log(v);//输出值key：Jack,hello,20,girl,H5,Object { tag: "k3" },Array [ 1, 2, 3 ],Map {  }
    }
</script>

 

d. keys()

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    // 添加
    m2.set(true,'H5');//任意类型都可以
    m2.set({tag:"k2"},{tag:"k3"});
    m2.set(undefined,[1,2,3]);

    console.log("======================");
    
   // 遍历：方法四
    for(let k of m2.keys()){
    	console.log(k);//输出value：name,title,age,sex,true,Object { tag: "k3" },undefined
    }
</script>

 

e. entries()

<script>
    //Map
    let m2 =new Map([['name','lili'],['title','hello'],['age','20'],['sex','girl']]);
    console.log(m2);//Map { name → "lili", title → "hello", age → "20", sex → "girl" }

    // 添加
    m2.set(true,'H5');//任意类型都可以
    m2.set({tag:"k2"},{tag:"k3"});
    m2.set(undefined,[1,2,3]);

    console.log("======================");
    
   // 遍历：方法五
    for(let [k,v] of m2.entries()){
    	console.log(k,":",v);//name : Jack,title : hello,age : 20,sex : girl,true : H5,Object { tag: "k2" }: Object { tag: "k3" },undefined : Array [ 1, 2, 3 ]
    }
</script>

4.WeakMap

（1）定义：与Map区别

键必须是对象；

键所指向的对象是弱引用；

不可遍历，没有实现Interator接口

（2）方法

a. set()

b. get()

c. has()

d. delete()

<script>
    //WeakMap

    let m = new WeakMap([[window,"tel"],[String,"computer"]]);
    console.log(m);//输出WeakMap { String() → "computer", Window → "tel" }

    m.set({},"hello");
    console.log(m);//WeakMap { Window → "tel", String() → "computer", {} → "hello" }

    console.log(m.get(100));//undefined
    console.log(m.get(window));//true

    m.delete(window);
    console.log(m);//WeakMap { {} → "hello", String() → "computer" }

    // m.clear();
    // console.log(m);//输出clear is not function

</script>