使用 Symbol.iterator 控制循环

您是否曾经使用过 Object.entries 并想知道它是如何工作的？这比你想象的要简单得多！

这是一个基本实现：

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

但是，这段代码还不够好 - 如果对象很大怎么办？在执行该函数的整个过程中，基于数组的方法的性能必须存储在内存中。如果你再次使用它呢？它必须同样构建一个新数组并将其保留在内存中。在现实世界中，这可能会导致严重的性能问题，并且在某些时候我们需要适应性能。然而，有一个优雅的解决方案可以解决所有这些问题，其中 Symbol.iterator 可以拯救您！

这是更新的片段：

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



<p><strong>为什么使用Symbol.iterator进行迭代？</strong></p>

<p>在我们的初始实现中，objectEntries 函数在内存中构建所有条目（[key, value] 对）的数组，如果对象具有大量属性，这可能会出现问题。将所有条目存储在数组中意味着我们必须提前为每一对分配内存。这种方法对于较小的对象来说相当不错，但随着对象大小的增加，它很快就会变得低效并且速度变慢。</p>

<p>在更新后的代码中，我们在保存迭代逻辑的对象上定义了 [Symbol.iterator]。让我们一步步分解：</p>

• 初始化键：Object.keys(obj) 从对象 obj 中获取键数组。这个键列表使我们能够准确地知道我们需要访问哪些属性，而无需存储每个条目。
• 使用索引指针：变量索引跟踪我们在键数组中的当前位置。这是我们在循环中唯一的状态。
• 定义 next 方法：next() 函数使用索引来检索当前键并递增它。它返回每个 [key, obj[key]] 对作为值，并在迭代完所有键后设置 did: true。
• 通过这样做，我们使 objectEntries 能够与任何 for...of 循环兼容，而无需预先创建整个条目数组的内存成本。

将 Symbol.iterator 应用于自定义循环

让我们更深入地了解这些方法如何提供对循环行为的更多控制。提供的每个示例都演示了与数组数据交互的独特方式，为您的代码增加了很多灵活性。我们将探讨每种方法的含义以及如何在不同场景中利用它们。

在这些示例中，我将使用示例方法扩展数组原型（有关原型的更多信息），以使我的代码更易于阅读。让我们直接开始吧！

例如，此反向迭代器方法在聊天应用程序等您可能希望首先显示最新消息的应用程序中很有用。聊天应用程序因拥有大量数据（在本例中为消息）而臭名昭著。使用reverseIterator，您可以迭代消息列表并以所需的顺序显示它们，而无需创建新的反向数组。

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

这种独特的方法使您能够迭代数组，同时确保只产生唯一的值。这对于动态消除重复项非常有用，无需提前过滤并使用更多内存。

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



<p>下面的块方法在处理大型数据集时非常有用，您可以将它们分成较小的块来处理，以减少内存使用并提高性能。假设您正在从 CSV 文件之类的文件导入数据，您可以在更具可扩展性的段中读取和处理它。此外，在 Web 用户界面中，分块可用于分页，允许您在每页显示特定数量的项目或帮助您更好地管理无限加载器。<br>
</p>

<pre class="brush:php;toolbar:false">Array.prototype.reverseIterator = function() {
  let index = this.length - 1;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index >= 0) {
          return { value: this[index--], done: false };
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers.reverseIterator()) {
  console.log(num); // 5, 4, 3, 2, 1
}

结论

在本文中，我们探讨了 Symbol.iterator 如何自定义逻辑并提高循环效率。通过在 Array.prototype（或任何其他可迭代的方法）上实现自定义可迭代方法，我们可以有效地管理内存使用并控制循环的运行方式。

objectEntries 的初始示例演示了基于数组的方法在处理大型对象时如何导致性能问题。然而，通过使用 SYmbol.iterator，我们创建了一个有效的解决方案，允许我们迭代对象条目，而无需不必要的内存分配开销。

我们还研究了几个实际示例，说明扩展 Array.prototype 如何促进开发人员日常处理的各种现实场景。

利用这些强大的工具，您可以更好地解决 JavaScript 中复杂的数据处理场景，并且对应用程序的性能影响几乎为零。

以上是使用 Symbol.iterator 控制循环的详细内容。更多信息请关注PHP中文网其他相关文章！