ES6 map && set

之前我们记录过一些常用的ES6属性，常用ES6总结，今天再来学习两个虽然不是太常见但是用起来非常好用的两个属性。

• set

实际开发过程中经常会遇到去重的问题，往往我们需要写很多代码才能实现，比如遍历、排序等来实现。现在我们可以通过ES6的set来实现了，只需一行代码，轻松搞定：

const set = new Set([1, 2, 3, 4, 4]);
[...set] // [1, 2, 3, 4]
复制代码

不过，要注意的是，set的去重只能是对数组生效，对象无效。

• set方法

1. add()

对set对象添加数据

   let set = new Set()
   set.add(1)
   set.add(2)
   console.log(set) // Set(2) {1, 2}
   console.log([...set]) // [1, 2]
复制代码

2. delete(key)

删除set对象中某一个数据，如果不存在不会受影响

   let set = new Set()
   set.add(1)
   set.add(2)
   set.add(3)
   set.delete(1)
   console.log(set) // Set(2) {2, 3}
   console.log([...set]) // [2, 3]
复制代码

3. has(key)

判断set对象中是否有某一数据

    let set = new Set()
    set.add(1)
    set.add(2)
    set.add(3)
    set.has(1) // true
    set.has(4) // false
复制代码

4. claer()

清除set对象中所有数据

    let set = new Set()
    set.add(1)
    set.add(2)
    set.add(3)
    console.log(set); // Set(3) {1, 2, 3}
    set.clear()
    console.log(set); // Set(0) {}  
复制代码

5. entries()

返回一个新的迭代器对象,类似 [value, value] 形式的数组

    let set = new Set()
    set.add(1)
    set.add(2)
    let setIter = set.entries()
    console.log(setIter.next().value); // [1, 1]
    console.log(setIter.next().value); // [2, 2]
复制代码

6. keys()

获取set对象值

    let set = new Set()
    set.add(1)
    set.add(2)
    let setIter = set.keys()
    console.log(setIter.next().value); // 1
    console.log(setIter.next().value); // 2
复制代码

7. values()

也是获取set对象值

    let set = new Set()
    set.add(1)
    set.add(2)
    let setIter = set.values()
    console.log(setIter.next().value); // 1
    console.log(setIter.next().value); // 2
复制代码

8. (callbackFn[, thisArg])

针对集合中的每个元素执行提供的callback函数一次

9. [@@iterator]()

与values()/keys()类似

    let set = new Set()
    set.add(1)
    set.add(2)
    let setIter = set[Symbol.iterator]()
    console.log(setIter.next().value); // 1
    console.log(setIter.next().value); // 2
复制代码

对set进行操作以后并不是返回数组，还需要通过展开符或者遍历赋给数组。

• set属性

size() 获取set对象长度，类似于数组length属性

• map

在ES6之前，JavaScript没有map对象，只能用key-value的形式，ES6提供了map()对象。

• 一个Object的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值，包括函数、对象、基本类型。

• Map 中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值。

• 你可以通过 size 属性直接获取一个 Map 的键值对个数，而 Object 的键值对个数只能手动计算。

• Map 可直接进行迭代，而 Object 的迭代需要先获取它的键数组，然后再进行迭代。

• Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。虽然 ES5 开始可以用 map = Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。

• Map 在涉及频繁增删键值对的场景下会有些性能优势。

map对象和set对象很像

• map方法

1. set(key, value)

对map对象添加数据

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
console.log(map) // Map(2) {1 => "one", 2 => "two"}

复制代码

2. delete(key)

删除map对象数据

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
console.log(map) // Map(2) {1 => "one", 2 => "two"}
map.delete(1)
console.log(map); // Map(1) {2 => "two"}
复制代码

3. get(key)

获取map对象某项值

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
const value1 = map.get(1)
console.log(value1); // one
复制代码

4. clear()

删除map对象所有值

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
console.log(map) // Map(2) {1 => "one", 2 => "two"}
map.clear()
console.log(map); // Map(0) {}
复制代码

5. has(key)

判断map对象是否有某个key

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
console.log(map.has(1)); // true
console.log(map.has(3)); // false
复制代码

6. entries()

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
const mapIter = map.entries()
console.log(mapIter.next().value); // [1, "one"]
console.log(mapIter.next().value); // [2, "two"]
复制代码

7. keys()

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
const mapIter = map.keys()
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // 2
复制代码

8. values()

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
const mapIter = map.values()
console.log(mapIter.next().value); // one
console.log(mapIter.next().value); // two
复制代码

9. forEach(callbackFn[, thisArg])

和set相同

10. [@@iterator]()

和set相同

let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
const mapIter = map[Symbol.iterator]()
console.log(mapIter.next().value); // [1, "one"]
console.log(mapIter.next().value); // [2, "two"]
复制代码

• map属性

size() 获取map对象长度，类似于数组length属性

转载于:https://juejin.im/post/5cebee8e6fb9a07eb55f3b76