Itererbara objekt är objekt som kan itereras över med for..of
.
Tekniskt sett måste iterables implementera metoden Symbol.iterator
.
Du kan använda en for..of
-loop för att iterera över elementen i en sträng:
for (const x of "W3Schools") {
// 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>
Du kan använda en for..of
-loop för att iterera över elementen i en Array:
for (const x of [1,2,3,4,5]) {
// 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>
iteratorprotokollet definierar hur man producerar en värdesekvens från ett objekt.
Ett objekt blir en iterator när det implementerar en next()
-metod.
Metoden next()
måste returnera ett objekt med två egenskaper:
värde (nästa värde)
gjort (sant eller falskt)
Värdet som returneras av iteratorn
(Kan utelämnas om gjort är sant)
true om iteratorn har slutförts
false om iteratorn har producerat ett nytt värde
Denna itererbara returnerar oändlig: 10,20,30,40,.... Everytime next()
heter:
// Home Made Iterable
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// Create Iterable
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Home Made Iterable:</p>
<p id="demo"></p>
<script>
// Home Made Iterable
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// Create Iterable
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30
document.getElementById("demo").innerHTML = n.next().value;
</script>
</body>
</html>
Problemet med en hemgjord iterabel:
Den stöder inte JavaScript-satsen for..of
.
En iterabel JavaScript är ett objekt som har en Symbol.iterator.
Symbol.iterator
är en funktion som returnerar en next()
-funktion.
En iterabel kan itereras över med koden: for (const x of iterable) { }
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
Nu kan du använda för..av
for (const num of myNumbers) {
// Any Code Here
}
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p id="demo"></p>
<script>
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
let text = ""
for (const num of myNumbers) {
text += num +"<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Symbol.iterator-metoden anropas automatiskt av for..of
. <p>Men vi kan också göra det "manuellt"
let iterator = myNumbers[Symbol.iterator]();
while (true) {
const result = iterator.next();
if (result.done) break;
// Any Code Here
}
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p id="demo"></p>
<script>
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
// Create an Iterator
let iterator = myNumbers[Symbol.iterator]();
let text = ""
while (true) {
const result = iterator.next();
if (result.done) break;
text += result.value +"<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>