之前我们记录过一些常用的ES6属性，常用ES6总结，今天再来学习两个虽然不是太常见但是用起来非常好用的两个属性。
-
set
实际开发过程中经常会遇到去重的问题，往往我们需要写很多代码才能实现，比如遍历、排序等来实现。现在我们可以通过ES6的set来实现了，只需一行代码，轻松搞定：
const set = new Set([1, 2, 3, 4, 4]);
[...set] // [1, 2, 3, 4]
不过，要注意的是，set的去重只能是对数组生效，对象无效。
- set方法
- add()
对set对象添加数据
let set = new Set()
set.add(1)
set.add(2)
console.log(set) // Set(2) {1, 2}
console.log([...set]) // [1, 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]
- has(key)
判断set对象中是否有某一数据
let set = new Set()
set.add(1)
set.add(2)
set.add(3)
set.has(1) // true
set.has(4) // false
- 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) {}
- 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]
- 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
- 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
- (callbackFn[, thisArg])
针对集合中的每个元素执行提供的callback函数一次
- [@@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方法
- 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"}
- 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"}
- get(key)
获取map对象某项值
let map = new Map()
map.set(1, 'one')
map.set(2, 'two')
const value1 = map.get(1)
console.log(value1); // one
- 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) {}
- 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
- 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"]
- 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
- 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
- forEach(callbackFn[, thisArg])
和set相同
- [@@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属性
网友评论