JavaScript 集是唯一值的集合。
每个值在 Set 中只能出现一次。
Set 可以保存任何数据类型的任何值。
创建一个新集合
将新元素添加到集合中
从 Set 中删除一个元素
如果值存在则返回 true
从 Set 中删除所有元素
为每个元素调用回调
返回包含 Set 中所有值的 Iterator
与值()相同
返回具有 Set 中的 [value,value] 对的迭代器
返回 Set 中的数字元素
您可以通过以下方式创建 JavaScript 集:
将数组传递给 new Set()
创建一个新 Set 并使用 add()
添加值
创建一个新的 Set 并使用 add()
添加变量
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 Variables
const a = "a";
const b = "b";
const c = "c";
// Create a Set
const letters = new Set();
// 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 entries
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 中所有值的 Iterator 对象:
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 对象来访问元素:
// Create an Iterator
const myIterator = letters.values();
// List all Values
let text = "";
for (const entry of myIterator) {
text += entry;
}
自己尝试一下 →
<!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>
keys()
方法Set 没有键。
keys()
返回与 values()
。
这使得集合与地图兼容。
letters.keys() // Returns [object Set Iterator]
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() 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.keys();
</script>
</body>
</html>
entries()
方法Set 没有键。
entries()
返回 [value,value] 对 而不是 [键,值] 对。
这使得集合与地图兼容:
// Create an Iterator
const myIterator = letters.entries();
// List all Entries
let text = "";
for (const entry of myIterator) {
text += entry;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a","b","c"]);
// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
text += entry + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
对于 Set,typeof
返回对象:
typeof letters; // Returns object
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>
<p id="demo"></p>
<script>
// Create a new Set
const letters = new Set(["a","b","c"]);
// Display typeof
document.getElementById("demo").innerHTML = typeof letters;
</script>
</body>
</html>
对于 Set,instanceof Set
返回 true:
letters instanceof Set; // Returns true
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>
<p id="demo"></p>
<script>
// Create a new Set
const letters = new Set(["a","b","c"]);
// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>
</body>
</html>