使用 JavaScript 迭代器展平嵌套数据结构

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索 JavaScript 中的迭代器和生成器概念。具体来说,我们将专注于创建一个扁平迭代器,它可以遍历嵌套数组和集合,并将它们展平为单个可迭代对象。这将使我们能够以更简化的方式高效地访问和操作嵌套数据结构。在实验结束时,你将对生成器和迭代器的工作原理以及它们如何应用于解决实际问题有更深入的理解。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28310{{"`使用 JavaScript 迭代器展平嵌套数据结构`"}} javascript/data_types -.-> lab-28310{{"`使用 JavaScript 迭代器展平嵌套数据结构`"}} javascript/arith_ops -.-> lab-28310{{"`使用 JavaScript 迭代器展平嵌套数据结构`"}} javascript/cond_stmts -.-> lab-28310{{"`使用 JavaScript 迭代器展平嵌套数据结构`"}} javascript/loops -.-> lab-28310{{"`使用 JavaScript 迭代器展平嵌套数据结构`"}} javascript/spread_rest -.-> lab-28310{{"`使用 JavaScript 迭代器展平嵌套数据结构`"}} end

扁平迭代器解释

要创建一个遍历可迭代对象并展平嵌套可迭代对象的生成器,请按以下步骤操作:

  1. 打开终端/SSH 并输入 node 开始练习编码。
  2. 在生成器函数中使用递归。
  3. 使用 for...of 循环遍历给定可迭代对象的值。
  4. 使用 Symbol.iterator 检查每个值是否为可迭代对象。
  5. 如果是,则使用 yield* 表达式递归委托给同一个生成器函数。
  6. 否则,yield 当前值。

以下是一个示例代码片段:

const flatIterator = function* (itr) {
  for (let item of itr) {
    if (item[Symbol.iterator]) yield* flatIterator(item);
    else yield item;
  }
};

const arr = [1, 2, [3, 4], [5, [6, [7], 8]], 9, new Set([10, 11])];
[...flatIterator(arr)]; // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11

在示例中,arr 是一个值数组,包括嵌套数组和一个集合。flatIterator 生成器函数用于展平这些嵌套值并返回一个展平后的数组。

总结

恭喜你!你已经完成了扁平迭代器实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程