ES6 学习笔记(九)Set的基本用法
本文最后更新于 757 天前,其中的信息可能已经有所发展或是发生改变。

1 基本用法

set类似于数组,它的成员是唯一的,当有多个相同的值,只会保留一份。

1.1 创建方法

Set本身是一个构造函数,用来生成Set实例,如:

const s = new Set()
let arr = [2, 3, 4, 5, 6, 2, 2]
arr.forEach(x => s.add(x));
for (let i of s) {
    console.log(i);
}

上面代码中的add( )方法,可以添加元素到Set实例中,但不会添加重复的值。它返回的是set实例的引用。

输出结果:
2
3
4
5
6

1.2 初始化

Set函数可以接受一个数组(或具有Iterable接口的其他数据结构)作为参数,来初始化Set实例,如:

// 使用new来新建实例
let s1= new Set([1, 2, 3])

Set创建的集合不能直接通过下标访问它的成员,要通过迭代进行访问,如使用forEach方法

1.3 set的简单应用

Set最常见的应用就是去重

1.3.1 数组去重

let items = new Set([1, 2, 2, 2, 3, 4, 5, 6, 1, 1])
console.log([...items]); // 将原数组装成集合并去除重复值保留到新数组中(去重)

输出结果:
[ 1, 2, 3, 4, 5, 6 ]

1.3.2 字符串去重

let str = "aabbccddeeffgg1122334455"
console.log([...new Set(str)].join(""));

输出结果:
abcdefg12345

1.4 内部比较机制

1、向Set实例加入值时不会发生类型转换,如:

let s1 = new Set()
s1.add(1)
s1.add('1')
s1.add(true)
console.log(s1.size); // 3

size属性返回的是Set实例的成员数量

2、利用算法“Same-value equality”来判断加入的值和已有的值是否相等,类似于Object.is( )方法,如果相等则不加入,如:

let s1 = new Set()
let a = {};
let b = a;
s1.add(a);
s1.add(b);
console.log(s1.size); // 1

1.5 链式调用

在new Set()之后,可以通过链式调用向里面添加实例。如:

let s1 = new Set()
s1.add(1).add(2).add(3)
console.log(s1);

输出结果:
Set(3) { 1, 2, 3 }

2 其它方法

2.1 操作方法

方法 描述
add(value) 添加值,返回该Set实例的引用
delete(value) 删除值,返回一个布尔值,表示删除是否成功
has(value) 返回一个布尔值,表示该值是否是Set实例的成员
clear(value) 清除所有成员,没有返回值
let set = new Set()
set.add(1).add(2).add(3)
console.log(set);
console.log('has2,', set.has(2));
console.log('has5,', set.has(5));
set.delete(1)
console.log('delete1,', set);
set.clear()
console.log('clear,', set);

输出结果:
Set(3) { 1, 2, 3 }
has2, true
has5, false
delete1, Set(2) { 2, 3 }
clear, Set(0) {}

2.2 遍历方法

方法 描述
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员,没有返回值
let s2 = new Set(["Chinese", "Math", "English"])
for (let item of s2.keys()) {
    console.log(item);
}

输出结果:
Chinese
Math
English

let s2 = new Set(["Chinese", "Math", "English"])
for (let item of s2.values()) {
    console.log(item);
}

Set 结构实例的默认遍历器生成的函数就是values方法

输出结果:
Chinese
Math
English

let s2 = new Set(["Chinese", "Math", "English"])
for (let item of s2.entries()) {
    console.log(item);
}

输出结果:
[ ‘Chinese’, ‘Chinese’ ]
[ ‘Math’, ‘Math’ ]
[ ‘English’, ‘English’ ]

let s2 = new Set(["Chinese", "Math", "English"])
s2.forEach(value => console.log(value.toUpperCase()))

输出结果:
CHINESE
MATH
ENGLISH

let s2 = new Set(["Chinese", "Math", "English"])
s2.forEach((value, key, s) => {
    console.log(s.size);
    console.log(key);
    console.log(s == this); // this指向window,这里是当纯函数调用。
    console.log(value)
})

输出结果:
3
Chinese
false
Chinese

3
Math
false
Math

3
English
false
English

2.3 遍历方法的运用

2.3.1 与扩展运算符结合使用达到去重数组的目的

let arr = [1, 2, 3, 4, 5, 6, 1, 2, 5, 6, 4]
arr = [...new Set(arr)];
console.log(arr);

输出结果:
[ 1, 2, 3, 4, 5, 6 ]

2.3.2 set 间接使用数组的map和filter方法

let s3 = new Set([1, 2, 3, 4, 5, 6])
s3 = new Set([...s3].map(x => x * 2))
console.log(s3);

s3 = new Set([...s3].filter(x => x % 3 == 0))
console.log(s3);

输出结果:
Set(6) { 2, 4, 6, 8, 10, 12 }
Set(2) { 6, 12 }

2.3.3 使用扩展运算符、map、filter和 Set ,实现并集、交集、差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集
let union = new Set([...a], [...b]);
console.log(union);
//交集
let interect = new Set([...a].filter(x => b.has(x)));
console.log(interect);
//差集
let diffs = new Set([...a].filter(x => !b.has(x)));
console.log(diffs);

输出结果:
Set(3) { 1, 2, 3 }
Set(2) { 2, 3 }
Set(1) { 1 }

2.4 迭代器函数

let obj = {
    [Symbol.iterator]: function* () {
        yield 1; yield 2; yield 3
    }
}
console.log([...obj]);

输出结果:
[1,2,3]

本文链接:https://likepoems.com/articles/es6-learning-notes-for-the-basic-usage-of-set/
转载说明:本站文章若无特别说明,皆为原创,转载请注明来源:likepoems,谢谢!^^
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇