JavaScript Set 对象
JavaScript基础 2022-04-25 01:50:09小码哥的IT人生shichen
JavaScript Set 对象
Set 是唯一值的集合。
每个值在 Set 中只能出现一次。
一个 Set 可以容纳任何数据类型的任何值。
如何创建 Set
创建一个 Set 并添加现有变量：
示例代码：
// 创建新的变量
const a = "a";
const b = "b";
const c = "c";
// 创建 Set
const letters = new Set();
// Add the values to the Set
letters.add(a);
letters.add(b);
letters.add(c);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>创建 Set</h1>
<script>
// 创建新的变量
const a = "a";
const b = "b";
const c = "c";
// 创建 Set
const letters = new Set();
// Add the values to the Set
letters.add(a);
letters.add(b);
letters.add(c);
letters.forEach(function(value){
document.write(value + "<br/>");
})
</script>
</body>
</html>
运行结果：
创建 Set a b c
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
创建 Set 并添加文字值：
示例代码：
// 创建 Set
const letters = new Set();
// 向 Set 添加一些值
letters.add("a");
letters.add("b");
letters.add("c");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>创建 Set</h1>
<script>
// 创建 Set
const letters = new Set();
// 向 Set 添加一些值
letters.add("a");
letters.add("b");
letters.add("c");
letters.forEach(function(value){
document.write(value + "<br/>");
})
</script>
</body>
</html>
运行结果：
创建 Set a b c
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
将 Array 传递给 new Set() 构造函数：
示例代码：
// 创建新的 Set
const letters = new Set(["a","b","c"]);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>创建 Set</h1>
<script>
// 创建新的 Set
const letters = new Set(["a","b","c"]);
letters.forEach(function(value){
document.write(value + "<br/>");
})
</script>
</body>
</html>
运行结果：
创建 Set a b c
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对于 Set，typeof 返回对象：
typeof letters; // 返回 object。
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>typeof 返回对象</h1>
<p id="demo"></p>
<script>
// 创建新的 Set
const letters = new Set(["a","b","c"]);
document.getElementById("demo").innerHTML = typeof letters;
</script>
</body>
</html>
运行结果：
typeof 返回对象 object
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对于 Set，instanceof Set 返回 true：
letters instanceof Set; // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>instanceof Set 返回 true</h1>
<p id="demo"></p>
<script>
// 创建新的 Set
const letters = new Set(["a","b","c"]);
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>
</body>
</html>
运行结果：
instanceof Set 返回 true true
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
向 Set 添加元素
示例代码：
letters.add("d");
letters.add("e");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>向 Set 添加元素</h1>
<script>
// 创建新的 Set
const letters = new Set(["a","b","c"]);
letters.add("d");
letters.add("e");
letters.forEach(function(value){
document.write(value + "<br/>");
})
</script>
</body>
</html>
运行结果：
向 Set 添加元素 a b c d e
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果您添加相等的元素，则只会保存第一个元素：
示例代码：
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>添加相等的元素，则只会保存第一个元素</h1>
<script>
// 创建新的变量
const a = "a";
const b = "b";
const c = "c";
// 创建 Set
const letters = new Set();
// Add the values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.forEach(function(value){
document.write(value + "<br/>");
})
</script>
</body>
</html>
运行结果：
添加相等的元素，则只会保存第一个元素 a b c
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Set 对象的方法和属性
| new Set() | 创建新的 Set 对象。 |
| add() | 向 Set 添加新元素。 |
| clear() | 从 Set 中删除所有元素。 |
| delete() | 删除由其值指定的元素。 |
| entries() | 返回 Set 对象中值的数组。 |
| has() | 如果值存在则返回 true。 |
| forEach() | 为每个元素调用回调。 |
| keys() | 返回 Set 对象中值的数组。 |
| values() | 与 keys() 相同。 |
| size | 返回元素计数。 |
