JavaScript中Set数据结构如何详细解析？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1749个文字，预计阅读时间需要7分钟。
目录
1.什么是 Set
2.Set 构造函数
2.1 数组 2.2 字符串 2.3 arguments 2.4 NodeList 2.5 Set3.Set 的实例属性和方法
4.Set 的成员访问
5.Set 的注意事项
6.Set 的使用场景
1.什么是 Set
Set 是一种特殊的对象，它存储唯一的值。Set 的每个值都是唯一的，且无序。2. Set 构造函数Set 可以通过多种方式创建，包括： - 数组 - 字符串 - arguments - NodeList - Set
3. Set 的实例属性和方法Set 对象具有一些内置的属性和方法，用于操作集合中的元素。
4. Set 的成员访问可以通过 `has()` 方法检查一个值是否存在于 Set 中。
5. Set 的注意事项使用 Set 时需要注意： - Set 中的元素是唯一的。 - Set 是无序的。
6. Set 的使用场景Set 适用于需要存储唯一值的场景，例如： - 去除数组中的重复元素。 - 存储不重复的选项。
总结Set 是一种简单而强大的数据结构，可以有效地存储唯一值。
目录
- 1. 什么是 Set
- 2. Set 构造函数
- 2.1) 数组
- 2.2) 字符串
- 2.3) arguments
- 2.4) NodeList
- 2.5) Set
- 3. Set 的实例属性和方法
- 4. Set 的成员访问
- 5. Set 的注意事项
- 6. Set 的使用场景
- 总结
1. 什么是 Set
Set 可以简单的看作是数学上的集合。
它是一系列无序，没有重复数值的数据集合。
2. Set 构造函数
对于 Set 的构造函数的参数，可以传递以下几种形式。
2.1) 数组
const s = new Set([1, 2, 1]); console.log(s);
这里传递了一个数组[1, 2, 1]作为参数，由于 Set 是无重复数值的集合，所以第三个 1 自动删除了。
2.2) 字符串
const s = new Set("Hello World!"); console.log(s);
2.3) arguments
function fun() { const s = new Set(arguments); console.log(s); } fun(1, 2, 3);
2.4) NodeList
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>set</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <script> const s = new Set(document.querySelectorAll('p')); console.log(s); </script> </body> </html>
这里将三个p标签的引用放进了Sets中；
当我们要用的时候，就可以遍历这个Set，然后分别将p标签的引用取出来，然后就可以对p标签进行修改了。
2.5) Set
const s1 = new Set([1, 2, 3]); const s2 = new Set(s1); console.log(s2);
这里相当于把s1复制过去，给了s2，不过它们不是同一个Set
console.log(s1 === s2);
3. Set 的实例属性和方法
Set 的属性，有一个属性size，用来存储它的成员个数
const s = new Set([1, 2, 3]); console.log(s.size);
Set的方法
- add
给 Set 中添加成员
const s = new Set([1, 2, 3]); // 它的参数只能传一个 s.add(5); console.log(s); // 可以连缀 add s.add(7).add(9); console.log(s);
- delete
用来删除 Set 中的成员
const s = new Set([1, 2, 3]); s.delete(2); // 如果要删除的东西在 Set 中找不到，将什么也不会发生，也不会报错 s.delete(5); console.log(s);
- has
用来判断 Set 是否含有某个成员
const s = new Set([1, 2, 3]); console.log(s.has(1)); console.log(s.has(5));
- clear
将会删除 Set 的所有成员
const s = new Set([1, 2, 3]); s.clear(); console.log(s);
4. Set 的成员访问
它的成员访问要通过forEach方法实现，遍历 Set，它的遍历是按成员的添加顺序来进行遍历的。
它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中this指向什么，即
s.forEach(回调函数, 回调函数的指向)
我们先来看第一个参数：
对于第一个参数回调函数，它有三个参数：
s.forEach(function(value, key, set){ value 就是 Set 的成员 在 Set 中，value 和 key 是相等的 set 就是前面Set的本身，即这里 set === s });
通过一个例子理解一下：
const s = new Set([1, 2, 3]); s.forEach(function(value, key, set) { console.log(value, key, value === key); console.log(set, set === s); });
再来看第二个参数：
const s = new Set([1, 2, 3]); s.forEach(function(value, key, set) { console.log(this); }, document);
5. Set 的注意事项
Set 对重复值的判断基本遵循严格相等===的判断
不过对于NaN，在 Set 中，NaN等于NaN
6. Set 的使用场景
数组去重
let arr = [1, 2, 1]; const s = new Set(arr); arr = [...s]; // 也可以合成一句 // arr = [...new Set(arr)]; console.log(arr);
字符串去重
let str = "11231131242"; const s = new Set(str); str = [...s].join(""); // 也可以写成一句 // str = [...new Set(str)].join(""); console.log(str);
存放 DOM 元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>set</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <script> const s = new Set(document.querySelectorAll('p')); s.forEach((elem) => { console.log(elem) }); </script> </body> </html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!
本文共计1749个文字，预计阅读时间需要7分钟。
目录
1.什么是 Set
2.Set 构造函数
2.1 数组 2.2 字符串 2.3 arguments 2.4 NodeList 2.5 Set3.Set 的实例属性和方法
4.Set 的成员访问
5.Set 的注意事项
6.Set 的使用场景
1.什么是 Set
Set 是一种特殊的对象，它存储唯一的值。Set 的每个值都是唯一的，且无序。2. Set 构造函数Set 可以通过多种方式创建，包括： - 数组 - 字符串 - arguments - NodeList - Set
3. Set 的实例属性和方法Set 对象具有一些内置的属性和方法，用于操作集合中的元素。
4. Set 的成员访问可以通过 `has()` 方法检查一个值是否存在于 Set 中。
5. Set 的注意事项使用 Set 时需要注意： - Set 中的元素是唯一的。 - Set 是无序的。
6. Set 的使用场景Set 适用于需要存储唯一值的场景，例如： - 去除数组中的重复元素。 - 存储不重复的选项。
总结Set 是一种简单而强大的数据结构，可以有效地存储唯一值。
目录
- 1. 什么是 Set
- 2. Set 构造函数
- 2.1) 数组
- 2.2) 字符串
- 2.3) arguments
- 2.4) NodeList
- 2.5) Set
- 3. Set 的实例属性和方法
- 4. Set 的成员访问
- 5. Set 的注意事项
- 6. Set 的使用场景
- 总结
1. 什么是 Set
Set 可以简单的看作是数学上的集合。
它是一系列无序，没有重复数值的数据集合。
2. Set 构造函数
对于 Set 的构造函数的参数，可以传递以下几种形式。
2.1) 数组
const s = new Set([1, 2, 1]); console.log(s);
这里传递了一个数组[1, 2, 1]作为参数，由于 Set 是无重复数值的集合，所以第三个 1 自动删除了。
2.2) 字符串
const s = new Set("Hello World!"); console.log(s);
2.3) arguments
function fun() { const s = new Set(arguments); console.log(s); } fun(1, 2, 3);
2.4) NodeList
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>set</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <script> const s = new Set(document.querySelectorAll('p')); console.log(s); </script> </body> </html>
这里将三个p标签的引用放进了Sets中；
当我们要用的时候，就可以遍历这个Set，然后分别将p标签的引用取出来，然后就可以对p标签进行修改了。
2.5) Set
const s1 = new Set([1, 2, 3]); const s2 = new Set(s1); console.log(s2);
这里相当于把s1复制过去，给了s2，不过它们不是同一个Set
console.log(s1 === s2);
3. Set 的实例属性和方法
Set 的属性，有一个属性size，用来存储它的成员个数
const s = new Set([1, 2, 3]); console.log(s.size);
Set的方法
- add
给 Set 中添加成员
const s = new Set([1, 2, 3]); // 它的参数只能传一个 s.add(5); console.log(s); // 可以连缀 add s.add(7).add(9); console.log(s);
- delete
用来删除 Set 中的成员
const s = new Set([1, 2, 3]); s.delete(2); // 如果要删除的东西在 Set 中找不到，将什么也不会发生，也不会报错 s.delete(5); console.log(s);
- has
用来判断 Set 是否含有某个成员
const s = new Set([1, 2, 3]); console.log(s.has(1)); console.log(s.has(5));
- clear
将会删除 Set 的所有成员
const s = new Set([1, 2, 3]); s.clear(); console.log(s);
4. Set 的成员访问
它的成员访问要通过forEach方法实现，遍历 Set，它的遍历是按成员的添加顺序来进行遍历的。
它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中this指向什么，即
s.forEach(回调函数, 回调函数的指向)
我们先来看第一个参数：
对于第一个参数回调函数，它有三个参数：
s.forEach(function(value, key, set){ value 就是 Set 的成员 在 Set 中，value 和 key 是相等的 set 就是前面Set的本身，即这里 set === s });
通过一个例子理解一下：
const s = new Set([1, 2, 3]); s.forEach(function(value, key, set) { console.log(value, key, value === key); console.log(set, set === s); });
再来看第二个参数：
const s = new Set([1, 2, 3]); s.forEach(function(value, key, set) { console.log(this); }, document);
5. Set 的注意事项
Set 对重复值的判断基本遵循严格相等===的判断
不过对于NaN，在 Set 中，NaN等于NaN
6. Set 的使用场景
数组去重
let arr = [1, 2, 1]; const s = new Set(arr); arr = [...s]; // 也可以合成一句 // arr = [...new Set(arr)]; console.log(arr);
字符串去重
let str = "11231131242"; const s = new Set(str); str = [...s].join(""); // 也可以写成一句 // str = [...new Set(str)].join(""); console.log(str);
存放 DOM 元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>set</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <script> const s = new Set(document.querySelectorAll('p')); s.forEach((elem) => { console.log(elem) }); </script> </body> </html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!