Получение значений вложенного JSON-объекта

JavaScriptJavaScriptBeginner
Практиковаться сейчас

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

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

Введение

В этом практическом занятии мы изучим, как получать вложенные значения из JSON-объекта на основе массива ключей. Для обхода вложенной структуры объекта и получения целевого значения мы будем использовать метод reduce(). В конце практического занятия вы будете лучше понимать, как получать конкретные значения внутри сложного JSON-объекта.


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/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28264{{"Получение значений вложенного JSON-объекта"}} javascript/data_types -.-> lab-28264{{"Получение значений вложенного JSON-объекта"}} javascript/arith_ops -.-> lab-28264{{"Получение значений вложенного JSON-объекта"}} javascript/comp_ops -.-> lab-28264{{"Получение значений вложенного JSON-объекта"}} javascript/array_methods -.-> lab-28264{{"Получение значений вложенного JSON-объекта"}} javascript/higher_funcs -.-> lab-28264{{"Получение значений вложенного JSON-объекта"}} end

Как получить вложенное значение в объекте с использованием массива ключей

Для получения конкретного значения из вложенного JSON-объекта можно использовать функцию deepGet. Эта функция принимает объект и массив ключей и возвращает целевой элемент, если он существует в объекте.

Для использования функции deepGet:

  • Создайте массив ключей, которые вы хотите получить из вложенного JSON-объекта.
  • Вызовите функцию deepGet с объектом и массивом ключей.
  • Функция вернет целевой элемент, если он существует, или null, если не существует.

Вот код для функции deepGet:

const deepGet = (obj, keys) =>
  keys.reduce(
    (xs, x) => (xs && xs[x] !== null && xs[x] !== undefined ? xs[x] : null),
    obj
  );

Вот пример использования функции deepGet:

let index = 2;
const data = {
  foo: {
    foz: [1, 2, 3],
    bar: {
      baz: ["a", "b", "c"]
    }
  }
};
deepGet(data, ["foo", "foz", index]); // возвращает 3
deepGet(data, ["foo", "bar", "baz", 8, "foz"]); // возвращает null

Для начала практики программирования откройте Терминал/SSH и введите node.

Резюме

Поздравляем! Вы завершили практическое занятие по получению вложенного значения в объекте на основе массива ключей. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.