JavaScript Iterables


Innehållsförteckning

    Visa innehållsförteckning

Iterables är iterable objekt (som Arrays).

Iterables kan nås med enkel och effektiv kod.

Iterables kan itereras över med for..of loopar

For Of Loop

JavaScript for..of-satsen loopar genom elementen i ett iterbart objekt.

Syntax

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

Itererande

Iterering är lätt att förstå.

Det betyder helt enkelt att loopa över en sekvens av element.

Här är några enkla exempel:

  • Itererar över en sträng

  • Itererar över en Array


Itererar över en sträng

Du kan använda en for..of-loop för att iterera över elementen i en sträng:

Exempel

const name = "W3Schools";

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

Prova själv →

<!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>

Itererar över en array

Du kan använda en for..of-loop för att iterera över elementen i en Array:

Exempel

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

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

Prova själv →

<!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>

Du kan lära dig mer information om Iterables i kapitlet JS Object Iterables.



Itererande över en uppsättning

Du kan använda en for..of-loop för att iterera över elementen i en uppsättning:

Exempel

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

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

Prova själv →

<!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>

Uppsättningar och kartor behandlas i nästa kapitel.

Itererar över en karta

Du kan använda en for..of-loop för att iterera över elementen i en karta:

Exempel

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

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

Prova själv →

<!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>