ES6 学习笔记(九)Set的基本用法
本文最后更新于 128 天前,其中的信息可能已经有所发展或是发生改变。
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]
相关文章
- ES6 模板字符串用法
- es6模板字符串的好处有哪些_使用es6方式实现伪数组转数组
- es6之Promise是什么「建议收藏」
- ipad分屏功能怎么使用_es6 reflect
- CommonJS、CMD、AMD、ES6 Module
- es6转es5_es6转es5插件
- ES6从入门到精通-day01
- Es6基本语法
- 记好这24个ES6方法,用于解决实际开发的JS问题
- vue.js客服系统实时聊天项目开发(七)ES6模板字符串进行字符串变量内嵌拼接
- ORA-47407: ALWAYS AUDIT option set for Rule Set string ORACLE 报错 故障修复 远程处理
- ES6中的模板字符串和新XSS Payload
- MySQL中SET集合的使用方法及注意事项(mysql中set集合)
- MySQL中SET使用方法详解(mysql中set作用)
- 探究Redis的SET命令的功能与用法(查看redis命令set)
- Redis的Set数据结构的获取(set的获得redis)
- 如何有效使用Set结构删除Redis中的数据(set删除redis)
- 红色梦幻搭建Redis集群模式SET(redis集群模式set)
- 深入浅出Redis集群Set的简单操作(redis集群set过程)
- Redis限制SET长度妙用和管控(redis限制set长度)
- Redis中Set值重复的检测方式(redis重复set)
- 发现奥秘Redis遍历Set集合(redis遍历set集合)
- Oracle SET指令实现变量显示(oracle set显示)