ES6学习总结之Set和Map

桃扇骨 2023-06-06 03:52 2阅读 0赞

# 前言 #

#### 当我们需要存储一些数据的时候，首先想到的是定义一个变量用来存储，之后我们可能学了数组，发现数组比变量可以存储更多的数据，接着可能有其它的存储数据的方法等等，然而我今天需要介绍的是在ES6中比较常见使用的数据类型结构，Set和Map。 ####

# Set数据结构 #

## 1.Set简介 ##

*  set中成员的值都是唯一的，没有重复的值
 *  向set中添加成员时，不会发生类型转换
 *  向set中添加的对象总是不想等

## 2.常用的属性和方法 ##

*  size:返回set实例的成员总数
 *  add():添加某个值，返回set本身
 *  delete():删除某个值，返回一个布尔值，判断删除是否成功
 *  has():返回一个布尔值，表示该值是否为set成员
 *  clear():清除所有成员，没有返回值
 *  keys():返回键名的遍历器
 *  values():返回键值的遍历器
 *  entries():返回键值对的遍历器
 *  forEach():使用回调函数遍历每个成员

## 3.实例剖析 ##

为了方便大家更好的了解和学习set，我在这里会将这些方法和属性进行分类整理和讲解

#### (1):set的基本用法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组去重</title>
        </head>
        <body>
            <script type="text/javascript">
                const set=new Set();    //创建set数据结构
                [1,1,2,3,4,5].forEach(x=>{
                    set.add(x);
                })
                console.log(set);    //1,2,3,4,5
                for(let i of set){
                    console.log(i);
                }
            </script>
        </body>
    </html>

![image][]  
可以看到向Set添加成员时，不会添加重复的值

#### (2):数组作为参数传入到set结构中 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <script type="text/javascript">
    //            const set=new Set([1,2,3]);
    //            console.log(...set);//1,2,3,使用扩展运算符
                
                const set=new Set(document.querySelectorAll('div'));
                console.log(set.size);//5 size返回set实例的成员总数
                //如上代码相当于
                const item=new Set();
                document.querySelectorAll('div').forEach(x=>{
                    item.add(x);
                })
                console.log(item);
                console.log(item.size);//5
            </script>
        </body>
    </html>

#### (3):set中添加的值不会发生类型转换 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>向set中添加成员时，不会发生类型转换</title>
        </head>
        <body>
            <script type="text/javascript">
                let mySet=new Set();
                mySet.add(5);
                mySet.add('5');
                console.log(mySet);//5,'5'
                let set=new Set();
                let a=NaN;
                let b=NaN;
                set.add(a);
                set.add(b);
                console.log(set);//NaN
            </script>
        </body>
    </html>

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。

#### (4):set中添加的对象总是不想等的 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>向set中添加的对象总是不想等</title>
        </head>
        <body>
            <script type="text/javascript">
                let set=new Set();
                set.add({});//向set中添加一个空对象
                console.log(set.size);//1
                set.add({});//向set中添加另一个空对象
                console.log(set.size);//2
            </script>
        </body>
    </html>

由于两个空对象不相等，所以它们被视为两个值

#### (5):Array.from()方法 ####

Array.from()可以将set结构转为数组，这就提供了去除数组重复成员的另一种方法

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Array.from()方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const items=new Set([1,2,3,4,5]);
                console.log(items);//1,2,3,4,5
                const array=Array.from(items);
                console.log(array);//1.2.3,4,5
                //Array.from()方法实现数组去重
                function dedupe(arr){
                    return Array.from(new Set(arr))
                }
                console.log(dedupe([1,1,2,3]));//1,2,3
            </script>
        </body>
    </html>

## 4.遍历的应用 ##

#### (1):数组去重 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组去重</title>
        </head>
        <body>
            <script type="text/javascript">
                let set=new Set(['red','blue','green']);
                let arr=[...set];
                console.log(arr);//red,blue,green
                //数组去重
                let arrs=[1,1,3,3,4,5,6];
                let unique=[...new Set(arrs)];
                console.log(unique);//1,3,4,5,6
            </script>
        </body>
    </html>

#### (2):间接使用数组的方法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>间接使用数组的方法</title>
        </head>
        <body>
            <script type="text/javascript">
                let set=new Set([1,2,3,4,5]);
                set=new Set([...set].map(x=>x*2));//使用数组的map方法
                console.log(set);//2,4,6,8,10
                let mySet=new Set([1,2,3,4,5]);
                mySet=new Set([...mySet].filter(x=>x%2==0));//使用数组的filter方法
                console.log(mySet);//2,4
            </script>
        </body>
    </html>

#### (3):实现并集，交集，差集 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>实现并集，交集，差集</title>
        </head>
        <body>
            <script type="text/javascript">
                let a=new Set([1,2,3]);
                let b=new Set([4,3,2]);
                //并集
                let union=new Set([...a, ...b]);
                console.log(union);//1,2,3,4
                //交集
                let intersect=new Set([...a].filter(x=>b.has(x)));
                console.log(intersect);//2,3
                //差集
                let difference=new Set([...a].filter(x=>!b.has(x)));
                console.log(difference);//1
            </script>
        </body>
    </html>

#### (4):同步改变原来的 Set 结构 ####

如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用Array.from方法。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>同步改变原来的 Set 结构</title>
        </head>
        <body>
            <script type="text/javascript">
                //方法一
                let set=new Set([1,2,3]);
                set=new Set([...set].map(val=>val*2));
                console.log(set);//2,4,6
                //方法二
                let mySet=new Set([1,2,3]);
                mySet=new Set(Array.from(mySet,val=>val*2));
                console.log(mySet);//2,4,6
            </script>
        </body>
    </html>

## 5.set实例属性和方法 ##

#### (1):size属性 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>set中的size属性</title>
        </head>
        <body>
            <script type="text/javascript">
                const set=new Set();
                //向set中添加成员
                set.add(1);
                set.add(2);
                set.add(3);
                //链式方法
                set.add(4).add(5).add(6);
                console.log(set.size);//6
            </script>
        </body>
    </html>

#### (2):操作方法add()、delete()、has()、clear() ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>set中的操作方法add()、delete()、has()、clear()</title>
        </head>
        <body>
            <script type="text/javascript">
                const set=new Set();
                //向set中添加成员
                set.add(1);
                set.add(2);
                set.add(3);
                //链式方法
                set.add(4).add(5).add(6);
                console.log(set.size);//6
                console.log(set.has(1));//true
                set.delete(1);
                console.log(set.has(1));//false
                set.clear();//清空全部set成员
                console.log(set.size);//0
            </script>
        </body>
    </html>

#### (3):遍历方法keys()、values()、entries()、forEach() ####

注意：set的遍历顺序就是插入顺序，由于set没有键名，只有键值(或者说键名和键值是同一个值)，所以keys()和values()方法的行为完全一致

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>set中的遍历方法keys(),values(),entries(),forEach()</title>
        </head>
        <body>
            <script type="text/javascript">
                let set=new Set(['red','blue','green']);
                //遍历全部的key
                for(let key of set.keys()){
                    console.log(key);//red,blue,green
                }
                //遍历全部的value
                for(let value of set.values()){
                    console.log(value);//red,blue,green
                }
                //遍历全部的key和value
                for(let item of set.entries()){
                    console.log(item);//['red','red'],['blue','blue'],['green','green']
                }
                set.forEach((key,value)=>{
                    console.log(key+':'+value);
                })
            </script>
        </body>
    </html>

# Map数据结构 #

## 1.Map简介 ##

es6中的map很大程度上和set相似，但是map是以键值对的形式存储数据的

## 2.常用的属性和方法 ##

*  size:返回map结构的成员总数
 *  set(key,value):设置键名key对应的键值value,然后返回整个map结构，如果key已经有值，则键值会被更新，否则就新生成该键
 *  get(key):读取key对应的键值，如果找不到key,则返回undefined
 *  has(key):返回一个布尔值，表示某个键是否在当前map对象中
 *  delete(key):删除某个key,返回true,如果删除失败，返回false
 *  clear():清除所有成员，没有返回值
 *  keys():返回键名的遍历器
 *  values():返回键值的遍历器
 *  entries():返回键值对的遍历器
 *  forEach():遍历map的所有成员

## 3.实例剖析 ##

#### (1):size属性 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map中的size属性</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                map.set('foo',true);
                map.set('bar',false);
                console.log(map.size);//2
            </script>
        </body>
    </html>

#### (2):set(key,value)方法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map中的set()方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                map.set('1','a');//键是字符串
                map.set(2,'b');//键是数值
                map.set(undefined,'3');//键是undefined
                console.log(map);//'1'=>a,2=>b,undefinde=3
                const myMap=new Map();
                //链式写法
                myMap.set(1,'a').set(2,'b').set(3,'c');
                console.log(myMap);//1=>a,2=>b,3=>c
            </script>
        </body>
    </html>

#### (3):get(key)方法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map中的get()方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                const hello=function(){
                    console.log('你好');
                }
                map.set(hello,'es6');//键是函数
                console.log(map.get(hello));//es6
            </script>
        </body>
    </html>

#### (4):has(key)方法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map中的has()方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                //链式写法
                map.set('a',1).set('b',2).set('c',3);//向map中添加成员
                console.log(map.has('a'));//true
                console.log(map.has('b'));//true
                console.log(map.has('c'));//true
                console.log(map.has('d'));//false
            </script>
        </body>
    </html>

#### (5):delete(key)方法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map中的delete方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                map.set('a',1);
                console.log(map.has('a'));//true
                map.delete('a');//删除键a
                console.log(map.has('a'));//false
            </script>
        </body>
    </html>

#### (6):clear()方法 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map中的clear()方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                map.set('foo',true);//向map中添加成员
                map.set('bar',false);
                console.log(map.size);//2
                map.clear();//清除map中的全部成员
                console.log(map.size);//0
            </script>
        </body>
    </html>

#### (7):遍历方法keys()、values()、entries()、forEach() ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>遍历方法keys(),values(),entries(),forEach()</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();
                //向map中添加成员
                map.set(1,'a');
                map.set(2,'b');
                map.set(3,'c');
                //遍历全部的键
                for(let key of map.keys()){
                    console.log(key);//1,2,3
                }
                //遍历全部的值
                for(let values of map.values()){
                    console.log(values);//a,b,c
                }
                //遍历全部的键和值
                for(let [key,value] of map.entries()){
                    console.log(key,value);//1=>a,2=>b,3=>c
                }
                for(let item of map.entries()){
                    console.log(item[0],item[1]);//1=>a,2=>b,3=>c
                }
                for(let [key,value] of map){
                    console.log(key,value);//1=>a,2=>b,3=>c
                }
                map.forEach(function(value,key){
                    console.log(key,value);
                })
            </script>
        </body>
    </html>

注意：这里的forEach()是值在前，键在后

#### (8):map结构转为数组 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map结构转为数组</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map([
                    [1,'one'],
                    [2,'two'],
                    [3,'three']
                ]);
                console.log([...map.keys()]);//[1,2,3]
                console.log([...map.values()]);//one,two,three
                console.log([...map]);//[1,one],[2,two],[3,three]
                console.log([...map.entries()]);//[1,one],[2,two],[3,three]
                const map1=new Map(
                    [...map].filter(([key,value])=>key<3)//使用数组的filter方法
                );
                console.log(map1);//1=>one,2=>two
            </script>
        </body>
    </html>

## 4.Map与其它数据结构的转换 ##

作为键值对存储数据的map与其它数据也可以进行转换，我们看下下面的案例

#### (1)Map转为数组 ####

map转为数组最方便的方法，就是使用扩展运算符…

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Map转为数组</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map();//创建map数据结构
                map.set(true,7);//向map中添加成员
                map.set({foo:3},['abc']);
                console.log([...map]);//[[true,7],[{foo:3},['abc']]];
            </script>
        </body>
    </html>

#### (2)数组转为Map ####

将数组传入map构造函数，就可以转为map

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>数组转为map</title>
        </head>
        <body>
            <script type="text/javascript">
                const map=new Map([
                    [true,7],
                    [{foo:3},['abc']]
                ]);
                console.log(map);
                //map{
                    //true=>7,
                    //object:{foo:3}=>['abc'];
                //}
            </script>
        </body>
    </html>

#### (3)Map转为对象 ####

如果所有map的键都是字符串，它可以无损的转为对象，如果有非字符串的键名，那么这个键名会被转为字符串，再作为对象的键名

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map转为对象</title>
        </head>
        <body>
            <script type="text/javascript">
                function strMapObj(strMap){
                    let obj=Object.create(null);//创建一个新对象
                    for(let [key,value] of strMap){//遍历循环strMap
                        obj[key]=value;
                    }
                    return obj;
                }
                const map=new Map().set('yes',true).set('no',false);
                console.log(strMapObj(map));//{yes:true,no:false}
            </script>
        </body>
    </html>

在这里了我需要讲解一下Object.create()这个方法，官方的意思是：Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的\_\_proto\_\_

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>测试Object.create()方法</title>
        </head>
        <body>
            <script type="text/javascript">
                const person={
                    isHuman: false,
                      printIntroduction: function () {
                        console.log(this.name,this.isHuman);
                      }
                }
                const me = Object.create(person);
                me.name = "Matthew";
                me.isHuman = true;
                me.printIntroduction();//Mattew,true
            </script>
        </body>
    </html>

#### (4)对象转为Map ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>对象转为map</title>
        </head>
        <body>
            <script type="text/javascript">
                function objToMap(obj){
                    let map=new Map();
                    for(let key of Object.keys(obj)){
                        map.set(key,obj[key]);
                    }
                    return map;
                }
                console.log(objToMap({yes:true,no:false}));//yes=>true,no=>false
            </script>
        </body>
    </html>

在这里讲解Object.keys()方法，官方解释：Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用，for…in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。  
参数：要返回其枚举自身属性的对象  
返回值：一个表示给定对象的所有可枚举属性的字符串数组

// simple array
    var arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // console: ['0', '1', '2']
    
    // array like object
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // console: ['0', '1', '2']
    
    // array like object with random key ordering
    var anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // console: ['2', '7', '100']
    
    // getFoo is a property which isn't enumerable
    var myObj = Object.create({}, {
      getFoo: {
        value: function () { return this.foo; }
      } 
    });
    myObj.foo = 1;
    console.log(Object.keys(myObj)); // console: ['foo']

#### (5)Map转为JSON字符串 ####

map转为json要区分两种情况，一种情况时map的键名都是字符串，这时可以选择转为对象json,另一种情况是map的键名有非字符串，这时可以选择转为数组json。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>map转为json</title>
        </head>
        <body>
            <script type="text/javascript">
                function strMapToObj(strMap){
                    let obj=Object.create(null);//创建一个新对象
                    for(let [key,value] of strMap){
                        obj[key]=value;
                    }
                    return obj;
                }
                function strMapToJson(strMap){
                    return JSON.stringify(strMapToObj(strMap));
                }
                let map=new Map().set('yes',true).set('no',false);
                let obj=strMapToJson(map);
                console.log(obj);//{'yes':true,'no':false}
                function mapToArrayJson(map){
                    return JSON.stringify([...map]);
                }
                let fooMap=new Map().set(true,7).set({foo:3},['abc']);
                let foo=mapToArrayJson(fooMap);
                console.log(foo);//[[true:7],[{foo:3},['abc']]]
            </script>
        </body>
    </html>

#### (6)JSON字符串转为Map ####

json转为map，正常情况下所有键名都是字符串，但是有一种特殊情况，整个json就是一个数组，且每个数组成员本身，又是一个有两个成员的数组，这时它可以一一对应的转为map,这往往是map转为数组json的逆操作。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>json转为map</title>
        </head>
        <body>
            <script type="text/javascript">
                function objTostrMap(obj){
                    let map=new Map();
                    for(let key of Object.keys(obj)){
                        map.set(key,obj[key]);
                    }
                    return map;
                }
                function jsonToStrMap(jsonStr){
                    return objTostrMap(JSON.parse(jsonStr));
                }
                let obj1=jsonToStrMap('{"yes": true, "no": false}')
                console.log(obj1);//yes=>true,no=>false
                function jsonToMap(jsonStr){
                    return new Map(JSON.parse(jsonStr));
                }
                let obj2=jsonToMap('[[true,7],[{"foo":3},["abc"]]]')//true=>7,{foo:3}=>['abc']
                console.log(obj2);
            </script>
        </body>
    </html>

# 总结 #

本章我们主要学习了ES6中set和map相关的属性和方法，set和map的方法中有很多都是相同的方法，has()、delete()、clear()、keys()、values()、entries、forEach()等等。

[image]: /images/20230601/5acbfef7fb3b4bc3b7c920f244f1e6aa.png