进阶大神之路 之 【ES6新增数据结构 - Set】

Set

• 可以叫做集合数据结构，类似于数组，但是成员的值是唯一的，没有重复的值
• 允许存储任何类型的值，且是【唯一的值】，无论是原始值或者是对象，Set对象是值的集合，你可以按照插入的顺序迭代它的元素。
• Set本身是一个构造函数，用来生成 Set 数据结构

基本使用

const set = new Set([1, 2, 1, 2, 3])
console.log(set); // Set(3) {1, 2, 3}

方法

• add() 向集合中添加一个新的项

let set = new Set()
set.add(1)
set.add(2)
console.log(set) // Set(2) {1, 2}

• delete(value) 删除集合中的某个值，返回布尔值，说明删除是否成功

set.delete(2) // true

• has(value) 如果值在集合中，返回true；反之，返回false

set.has(2) // false
set.has(1) // true

• clear() 移除集合中的所有项

set.clear()
console.log(set) // Set(0) {size: 0}

属性

• constructor 构造函数，默认是 Set函数

• size 返回 set 实例的成员总数

const set3 = new Set([1, 2, 3, 1, 4, 3, 5]);
console.log(set3); Set(5) {1, 2, 3, 4, 5}
console.log(set.size); // 5

Array.from 可以将 Set 结构转为数组

const setArray = Array.from(set3);
console.log(setArray); // (5) [1, 2, 3, 4, 5]

遍历

• keys() 返回键名的遍历器

let set = new Set(['green', 'red', 'black'])
console.log(set,keys()); // SetIterator {'green', 'red', 'black'}

for(let i of set.keys()) {
    console.log(i)
}
// green
// red
// black

• values() 返回键值的遍历器

let set = new Set(['green', 'red', 'black'])
console.log(set.values()); // SetIterator {'green', 'red', 'black'}

for(let i of set.values()) {
    console.log(i)
}
// green
// red
// black

• entries()：返回键值对的遍历器

let set = new Set(['green', 'red', 'black'])
console.log(set.entries()); 
// SetIterator {'green' => 'green', 'red' => 'red', 'black' => 'black'}

for(let i of set.entries()) {
    console.log(i)
}
// (2) ['green', 'green']
// (2) ['red', 'red']
// (2) ['black', 'black']

• Set 结构的实例默认可遍历，它的默认遍历生成函数就是values()，所以可以直接用 for...of遍历 Set

let set = new Set(['green', 'red', 'black'])
for(let i of set) {
    console.log(i)
}

// green
// red
// black

• forEach()

let set = new Set(['green', 'red', 'black'])
set.forEach(i => {
    console.log(i)
})

// green
// red
// black

遍历的应用

• 扩展运算符[...] 内部也是使用 for...of，所以也可以应用到 Set 结构的实例

const set = new Set(['green', 'red', 'black'])
const arr = [...set]
console.log(arr); // ['green', 'red', 'black']

• 数组去重，扩展运算符和Set结合

let set7 = new Set(['green', 'red', 'black',  'red', 'black'])
const arr = [...set7]; 
console.log(arr); // ['green', 'red', 'black']

• map 和 filter 方法也可以间接用于 set

const arrMap = new Set([...set].map(i => i + '_哈哈哈' ))
console.log(arrMap); 
// 返回 Set 结构 Set(3) {'green_哈哈哈', 'red_哈哈哈', 'black_哈哈哈'}

const arrFilter = new Set([...set].filter(i => i != 'black' ))
console.log(arrFilter);
// 返回 Set 结构 Set(2) {'green', 'red'}

• 使用 set 实现并集、交集、差集

const arr1 = new Set([1, 4, 6]);
const arr2 = new Set([6, 3, 2]);
// 并集
console.log(new Set([...arr1, ...arr2])); // Set(5) {1, 4, 6, 3, 2}

// 交集
console.log(new Set([...arr1].filter(i => arr2.has(i)))); // Set(1) {6}

// arr1 相对于 arr2 的 差集
console.log(new Set([...arr1].filter(i => !arr2.has(i)))); // Set(2) {1, 4}