ES6-新增Set/Map类型

绝地灬酷狼 2022-05-14 20:46 355阅读 0赞

**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>

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6中新增的数据类型 Symbol

在`ES6`之前，基本数据类型有五种 `Undefined`、`Null`、`String`、`Number`、`Boolean`；引用数据类型有一种 `Object`。但在`

亦凉/ 2023年07月17日 05:56/ 0 赞/ 105 阅读

相关 ES6 新增数据类型 Symbol

Symbol是ES6新增的数据类型，通常叫符号创建： Symbol(符号名) 设计初衷：为对象设置私有属性（只能在对象内部使用，外边无法使用）

爱被打了一巴掌/ 2023年07月03日 04:52/ 0 赞/ 232 阅读

相关 es6新增类型——Symbol

Symbol js数据类型： String Number Null Undefined Object Boolean Symbol Symb

旧城等待，/ 2023年06月30日 09:24/ 0 赞/ 82 阅读

相关 ES6 新增的类型Symbol

Symbol 是ES6中新增的一种数据类型，是唯一的标识符，可以作为对象的唯一属性名； Symbol 可以代替一个常量，指的常量的值唯一； Symbol 的特点：唯

我会带着你远行/ 2022年12月29日 01:37/ 0 赞/ 242 阅读

相关 es6新增详解

文章目录一、es6是什么 1. 官方回答 2. 本人理解二、版本新增 1. let 和 cons

矫情吗；*/ 2022年12月20日 03:28/ 0 赞/ 321 阅读

相关 ES6新增 Promise

promise 作用 1.解决延期问题 2.避免回调层级过深问题 promise代码示例： //promise 解决了层级过深的问题，实现承诺

深碍√TFBOYSˉ_/ 2022年12月18日 00:48/ 0 赞/ 268 阅读

相关 ES6新增内容

1、map、filter和reduce的区别 map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。map 的回调函数接受三个参数，分

- 日理万妓/ 2022年12月16日 10:58/ 0 赞/ 378 阅读

相关浅谈ES6新增类型Symbol

1、Symbol概述 JavaScript基本数据类型有6种：Undefined、Null、Boolean、String、Number、Object。 ES6新增了一种数据

痛定思痛。/ 2022年06月17日 13:38/ 0 赞/ 320 阅读

相关 ES6-新增Set/Map类型

1.Set数据结构（1）定义：类似于数组，但是其成员是唯一的；实现了Interator接口；例子： <script> let mySe

绝地灬酷狼/ 2022年05月14日 20:46/ 0 赞/ 356 阅读

相关 ES6新增数据类型set和map

一、set 1、创建 let set = new Set(); 2、常用属性 set.size; 3、常用方法 //添加:

不念不忘少年蓝@/ 2021年09月27日 09:14/ 0 赞/ 528 阅读