导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

介绍

• 成员唯一
• 类数组结构

var set = new Set();
console.log(set);

var set = new Set();
set.add(5);
set.add(7);
console.log(set);

特性

参数只能是具备 iterator 接口的数据结构： 数组，类数组

var set = new Set([5, 7]); // 参数只能是具备 iterator 接口的数据结构
var set1 = new Set([1,2,3,5,5,5]);
console.log(set1);

⭐️ 成员唯一（基本类型去重，复杂类型不去重）

var set = new Set([
  undefined, undefined,
  null, null,
  NaN, NaN,
  5, '5',
  {}, {},
  [], [],
  function() {}, function() {}
]);
console.log(set);

• 注意虽然 NaN !== NaN，但 Set 还是会对 NaN 去重
• 引用类型不去重

使用方法

add()

添加子项，返回的是set结构本身

const set = new Set([1]);
console.log(set.add(2));

可以进行链式调用

const set = new Set();
set.add(1).add(2);
console.log(set);

set 进去的是对象的引用，所以只会 set 进去一个 x

var x = {id: 1},
    y = {id: 2};
var set = new Set();
set.add(x);
set.add(y);
set.add(x); // set进去的是对象的引用，所以只会set进去一个x
console.log(set);

size

• 获取 set 的长度
• 不是个函数

var set = new Set([{a:1}])
console.log(set);
console.log(set.size); // 1

delete()

• 删除操作，返回的是布尔值，是否删除成功

var x = {id: 1},
    y = {id: 2};
var set = new Set();
set.add(x).add(y);
console.log(set.delete(x));
console.log(set.delete(x));
console.log(set);

clear()

• 清除 set 中的所有值
• 返回值是 undefined

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

has()

• 返回布尔值

var x = {id: 1},
    y = {id: 2};
var set = new Set();
set.add(x).add(y);
console.log(set.has(x));

⭐️ 遍历方法

var set = new Set([1,2,3,4,5]);
console.log(set.keys());
console.log(set.values());
console.log(set.entries());

⭐️ set 是没有 key 的，只有 value ，所以 keys 和 values 返回值一样

var set = new Set(['a','b','c','d']);
for(let i of set.keys()){
	console.log('key-', i);
}
for(let i of set.values()){
	console.log('value-', i);
}

var set = new Set(['a','b','c','d']);
for(let i of set.entries()){
	console.log('entries-', i);
}

⭐️ for...of 循环的是 set 的 values

var set = new Set(['a','b','c','d']);
for(let i of set){
	console.log(i);
}
console.log(
  Set.prototype[Symbol.iterator] === Set.prototype.values);

forEach

var set = new Set(['a','b','c','d']);
set.forEach(function(value, key, set){
	console.log(value, key, set);
})

...运算符，数组去重

var set = new Set(['a','b','c','d', 'a']);
console.log([...set]);

和数组的 map 搭配使用

var set = new Set([1,2,3,4,5]);
var set1 = new Set([...set].map(v => v * 2));
console.log(set1);

var arr = [1,2,3,4];
var arr2 = arr.map((v, k) => console.log(v, k));
var arr1 = arr.map(parseInt);
console.log(arr1);

// 相当于执行 parseInt(1, 0)、parseInt(2, 1) ...

console.log(parseInt(1, 0)); // 第二个参数是进制
console.log(parseInt(2, 1));
console.log(parseInt(3, 2));
console.log(parseInt(4, 3));

var set = new Set([1,2,3,4]);
var set2 = new Set([[...set].map(parseInt)]);
console.log(set2);

使用 Array.from()

var set = new Set([1,2,3]);
var set1 = new Set(Array.from(set, value => value * 2));
console.log(set1);

filter

var set = new Set([1,2,3,4]);
var set2 = new Set([[...set].filter(x => x % 2 == 0)]);
console.log(set2);

交集、并集、差集

var a = new Set([1,2,3]);
var b = new Set([4,3,2]);
var union = new Set([...a, ...b]);
console.log('并集', union);
var intersect = new Set([...a].filter(x => b.has(x)));
console.log('交集', intersect);
var difference = new Set([...a].filter(x => !b.has(x)));
console.log('差集', difference);