Доступ к вложенным объектам и массивам JavaScript по строке

Быстрый ответ

Для извлечения вложенных свойств объекта может быть использована следующая функция:

const getNestedValue = (obj, path) => path.split('.').reduce((o, p) => o?.[p], obj);

Пример применения этой функции:

const data = { a: { b: { c: 1 } } };
console.log(getNestedValue(data, 'a.b.c')); // Вывод: 1

Здесь применяется опциональная цепочка операций (?.), которая предотвращает возможные ошибки, связанные с undefined.

Усовершенствованный поиск с обработкой исключений

Для работы с сложной структурой данных уместно использовать конструкцию try/catch:

const safelyGetNestedValue = (obj, path) => {
  try {
    return path.split('.').reduce((o, p) => o?.[p], obj);
  } catch (error) {
    console.error(`Ошибка при попытке доступа по пути ${path}:`, error);
    return null;  // или другое значение по умолчанию
  }
};

Если возникает исключение, функция возвращает null или значение по умолчанию, а выполнение кода продолжается.

Доступ к элементам массива по индексам и к элементам с специальными ключами

Если необходим доступ к элементам, для чего неприменима точечная нотация (например, при работе с специальными символами), строку запроса следует модифицировать:

const getNestedValueWithBrackets = (obj, path) => {
  const reg = /\.|\[(\d+)\]/g; // Определяем точку или индекс в скобках
  const pList = path.replace(reg, (match, p1) => `.${p1}`).split('.');
  return pList.reduce((o, p) => o?.[p], obj);
};

const data = { a: [{ 'b.c': { d: 2 } }, 3] };
console.log(getNestedValueWithBrackets(data, 'a[0].b\\.c.d')); // Вывод: 2

Таким образом обеспечивается работа с индексами массивов и ключами, содержащими точки.

Создание настраиваемых сеттеров и значений по умолчанию

Эффективные сеттеры позволяют задавать значения по умолчанию при создании объектов:

const setNestedValue = (obj, path, value, defaultValue=null) => {
  const pList = path.split('.');
  const length = pList.length;
  pList.reduce((o, p, index) => {
    if (index === length – 1) {
      o[p] = value;
      return value;
    }
    o[p] = o[p] || defaultValue;
    return o[p];
  }, obj);
};

setNestedValue(data, 'a.1.deep.path', 4, {}); 
console.log(data.a[1]); // Вывод: { deep: { path: 4 } }

Данная функция гарантирует создание всех необходимых элементов по указанному пути в объекте.

Визуализация

Предположим, вы находитесь в сельской местности и ищете закопанное золото:

Путь к кладу: 'farmland.hills[2].cave'

Ваш планируемый маршрут выглядит вот так:

farmland = {
  meadows: [🌳, 🌷],
  hills: [🌄, 🌄, {cave: 💰}]
};

И вот как вы можете найти спрятанный клад:

1. Входим на территорию `farmland`
2. Проходим через `hills`
3. Доходим до `2`го холма (то есть до третьего)
4. Обнаруживаем в `cave` сокровище

Как видите, поиск сокровищ всегда полон приключений.

Помощь от Lodash

Используя Lodash, можно облегчить работу со своими вложенными структурами. Функция _.get() этой библиотеки поддерживает индексацию массивов и позволяет определять значения по умолчанию:

const _ = require('lodash');
const data = { a: { b: [1, { c: 3 }] } };
console.log(_.get(data, 'a.b[1].c', 'default')); // Вывод: 3, спасибо, Lodash!

Lodash – это мощный инструмент для работы с сложной структурой данных на профессиональном уровне.

Используйте современный JavaScript

Современный JavaScript предлагает множество техник для того, чтобы улучшить код, таких как деструктурирующее присваивание, которое позволяет получить вложенные переменные, и операторы расширения для получения подструктур:

const { a: { b: [firstItem, { c }] } } = data;
console.log(c); // Вывод: 3, это магия современного JS!

Учтите, что эти вещи могут быть не всегда подходящими для динамического доступа к данным.

Полезные материалы

1. Работа с объектами – JavaScript | MDN — подробное руководство по работе с объектами в JavaScript на сайте MDN.
2. Доступ к вложенным объектам и массивам в JavaScript через строковый путь – Stack Overflow — обсуждение с примерами и решениями на русском языке на Stack Overflow.
3. Документация Lodash — описание метода _.get Lodash – обязательная информация для специалистов по работе с вложенными свойствами.
4. Объекты — понятное и доступное руководство по объектам JavaScript от основ до продвинутых тем.
5. JavaScript на скорую руку — точечная запись против записи в скобках | автор Brandon Morelli | codeburst — сравнение методов доступа к свойствам объектов в JavaScript.