讲一讲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 的区别
Map Object
意外的键 只能显式的插入键 原型上可能会有其他键
键的类型 可以是任意类型,包括函数、对象等 只能是string或者Symbol
键的顺序 当迭代的时候,是按照插入的顺序迭代 无序的
Size 直接通过size属性获取 只能计算
迭代 直接迭代 通过方法获取key值后迭代
性能 增删改的表现更好 无优化
任何具有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 }

VivenZZ
88 声望0 粉丝