遍历对象

JavaScriptJavaScriptBeginner
立即练习

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

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

简介

在本实验中,我们将探讨如何创建一个生成器函数,该函数使用递归遍历给定对象的所有键。本实验的目的是为学习者提供实践经验,以了解如何将 yieldyield* 表达式与 for...of 循环和 Object.keys() 结合使用,以迭代对象的键及其值。在本实验结束时,学习者将实际理解如何递归地遍历对象,并生成一个表示当前路径和相应值的键数组。


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/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28693{{"`遍历对象`"}} javascript/data_types -.-> lab-28693{{"`遍历对象`"}} javascript/arith_ops -.-> lab-28693{{"`遍历对象`"}} javascript/comp_ops -.-> lab-28693{{"`遍历对象`"}} javascript/cond_stmts -.-> lab-28693{{"`遍历对象`"}} javascript/loops -.-> lab-28693{{"`遍历对象`"}} javascript/array_methods -.-> lab-28693{{"`遍历对象`"}} javascript/spread_rest -.-> lab-28693{{"`遍历对象`"}} end

遍历对象键

要生成给定对象的所有键的列表,请执行以下步骤:

  1. 打开终端/SSH 并输入 node 以开始练习编码。

  2. 定义一个名为 walk 的生成器函数,它接受一个对象和一个键数组。使用递归来遍历对象的所有键。

  3. walk 函数内部,使用 for...of 循环和 Object.keys() 来迭代对象的键。

  4. 使用 typeof 检查给定对象中的每个值本身是否为对象。如果该值是对象,则使用 yield* 表达式递归地委托给同一个生成器函数 walk,将当前的 key 添加到键数组中。

  5. 否则,yield 一个表示当前路径的键数组和给定 key 的值。

  6. 使用 yield* 表达式委托给 walk 生成器函数。

以下是代码:

const walkThrough = function* (obj) {
  const walk = function* (x, previous = []) {
    for (let key of Object.keys(x)) {
      if (typeof x[key] === "object") yield* walk(x[key], [...previous, key]);
      else yield [[...previous, key], x[key]];
    }
  };
  yield* walk(obj);
};

要测试代码,请创建一个对象并使用 walkThrough 函数生成其所有键的列表:

const obj = {
  a: 10,
  b: 20,
  c: {
    d: 10,
    e: 20,
    f: [30, 40]
  },
  g: [
    {
      h: 10,
      i: 20
    },
    {
      j: 30
    },
    40
  ]
};
[...walkThrough(obj)];
/*
[
  [['a'], 10],
  [['b'], 20],
  [['c', 'd'], 10],
  [['c', 'e'], 20],
  [['c', 'f', '0'], 30],
  [['c', 'f', '1'], 40],
  [['g', '0', 'h'], 10],
  [['g', '0', 'i'], 20],
  [['g', '1', 'j'], 30],
  [['g', '2'], 40]
]
*/

总结

恭喜你!你已经完成了遍历对象实验。你可以在 LabEx 中练习更多实验来提升你的技能。

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