Js-ES6-Set和Map

Bertha 。 2023-03-01 11:51 34阅读 0赞

# 0- 零 - 前言 #

## 一 数组和对象对比 ##

**数组的优点**  
1、有顺序  
2、紧密型  
3、有关联  
**缺点**  
1、速度慢，查询，添加，删除  
2、有重复  
3、判断值时，必须遍历数组

**对象的优点**  
1、有键值对，查询快，插入和删除也很快  
2、键唯一  
3、多重集合  
**缺点**  
1、没有关联  
2、按照添加顺序遍历（顺序无法改变）  
3、 如果需要查询属性时，需要遍历

# Ⅰ- 壹 - Set #

*  set列表，插入、添加、删除速度快，无重复，只要值得列表（不能有键）， 没有索引，
 *  不能使用for循环，也不能用下标直接修改或者获取。
 *  没有重复元素，任何元素存在唯一性、
 *  遍历用查找速度也非常快，但是略低于键值对类型

## 一 set用法 ##

<table> 
 <thead> 
  <tr> 
   <th>Set方法</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size</td> 
   <td>属性获取长度 类似于数组的length但是 set列表没有length</td> 
  </tr> 
  <tr> 
   <td>add()</td> 
   <td>添加，如果有相同值，不添加；不同类型的值也可以添加；对象的引用地址不同，所以即使值相同，也可以添加</td> 
  </tr> 
  <tr> 
   <td>delete()</td> 
   <td>删除 Set 中的指定值，删除成功返回 true，删除失败返回 false</td> 
  </tr> 
  <tr> 
   <td>has()</td> 
   <td>判断值是否存在，存在的话返回 true，不存在返回 false</td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td>清除 Set 中的所有数据</td> 
  </tr> 
  <tr> 
   <td>entries()</td> 
   <td>返回一个键值对的遍历器</td> 
  </tr> 
 </tbody> 
</table>

--------------------

**创建set列表**

var a=new Set([1,2,3,4,5]);

**（1）size属性获取长度 类似于数组的length但是 set列表没有length**

console.log(a.size);

**（2）add()，添加，如果有相同值，不添加；不同类型的值也可以添加；对象的引用地址不同，所以即使值相同，也可以添加**

a.add(10);//添加
    a.add(3);//值是不重复，如果有相同值时，不添加

**（3）delete()，删除 Set 中的指定值，删除成功返回 true，删除失败返回 false**

a.delete(4);//删除

**（4）has()，判断值是否存在，存在的话返回 true，不存在返回 false**

a.has(3);//判断是否存在

**（5）clear()，清除 Set 中的所有数据**

a.clear();//清除

## 二 set遍历 ##

#### （1）forEach ####

用 forEach 遍历 Set 时，键和值是完全相同的

a.forEach(function(index,value,a){ 
                // 遍历键和值完全相同
                console.log(index,value,a);
            })
    
    打印如下
    1 1 Set(5) [ 1, 2, 3, 4, 5 ]
    2 2 Set(5) [ 1, 2, 3, 4, 5 ]
    3 3 Set(5) [ 1, 2, 3, 4, 5 ]
    4 4 Set(5) [ 1, 2, 3, 4, 5 ]
    5 5 Set(5) [ 1, 2, 3, 4, 5 ]

#### （2）for of ####

for of 对 iterable 接口的数据进行遍历  
**注意：for of 只能遍历 Set 和 Map**

for(let value of a.entries()){ 
                console.log(value);
            }
            打印如下
            Array [ 1, 1 ]
    		Array [ 2, 2 ]
    		Array [ 3, 3 ]
    		Array [ 4, 5 ]
    		Array [ 4, 5 ]
    
    
    for(let value of a){ 
        console.log(value);1 2 3 4 5
    }

entries 返回遍历器对象的 value 属性值是一个具有两个相同元素的数组，数组元素值是Set对象的元素值，也就是说Set结构是键名和键值是同一个值。

var a=new Set([1,2,3,4,5]); 
    
    console.log(a.entries()); 
    
    for(let value of a.entries()){  
    
    console.log(value); //打印 Array [1,1] Array [2,2]... Array [5,5]
    
    }

## 三 Set 数据的类型转换 ##

*  Array 转 Set，将数组直接代入 Set 中
 *  Set 转 Array，用 … 操作符，也可以直接用 Array.from()
 *  String 转 Set，将字符串直接代入 Set 中
 *  Set 中 toString 方法是不能将 Set 转换成 String

var arr=[1,3,2,4,5,2,1,2,3,5,3,2,3,5,2,1];
    //将数组转成Set
    var set=new Set(arr);//Set(5) [ 1, 3, 2, 4, 5 ]
    //用...操作符，将Set转Array
    var arr1=[...set];//Array(5) [ 1, 3, 2, 4, 5 ]
    //String 转 Set
    var set1=new Set("hello");//["h","e","l","o"]

因为 Set 值的唯一性，Set 可以用来数组去重

var arr=[1,3,2,4,5,2,1,2,3,5,3,2,3,5,2,1]; arr=Array.from(new Set(arr)); console.log(arr);*//[1,2,3,4,5]*

## 四 Set使用场景 ##

1
    
    var manager={ 
                list:[],
                add(elem){ 
                    if(this.list.indexOf(elem)>-1) return;
                    this.list.push(elem);
                },
                remove(elem){ 
                    var index=this.list.indexOf(elem);
                    if(index<0) return;
                    this.list.splice(index,1);
                },
                update(){ 
                    for(var i=0;i<this.list.length;i++){ 
                        this.list[i].update();
                    }
                }
    
            }
    
    
    
    
    2
    var manager={ 
                list:new Set(),
                add(elem){ 
                    this.list.add(elem);
                },
                remove(elem){ 
                    this.list.delete(elem);
                },
                update(){ 
                    for(let value of this.list){ 
                        value.update();
                    }
                }
    
            }
    
            var times=new Date().getTime();
           var ids=setInterval(animation,500);
    
            function animation(){ 
                var obj={ 
                    name:"obj"+new Date().getTime(),
                    update(){ 
                        console.log(this.name);
                    }
                }
                manager.add(obj);
                if(new Date().getTime()-times>10000){ 
                    clearInterval(ids);
                    manager.update();
                }
            } 
    
    3 去重
    var arr=[1,3,5,7,2,4,3,5,1,2,6,5,7,8,9,1,2,4,3,5,7,9];
          arr=Array.from(new Set(arr));
           console.log(arr);

# Ⅱ - 贰 - Map #

*  map是一种由长度的键值对数据结构
 *  需要有键值对，需要有长度，可以遍历属性列表，可以遍历数值列表，增删改查速度快
 *  具备数组的长度紧密型，又具备对象的键值对方法
 *  他的获取删除查询遍历速度很快
 *  hashMap 键值对的数据类型

## 一 map用法 ##

<table> 
 <thead> 
  <tr> 
   <th>Map方法</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size</td> 
   <td>属性获取长度 类似于数组的length但是 set列表没有length</td> 
  </tr> 
  <tr> 
   <td>set()</td> 
   <td>添加键值对</td> 
  </tr> 
  <tr> 
   <td>get()</td> 
   <td>获取值</td> 
  </tr> 
  <tr> 
   <td>has()</td> 
   <td>判断Map有没有对应的值，存在的话返回 true，不存在返回 false</td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td>清除 Map 中的所有数据</td> 
  </tr> 
  <tr> 
   <td>delete()</td> 
   <td>删除 指定项</td> 
  </tr> 
 </tbody> 
</table>

**创建map类型**

let a=new Map();

**（1）set（）添加键值对**

a.set("name","xietian");
    a.set("age",30);
    a.set("sex","man");//添加键值对

**（2）size获取map长度**

console.log(a.size);

**（3）get()获取map的值。通过健**

console.log(a.get("age"));

**（4）has()查找健是否存在 查找到true，未找到false**

console.log(a.has("age1"));//只能用来查找键

**（5）delete()删除键值对**

a.delete("age");//删除键值对

**（6）clear()清空**所有数据

a.clear();//清空

## 二 map遍历 ##

#### （1）forEach ####

a.forEach(function(value,key,a){ 
        console.log(value,key,a);
    })
    
    打印如下
    xietian name Map(3) {  name → "xietian", age → 30, sex → "man" }
    30 age Map(3) {  name → "xietian", age → 30, sex → "man" }
    man sex Map(3) {  name → "xietian", age → 30, sex → "man" }

#### （2）for of ####

打印Map键值对

for(let arr of a){ 
            console.log(arr);//第0项是键，第1项是值
        }
    
    打印如下
    Array [ "name", "xietian" ]
    Array [ "age", 30 ]

打印健keys

for(let key of a.keys()){ 
            console.log(key);//
        }

打印值values】

for(let value of a.values()){ 
            console.log(value);
        }

**Map弱引用类型**

// 普通的map不能使用对象作为属性存储值
        var obj={ a:1};
        a.set(obj,10);//键被变为强引用
        console.log(a);
    
        // 弱引用类型，将key设为对象，当对象清除后，弱引用map会自动清除
         var c=new WeakMap();
        var obj={ a:10};
        c.set(obj,10);
    
        obj=null;
        console.log(c); 
        // 弱引用的类型不可以遍历

# Ⅲ - 叁 - WeakSet和WeakMap #

## 一WeakSet和WeakMap一些相似的特点 ##

弱引用，就是如果其中的强引用的类型地址设置为null，弱引用的关系会自动解除

*  WeakSet的成员只能是对象，WeakMap只接受对象（null除外）作为键名
 *  WeakSet和WeakMap没有遍历操作，没有size属性，没有clear方法

## 二 Set弱引用类型 ##

WeakSet的概述：

*  WeakSet数据结构是一种类似于Set的数据结构，因此也不可以重复
 *  WeakSet的成员只能是对象，不能是其他值，并且对象都是弱引用
 *  因为成员都是对象的弱引用，所以随时都可能会被垃圾回收，因此是不能遍历的
 *  WeakSet相对于Set的属性和方法而言，没有size， 也没有clear

let weakset = new WeakSet([[1, 2], [2, 3]]);
        console.log(weakset);
        // WeakSet [[1,2],[2,3]]
        // WeakSet [[2,3],[1,2]]
        //都有可能出现
    
        let set=new Set([[1, 2], [2, 3]]);
        console.log(set);
        //Set [[1,2],[2,3]]

## 三 Map 弱引用类型 ##

WeakMap的概述：

*  WeakMap数据结构是一种类似于Map的数据结构，不过键名必须为对象（null除外）  
    与Map的键名不同的是，WeakMap的键名都是弱引用。
 *  因为键名都是对象的弱引用，所以随时都可能会被垃圾回收，因此是不能遍历的
 *  WeakMap相对于Map的属性和方法而言，没有size，也没有clear