可迭代对象是可以使用 for..of
进行迭代的对象。
从技术上讲,可迭代对象必须实现 Symbol.iterator
方法。
您可以使用 for..of
循环来迭代字符串的元素:
for (const x of "W3Schools") {
// 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
循环来迭代数组的元素:
for (const x of [1,2,3,4,5]) {
// 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>
迭代器协议定义如何从对象生成值序列。
当对象实现 next()
方法时,它就成为迭代器。
next()
方法必须返回具有两个属性的对象:
值(下一个值)
完成(对或错)
迭代器返回的值
(如果done为true则可以省略)
true 如果迭代器已完成
false 如果迭代器产生了新值
这个迭代返回永无止境:10,20,30,40,....每次 next() 被调用:
// 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
自己尝试一下 →
<!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>
房屋的问题变得可迭代:
它不支持 JavaScript for..of
语句。
JavaScript 可迭代对象是一个具有 Symbol.iterator 的对象。
Symbol.iterator
是一个返回 next()
函数的函数。
可以使用以下代码迭代可迭代对象: 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};
}
};
}
现在您可以使用 for..of
for (const num of myNumbers) {
// Any Code Here
}
自己尝试一下 →
<!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 方法由 for..of
自动调用。 <p>但我们也可以“手动”完成
let iterator = myNumbers[Symbol.iterator]();
while (true) {
const result = iterator.next();
if (result.done) break;
// Any Code Here
}
自己尝试一下 →
<!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>