JavaScript 集


目录

    显示目录

JavaScript 集是唯一值的集合。

每个值在 Set 中只能出现一次。

Set 可以保存任何数据类型的任何值。

设置方法

new Set()

创建一个新集合

add()

将新元素添加到集合中

delete()

从 Set 中删除一个元素

has()

如果值存在则返回 true

clear()

从 Set 中删除所有元素

forEach()

为每个元素调用回调

values()

返回包含 Set 中所有值的 Iterator

keys()

与值()相同

entries()

返回具有 Set 中的 [value,value] 对的迭代器

size

返回 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>