JavaScript 可迭代对象


目录

    显示目录

Iterables 是可迭代的对象(如数组)。

可以使用简单高效的代码来访问可迭代对象。

可迭代对象可以使用 for..of 循环进行迭代

For Of 循环

JavaScript for..of 语句循环 通过可迭代对象的元素。

句法

for (variable of iterable) {
  // code block to be executed
}

迭代

迭代很容易理解。

它只是意味着循环一系列元素。

以下是一些简单的示例:

  • 迭代字符串

  • 迭代数组


迭代字符串

您可以使用 for..of 循环来迭代字符串的元素:

例子

const name = "W3Schools";

for (const x of name) {
  // code block to be executed
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>

<p id="demo"></p>

<script>
// Create a String
const name = "W3Schools";

// List all Elements
let text = ""
for (const x of name) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

迭代数组

您可以使用 for..of 循环来迭代数组的元素:

例子

const letters = ["a","b","c"];

for (const x of letters) {
  // code block to be executed
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over an Array:</p>

<p id="demo"></p>

<script>
// Create aa Array
const letters = ["a","b","c"];

// List all Elements
let text = "";
for (const x of letters) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

您可以在 JS Object Iterables 一章中了解有关 Iterables 的更多详细信息。



迭代集合

您可以使用 for..of 循环来迭代 Set 的元素:

例子

const letters = new Set(["a","b","c"]);

for (const x of letters) {
  // code block to be executed
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a Set:</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) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

集合和映射将在接下来的章节中介绍。

迭代地图

您可以使用 for..of 循环来迭代 Map 的元素:

例子

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

for (const x of fruits) {
  // code block to be executed
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a Map:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// List all entries
let text = "";
for (const x of fruits) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>