欢迎来到这篇博客文章，我们将要揭示JavaScript迭代器的功能和多功能性。如果您曾经发现自己正在使用数据收集，并且想知道是否有一种更高效，更优雅的浏览方式，那么您就在正确的位置。
在现代网络开发领域，有效管理和操纵数据是一项至关重要的技能。这是JavaScript迭代器发挥作用的地方，它提供了一种系统的方法来穿越各种数据结构，例如数组，地图和集合。无论您是渴望了解基础知识的初学者还是希望微调代码的经验丰富的开发人员，掌握迭代器的概念都可以显着增强您的编程旅程。
在这篇博客文章中，我们将开始对JavaScript迭代器进行全面探索。我们将分解他们的基本原则，探讨其使用情况的实际示例，并演示如何简化复杂的数据运行。当您完成阅读时，您不仅可以理解内外的迭代器，而且还可以利用其潜力编写更简洁，可读和高效的代码。
因此，无论您是努力使代码库更优雅还是试图优化数据操纵技术，都可以加入我们，当我们深入研究JavaScript迭代器世界时。从新手到专家，这里都有适合所有人的东西。让我们潜入！
JavaScript中内置的存在许多实现迭代器模式的结构，例如：数组，设置和映射。在JavaScript中，要具有峰值的对象必须实现峰值接口。
但是什么是迭代界面？首先，要觉得，一个对象必须具有next方法。此方法必须返回两个属性：done和value。完成的用于检测迭代是否完成；相反，该值包含当前值。最后但并非最不重要的一点是，如果您希望自己的对象成为迭代器，则必须像在此示例中一样公开对象的Symbol.iterator中的峰值接口。
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++ };
},
};
},
};
};
您会注意到，此功能接受两个数字，启动和结束并返回具有单个属性的新对象，在这种情况下，迭代器属性。然后，在此函数内部，有一个下一个函数，在每个呼叫上，都会检查当前值是否大于末端，如果为true，则返回一个新对象，并以null为真且值为null； else返回带有当前值的false和值的对象。关于迭代器的美丽之处在于，JavaScript仅一旦您要求下一个值就可以做某事。
可以使用for loop
迭代每个迭代器
for (const num of range(1, 10)) {
console.log(num);
}
或使用其本机方法，因此请调用Symbol.iterator函数，然后使用下一个方法并检查完成的属性是否为true。
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);
}
迭代器还具有另一种方法，即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);
}
迭代器功能强大，我们还可以创建功能来接受迭代器并操纵它以返回另一个迭代器。例如，我们可以创建一个接受迭代器并使用用户指定的回调返回另一个的地图功能。
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无需任何事情，直到代码库不要求下一个值。返回方法也是如此，现在您可以使用地图迭代器组成范围迭代器来构建新的迭代器。
const mapRange = mapIterable(range(1, 10), value => value * 10);
for (const num of mapRange) {
if (num > 50) break;
console.log(num);
}
好的，仅此而已！
如果您想深入研究迭代器，请不要在我的Youtube Channel上浪费我的视频。
总而言之，理解和利用JavaScript迭代器可以极大地增强您以更优雅和高效的方式处理数据收集的能力。使用迭代器，您可以通过一次处理一个元素来简化代码，提高其可读性并减少记忆消耗。这个有力的概念使开发人员实施自定义迭代行为，使其代码更适合不同方案。
通过掌握迭代器的基础知识，例如next()方法和峰值对象的概念，您可以打开更复杂的编程技术和设计模式的大门。无论您是使用数组，地图，集合还是其他数据结构，迭代器都提供了一种标准化的方法，可以通过数据进行遍历和执行操作而无需不必要的复杂性。
随着JavaScript语言继续发展，迭代器仍然是一个基本概念，在现代编程范式中起着至关重要的作用。将迭代器纳入您的编码，使您拥有用于管理数据的多功能工具，最终导致更清洁，更可维护和更强大的代码。
因此，当您踏上掌握JavaScript迭代器的旅程时，请记住，它们不仅仅是技术功能。它们代表了您如何处理和解决代码中的问题的转变。通过练习和探索，您将能够有效地使用迭代器，从而使您的代码库更有效，并且您的开发体验更加愉快。
感谢您的阅读和愉快的编码！ ð7©ð»ð»
n.b。您可以找到本文的代码here！