JavaScript 集是唯一值的集合。
每个值在 Set 中只能出现一次。
创建一个新集合
将新元素添加到集合中
从 Set 中删除一个元素
如果 Set 中存在某个值,则返回 true
为 Set 中的每个元素调用回调
返回包含 Set 中所有值的迭代器
返回 Set 中的元素数量
您可以通过以下方式创建 JavaScript 集:
将数组传递给 new Set()
创建一个新 Set 并使用 add()
添加值
创建一个新的 Set 并使用 add()
添加变量
new Set()
方法将数组传递给 new Set()
构造函数:
// Create a Set
const letters = new Set(["a","b","c"]);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a","b","c"]);
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
创建一个 Set 并添加值:
// Create a Set
const letters = new Set();
// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set();
// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
创建一个 Set 并添加变量:
// Create a Set
const letters = new Set();
// Create Variables
const a = "a";
const b = "b";
const c = "c";
// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set();
// Create Variables
const a = "a";
const b = "b";
const c = "c";
// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
add()
方法letters.add("d");
letters.add("e");
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>
<p id="demo"></p>
<script>
// Create a new Set
const letters = new Set(["a","b","c"]);
// Add a new Element
letters.add("d");
letters.add("e");
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</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>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set();
// Add 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");
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
forEach()
方法forEach()
方法为每个 Set 元素调用一个函数:
// Create a Set
const letters = new Set(["a","b","c"]);
// List all Elements
let text = "";
letters.forEach (function(value) {
text += value;
})
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a","b","c"]);
// List all Elements
let text = "";
letters.forEach (function(value) {
text += value + "<br>";
})
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
values()
方法values()
方法返回一个新的迭代器对象,其中包含 Set 中的所有值:
letters.values() // Returns [object Set Iterator]
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a","b","c"]);
// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>
</body>
</html>
现在您可以使用 Iterator 对象来访问元素:
// List all Elements
let text = "";
for (const x of letters.values()) {
text += x;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a","b","c"]);
// List all Elements
let text = "";
for (const x of letters.values()) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>