后端开发教程 - Java、Spring Boot 实战 - msg200.com
像专业人士一样迭代：掌握 JavaScript 迭代器，轻松编写代码
欢迎阅读这篇博文，我们将在这里揭秘 JavaScript 迭代器的强大功能和多样性。如果您曾经使用过数据集合，并想知道是否有更高效、更优雅的方式来导航它们，那么您来对地方了。
在现代 Web 开发领域，高效地管理和操作数据是一项至关重要的技能。JavaScript 迭代器正是为此而生，它提供了一种系统化的方法来遍历各种数据结构，例如数组、映射和集合。无论您是渴望了解基础知识的初学者，还是希望精益求精代码的经验丰富的开发人员，掌握迭代器的概念都能显著提升您的编程能力。
在本篇博文中，我们将全面探索 JavaScript 迭代器。我们将剖析其基本原理，探索其实际应用示例，并演示它们如何简化复杂的数据操作。读完本文后，您不仅将彻底理解迭代器，还能充分利用其潜力，编写更简洁、易读、高效的代码。
所以，无论您是想让代码库更优雅，还是想优化数据操作技术，欢迎加入我们，一起探索 JavaScript 迭代器的世界。从新手到专家，每个人都能在这里找到适合自己的内容。让我们一起开始吧！
JavaScript 中内置了许多实现迭代器模式的结构，例如：Array、Set 和 Map。在 JavaScript 中，可迭代的对象必须实现 Iterable 接口。
但是 Iterable 接口是什么呢？首先，要实现可迭代，对象必须拥有一个next方法。该方法必须返回两个属性：done和value。 Done 用于检测迭代是否完成；而 value 则包含当前值。最后但同样重要的是，如果你想让你的对象成为迭代器，你必须在Symbol.iterator对象的 中暴露 iterable 接口，就像本例中那样。
const array = [1, 2, 3, 4, 5];
const iterator = array[Symbol.iterator]();
for (let result = iterator.next(); !result.done; result = iterator.next()) {
console.log(result.value);
}
例如，这里有一个作为迭代器实现的范围函数。
const range = (start: number, end: number): Iterable<number> => {
return {
[Symbol.iterator]() {
let n = start;
return {
next() {
console.log("range next");
if (n > end) {
return { done: true, value: null };
}
return { done: false, value: n++ };
},
};
},
};
};
你可能注意到，这个函数接受两个数字：start 和 end，并返回一个只有一个属性的新对象，在本例中，该属性为 iterator 属性。然后，在这个函数内部，有一个 next 函数，每次调用时，它会检查当前值是否大于 end，如果是，则返回一个 done 为 true、value 为 null 的新对象；否则，返回一个 done 为 false、value 为当前值的对象。迭代器的妙处在于，JavaScript 只有在你请求下一个值时才会执行某些操作。
每个迭代器都可以使用 for-of 循环进行迭代
for (const num of range(1, 10)) {
console.log(num);
}
或者使用其本机方法，因此调用该Symbol.iterator函数，然后使用下一个方法并检查 done 属性是否为真。
const rangeIterator = range(1, 10)[Symbol.iterator]();
for (let result = rangeIterator.next(); !result.done; result = rangeIterator.next()) {
console.log(result.value);
}
也可以使用扩展运算符复制数组中的所有迭代器值。
for (const num of [...range(1, 10)]) {
console.log(num);
}
迭代器还有另一个方法，即returnmethod。此方法用于代码未完成迭代的情况。想象一下循环调用 break 或 return；在这种情况下，JavaScript 会在底层return为我们调用该方法。在这个方法中，我们可以处理任何需要的操作。我们可能需要重置某些操作或检查迭代器的当前值。
const range = (start: number, end: number): Iterable<number> => {
return {
[Symbol.iterator]() {
let n = start;
return {
next() {
console.log("range next");
if (n > end) {
return { done: true, value: null };
}
return { done: false, value: n++ };
},
return() {
console.log("range return");
return { done: true, value: null };
},
};
},
};
};
for (const num of range(1, 10)) {
if (num > 5) break;
console.log(num);
}
迭代器功能强大，我们还可以创建接受迭代器并对其进行操作以返回另一个迭代器的函数。例如，我们可以创建一个 map 函数，它接受一个迭代器并返回另一个迭代器，并由用户指定回调函数。
function mapIterable<T, U>(
iterable: Iterable<T>,
callback: (value: T) => U
): Iterable<U> {
return {
[Symbol.iterator]() {
const iterator = iterable[Symbol.iterator]();
return {
next() {
console.log("mapIterable next");
const { done, value } = iterator.next();
if (done) {
return { done: true, value: null };
}
return { done, value: callback(value) };
},
return() {
console.log("mapIterable return");
if (iterator.return) {
iterator.return();
}
return { done: true, value: null };
},
};
},
};
}
之前提到的所有信息也适用于这个新的迭代器。JavaScript 在代码库不再请求下一个值之前不会执行任何操作；对于返回方法也是如此，现在你可以将范围迭代器与 map 迭代器组合起来，构建一个新的迭代器。
const mapRange = mapIterable(range(1, 10), value => value * 10);
for (const num of mapRange) {
if (num > 50) break;
console.log(num);
}
好了，就这些！
如果你想深入了解迭代器，别浪费时间去看我YouTube 频道上的视频。
总而言之，理解和使用 JavaScript 迭代器可以极大地提升您以更优雅、更高效的方式处理数据集合的能力。使用迭代器，您可以一次处理一个元素的数据，从而简化代码、提高代码可读性并减少内存消耗。这一强大的概念使开发人员能够实现自定义迭代行为，从而使他们的代码更适应不同的场景。
通过掌握迭代器的基础知识，例如next()方法和可迭代对象的概念，您将开启更复杂的编程技术和设计模式的大门。无论您使用的是数组、映射、集合还是其他数据结构，迭代器都提供了一种标准化的方式来遍历数据并执行操作，而无需不必要的复杂性。
随着 JavaScript 语言的不断发展，迭代器仍然是现代编程范式中至关重要的基础概念。将迭代器纳入你的代码库，将为你提供一套多功能的数据管理工具，最终让你的代码更简洁、更易于维护、更健壮。
因此，在您踏上 JavaScript 迭代器精通之旅时，请记住，它们不仅仅是技术特性；它们代表着您处理和解决代码问题方式的转变。通过练习和探索，您将能够有效地运用迭代器，使您的代码库更高效，开发体验更愉悦。
感谢阅读，祝您编程愉快！😃 👩💻 👨💻
注意：您可以在这里找到本文的代码！
