关于前端:讲一讲Set与Map

61次阅读

共计 2929 个字符，预计需要花费 8 分钟才能阅读完成。

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

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

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]

Set 容许增加惟一值，应用的办法相似于准确相等===，次要区别是 NaN 能够等于 NaN
Set 的实例属性，因为是构造函数，所以有 constructor, 同时有 size 属性，没有 lenght 属性
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++;
         })
   }
   ```

字典和汇合的区别

共同点：能够存储不反复的值
不同点：汇合是 [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'}

Map 的实例属性
- constructor 构造函数
- size 数量
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
   })
```

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

Map => Array

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

Array => Map

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

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 }

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}

正文完