关于前端:讲一讲Set与Map

讲一讲 Set 与 Map

Set 是一种汇合的数据结构，Map 是一种字典的数据结构

Set

ES6 的新语法，相似数组。区别惟一且无序的，没有反复值
：成员是

1. Set 自身是构造函数，用来生成 Set 的数据结构new Set([iterable])

   const set = new Set();
   [1,2,3,3,2,2].forEach(num => set.add(num));
   console.log(set); // {1,2,3}
   
   // 去重
   let arr = [1,2,3,3,4,3,2,2,1];
   console.log([...new Set(arr)]); [1,2,3,4]

2. Set 容许增加惟一值，应用的办法相似于准确相等===，次要区别是 NaN 能够等于 NaN
3. Set 的实例属性，因为是构造函数，所以有 constructor, 同时有 size 属性，没有 lenght 属性

4. Set 的实例办法

   • 操作方法

     • add(val) 新增，相当于数组 push
     • delete(val) 删除 存在删除返回 true，不存在返回 false
     • has(val) 判断是否存在 val
     • clear() 清空
     • Array.from 办法从一个相似数组或可迭代对象创立一个新的，浅拷贝的数组实例。也可通过 […] 来

    转换。```javascript
        let set = new Set([1,3,4,5])
        let arr = Array.from(set)
        console.log(arr) //[1,3,4,5]
          // 或者通过解构赋值
        let set = new Set([1,3,4,5])
        let arr = [...set]
        console.log(arr) //[1,3,4,5]
    ```
- 遍历办法（遍历程序和插入程序统一）- keys() 返回蕴含所有键的迭代器
    - values() 返回蕴含所有值的迭代器
    - entries() 返回蕴含所有键值对的迭代器
    - forEach(callback, thisArg) 对所有的成员进行 callback 操作，如果提供了 thisArg 回调中的 this 回事 thisArg，无返回值
    ```javascript
        let set = new Set([1,3,4,5,6,5,4,4])
        console.log(set.keys()) // [Set Iterator] {1, 3, 4, 5, 6}
        console.log(set.values()) // [Set Iterator] {1, 3, 4, 5, 6}
        console.log(set.entries()) // [Set Entries] {[ 1, 1], [3, 3], [4, 4], [5, 5], [6, 6] }
        set.forEach((key, value) => {console.log(`=======${key}:${value}=======`)
        })
    ```
   - thisArg 参数的用法，也能够用箭头函数，起因是箭头函数没有本身的 this，指向的是父级的 this
   ```javascript
      // 传入 this 值
         function Counter() {
             this.sum = 0;
             this.count = 0;
         }
         
         Counter.prototype.add = function(array) {array.forEach(function(currentValue, index) {
                 this.sum += currentValue; 
                 this.count++;
             }, this)
         }
         
         let obj = new Counter()
         obj.add([1,2,3,4,5])
         console.log(obj.count, obj.sum) // 5 15 
          // 或者用箭头函数 
         Counter.prototype.add = function(array) {array.forEach((currentValue, index) => {
              this.sum += currentValue; 
              this.count++;
         })
   }
   ```

Map

字典和汇合的区别

• 共同点：能够存储不反复的值
• 不同点：汇合是 [value,value] 模式，字典是 [key,value] 模式贮存

Map 和 Object 的区别

任何具备 iterator 接口，且每个成员都是双元素的数据的数据结构，都能够当作 Map 构造函数的参数。

let map = new Map([['w','d'],['s','v']])
console.log(map) // Map(2) {'w' => 'd', 's' => 'v'}

1. Map 的实例属性

   • constructor 构造函数
   • size 数量

2. Map 的实例办法

   • 操作方法

     • set(key,valu) 新增
     • get(key) 获取
     • delete(key) 删除 存在删除返回 true，不存在返回 false
     • has(key) 判断是否存在 key
     • clear() 清空

   • 遍历办法（遍历程序和插入程序统一）

     • keys() 返回蕴含所有键的迭代器
     • values() 返回蕴含所有值的迭代器
     • entries() 返回蕴含所有键值对的迭代器
     • forEach(callback, thisArg) 对所有的成员进行 callback 操作，如果提供了 thisArg 回调中的 this 回事 thisArg，无返回值

        let map = new Map([['w','d'],['s','v']])
        map.forEach((value,key) => {console.log(`${key}=>${value}`)
            // w=>d
            // s=>v
        })

与其余数据结构的互相转换

1. Map => Array

   let map = new Map([[1,2],[3,4]])
   let arr = [...map]
   console.log(arr) // [[ 1, 2], [3, 4] ]

2. Array => Map

   let arr = [[1,2],[3,4]]
   let map = new Map(arr)
   console.log(map) // Map(2) {1 => 2, 3 => 4}

3. Map => Object

   留神，因为 Map 的键能够存任意类型，所以要将键转为字符串而后增加到 obj 中, 否则存入的就是 '[object,object]’

   let map = new Map()
   map.set({a:1}, 1)
   map.set({b:2}, 2)
   function mapToObject(map){let obj = {}
       for (let [key, value] of map) {obj[JSON.stringify(key)] = value
       }
       return obj
   }
   console.log(mapToObject(map)) //{'{"a":1}': 1, '{"b":2}': 2 }

4. Object => Map

   let obj = {a: 1,b: 2}
   function objToMap(obj){let map = new Map()
       for (let key of Object.keys(obj)) {map.set(key, obj[key])
       }
       return map
   }
   console.log(objToMap(obj)) // Map(2) {'a' => 1, 'b' => 2}