Обход объекта

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

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим концепцию создания генераторной функции, которая обходит все ключи заданного объекта с использованием рекурсии. Цель этого практического занятия - дать студентам возможность получить на практике понимание того, как использовать выражения yield и yield* в сочетании с циклами 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, добавляя текущий ключ к массиву ключей.

  5. В противном случае yield массив ключей, представляющий текущий путь и значение заданного ключа.

  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, чтобы улучшить свои навыки.