手记

JavaScript Set 集合

基本概念

ES6新增的Set类型是一种有序列表,其中含有一些相互独立的非重复值。

*成员之间是否重复,Set集合内部是通过Object.is() 方法进行判断。

创建Set集合并添加成员

1、使用add() 方法向 Set 集合加入成员。

例子:

const set = new Set();
set.add(1).add(1).add("1");
set.add({}).add({});

//Set集合里 (NaN===NaN) 为true
set.add(NaN).add(NaN);

console.log(set);
//输出:{1, "1", {}, {}, NaN}

2、用数组初始化Set 集合。

例子:

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

3、也可以使用类数组对象作为参数创建Set集合。

例子:

(function() {
    console.log(new Set(arguments));
})(1, 1, 2, 2, 3, 3);
//输出:{1, 2, 3}

注意:

1、Set 集合不会添加重复的成员。
2、Set 构造函数可以接受所有可迭代对象作为参数。

Set集合常用属性和方法

size属性:返回Set 集合的成员总数。
add(value) 方法:添加某个值,返回 Set 集合本身。
delete(value) 方法:删除某个值,返回一个布尔值,表示删除是否成功。
has(value) 方法:返回一个布尔值,表示该值是否为Set的成员。
clear() 方法:清除所有成员,没有返回值。

例子:

const set = new Set([1, 2]);
set.add(3);
console.log(set.size); //输出:3
console.log(set.has(3)); //输出:true
console.log(set.delete(3)); //输出:true
console.log(set.size); //输出:2
set.clear();
console.log(set.size); //输出:0

遍历方法

for…of 循环

Set 集合默认可遍历,因此可以直接用for…of循环遍历 Set 集合,会依次返回集合的成员。

例子:

for (let item of new Set(["A", "B"])) {
    console.log(item);
}
//输出:A B

forEach() 方法

forEach() 方法对集合中的每一个成员运行给定函数。这个方法没有返回值,可以替代for…of循环使用。该方法的回调函数中一共有三个参数,依次为成员、索引值和集合本身。但由于Set 集合没有索引值的概念,因此第一个参数与第二个参数的值永远都是一样的。

例子:

new Set([1, 2, 3]).forEach((v, i, s) => console.log(v + ":" + i));
//输出:1:1 2:2 3:3

*Set 集合的遍历顺序就是插入顺序。

Set 集合与数组

Set集合与数组类似,但Set集合成员的值都是唯一的,没有重复的值。Set 集合可以通过遍历方法操作集合中的每一个成员,但不能像数组那样通过索引访问集合中的成员。

Set 集合与数组的相互转换

只要把数组作为Set 构造函数的参数传入,即可完成数组到Set 集合的转换。

例子:

console.log(Object.prototype.toString.call(new Set([1, 2, 3])));
//输出:[object Set]

使用展开运算符(…)或者Array.from()方法也可以很方便的把Set 集合转换为数组。

例子:

console.log(Object.prototype.toString.call([...new Set([1, 2, 3])]));
//输出:[object Array]

console.log(Object.prototype.toString.call(Array.from(new Set([1, 2, 3]))));
//输出:[object Array]

实际应用

展开运算符和 Set 集合相结合,轻松去除数组的重复元素。

例子:

const arr = [1, 1, "A", "A"];
console.log([...new Set(arr)]);
//输出:[1, "A"]

Set 集合和filter() 方法相结合可以很容易地实现数组的并集、交集和差集。

例子:

const arr1 = [1, 2, 3],
      arr2 = [3, 4, 5];

//数组并集
console.log([...new Set([...arr1, ...arr2])]);
//输出:[1, 2, 3, 4, 5]

//数组交集
console.log(arr1.filter((v) => new Set(arr2).has(v)));
//输出:[3]

//数组差集
console.log(arr1.filter((v) => !new Set(arr2).has(v)));
//输出:[1, 2]
console.log(arr2.filter((v) => !new Set(arr1).has(v)));
//输出:[4, 5]

如有错误,欢迎指正,本人不胜感激。

9人推荐
随时随地看视频
慕课网APP