JavaScript 可迭代对象
可迭代对象是可以被迭代的对象(如数组)。
可迭代对象可以通过简单高效的代码访问。
可迭代对象可以使用 for..of
循环进行迭代。
for..of 循环
for..of
语句用于遍历可迭代对象的元素。
语法
for (variable of iterable) { // 要执行的代码块 }
迭代
迭代很容易理解。
它只是意味着遍历一系列元素。
下面是一些简单的例子:
- 遍历字符串
- 遍历数组
遍历字符串
可以使用 for..of
循环遍历字符串的元素:
实例
const name = "W3Schools"; for (const x of name) { // 要执行的代码块 }
遍历数组
可以使用 for..of
循环遍历数组的元素:
例子 1
const letters = ["a","b","c"]; for (const x of letters) { // 要执行的代码块 }
例子 2
const numbers = [2,4,6,8]; for (const x of numbers) { // 要执行的代码块 }
遍历 Set
可以使用 for..of
循环遍历 Set 的元素:
实例
const letters = new Set(["a","b","c"]); for (const x of letters) { // 要执行的代码块 }
注释:我们将在后续章节中详细介绍 Set 和 Map。
遍历 Map
可以使用 for..of
循环遍历 Map 的元素:
实例
const fruits = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] ]); for (const x of fruits) { // 要执行的代码块 }
JavaScript 迭代器
迭代器协议定义了如何从对象中生成一系列值。
当对象实现了 next()
方法时,它就成为迭代器。
next()
方法必须返回一包含两个属性的对象:
- value(下一个值)
- done(true 或 false)
value |
迭代器返回的值。 如果 done 为 true,则可以省略。 |
done |
如果迭代器已完成,则为 true。 如果迭代器生成了新值,则为 false。 |
注意:
从技术上讲,可迭代对象必须实现 Symbol.iterator 方法。
字符串、数组、TypedArray、Map 和 Set 都是可迭代对象,因为它们的原型对象具有 Symbol.iterator 方法。
自定义可迭代对象
下例展示了一个自定义的可迭代对象,它永远不会结束,每次调用 next()
都会返回 10, 20, 30, 40, ...:
实例
// 自定义可迭代对象 function myNumbers() { let n = 0; return { next: function() { n += 10; return { value: n, done: false }; } }; } // 创建可迭代对象 const n = myNumbers(); n.next(); // 返回 10 n.next(); // 返回 20 n.next(); // 返回 30
问题是:
自定义的可迭代对象不支持 JavaScript 的 for..of
语句。
支持 for..of 的可迭代对象
JavaScript 可迭代对象是拥有 Symbol.iterator 的对象。
Symbol.iterator 是一个返回 next()
方法的函数。
可以使用以下代码对可迭代对象进行迭代:
for (const x of iterable) { }
实例
// 创建一个对象 myNumbers = {}; // 使其可迭代 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) { // 任意代码 }
Symbol.iterator 方法会被 for..of
自动调用。
但我们也可以手动调用它:
实例
let iterator = myNumbers[Symbol.iterator](); while (true) { const result = iterator.next(); if (result.done) break; // 任意代码 }