ES10 引入了一种新的迭代器方法 Symbol.iterator，它允许开发者自定义对象的迭代行为。自定义迭代器可以让我们更加灵活地遍历对象，而不仅仅局限于数组和字符串等内置类型。
本文将介绍如何编写 ES10 中的自定义对象迭代器，并提供示例代码和实际应用场景。
什么是迭代器？
在介绍自定义对象迭代器之前，我们先来了解一下什么是迭代器。
迭代器是一个对象，它提供了一个 next() 方法，用于按照一定的顺序遍历某个数据结构中的元素。当迭代器遍历完所有元素后，next() 方法将返回一个特殊的值 done: true，表示迭代已经完成。
在 ES6 中，数组、字符串、Set、Map 等内置类型都实现了迭代器方法 Symbol.iterator，使得我们可以使用 for...of 循环来遍历它们。例如：
let arr = [1, 2, 3];
for (let item of arr) {
console.log(item);
}
// 输出：1 2 3如何编写自定义迭代器？
要编写自定义迭代器，我们需要定义一个对象，并在该对象上实现 Symbol.iterator 方法。Symbol.iterator 方法应该返回一个迭代器对象，该对象应该包含一个 next() 方法，用于遍历对象的元素。例如：
// javascriptcn.com 代码示例
let myObj = {
data: [1, 2, 3],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.data.length) {
return { value: this.data[index++], done: false };
} else {
return { done: true };
}
}
};
}
};
for (let item of myObj) {
console.log(item);
}
// 输出：1 2 3在上面的例子中，我们定义了一个名为 myObj 的对象，并在该对象上实现了 Symbol.iterator 方法。Symbol.iterator 方法返回一个迭代器对象，该对象包含一个 next() 方法，用于遍历 myObj 对象的元素。
在 next() 方法中，我们使用一个索引变量 index 来追踪当前遍历到的元素位置。如果 index 小于 data 数组的长度，则返回一个包含 value 属性和 done 属性的对象，其中 value 属性为当前遍历到的元素，done 属性为 false。否则，返回一个只包含 done 属性的对象，其中 done 属性为 true，表示迭代已经完成。
自定义迭代器的应用场景
自定义迭代器可以应用于各种数据结构中，例如树、图等复杂的数据结构。下面我们来看一个实际的应用场景。
假设我们有一个树形结构的数据，每个节点包含一个值和若干子节点。我们希望能够使用 for...of 循环来遍历该树的所有节点。我们可以定义一个 TreeNode 类，该类包含一个 value 属性和一个 children 数组，用于存储子节点。并在该类上实现 Symbol.iterator 方法，用于遍历该节点及其子节点。例如：
// javascriptcn.com 代码示例
class TreeNode {
constructor(value) {
this.value = value;
this.children = [];
}
addChild(node) {
this.children.push(node);
}
*[Symbol.iterator]() {
yield this.value;
for (let child of this.children) {
yield* child;
}
}
}
let root = new TreeNode(1);
let node1 = new TreeNode(2);
let node2 = new TreeNode(3);
let node3 = new TreeNode(4);
let node4 = new TreeNode(5);
root.addChild(node1);
root.addChild(node2);
node1.addChild(node3);
node2.addChild(node4);
for (let node of root) {
console.log(node);
}
// 输出：1 2 4 3 5在上面的例子中，我们定义了一个 TreeNode 类，该类包含一个 value 属性和一个 children 数组，用于存储子节点。在 TreeNode 类上实现了 Symbol.iterator 方法，使用生成器函数来实现自定义迭代器。在生成器函数中，我们首先使用 yield 关键字返回该节点的值，然后使用 yield* 关键字递归遍历该节点的子节点，直到所有节点都被遍历完毕。
最后，我们创建了一个树形结构，并使用 for...of 循环来遍历该树的所有节点。可以看到，自定义迭代器让我们可以方便地遍历复杂的数据结构，从而简化了代码的编写。
总结
自定义迭代器是 ES10 中一个非常有用的特性，它可以让我们更加灵活地遍历对象，从而简化了代码的编写。本文介绍了如何编写自定义迭代器，并提供了一个实际的应用场景。希望本文可以帮助读者更好地理解自定义迭代器的概念和用法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ffbf3d2f5e1655d88b037