Как получить доступ к вложенным объектам, которые уже существуют в JavaScript

программист JavaScript

Переводчик: Front-end Xiaozhi

оригинал:JavaScript kicks.com/articles/23…

Чем больше вы знаете, тем больше вы не знаете

Ставьте лайк и смотрите снова, формируйте привычку


эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Чтобы обеспечить удобочитаемость, в этой статье используется вольный перевод, а не дословный перевод.

JavaScript — удивительная вещь. Но некоторые вещи в JavaScript действительно странные и запутанные. Один из них, когда вы пытаетесь получить доступ к вложенным объектам, вы получаете эту ошибку

Cannot read property 'foo' of undefined

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

const user = {
    id: 101,
    email: 'jack@dev.com',
    personalInfo: {
        name: 'Jack',
        address: {
            line1: 'westwish st',
            line2: 'washmasher',
            city: 'wallas',
            state: 'WX'
        }
    }
}

когда мы хотим посетитьuserвнутриnameа такжеcity

const name = user.personalInfo.name;
const userCity = user.personalInfo.address.city;

userсерединаpersonalнедоступен, структура объекта будет такой:

const user = {
    id: 101,
    email: 'jack@dev.com'
}

Теперь, если вы пытаетесь получить доступnameВы получитеCannot read property 'name' of undefinedошибка.

const name = user.personalInfo.name; // Cannot read property 'name' of undefined

Это потому, что мы пытаемся получить доступ к ключу в объектеnameхарактеристики.

const name = user && user.personalInfo ? user.personalInfo.name : null;


let city;
if (
    data && data.user && data.user.personalInfo &&
    data.user.personalInfo.addressDetails &&
    data.user.personalInfo.addressDetails.primaryAddress
   ) {
    city = data.user.personalInfo.addressDetails.primaryAddress;
}


const name = ((user || {}).personalInfo || {}).name;

Используя эту нотацию, никогда не сталкивайтесь с непрочитанным свойством undefined"nameПодход заключается в том, чтобы проверить, существует ли пользователь, и, если нет, создать пустой объект, таким образом ключи к следующему уровню всегда будут доступны из существующего объекта.

К сожалению, вы не можете использовать этот навык для посещения.Вложенный массив.

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

Метод уменьшения массива очень мощный и может использоваться для безопасного доступа к вложенным объектам.

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : null, nestedObj);
}

// 将对象结构作为数组元素传入
const name = getNestedObject(user, ['personalInfo', 'name']);

// 要访问嵌套数组，只需将数组索引作为数组元素传入。.
const city = getNestedObject(user, ['personalInfo', 'addresses', 0, 'city']);
// 这将从 addresses 中的第一层返回 city

Typy

Если вы считаете, что приведенный выше метод слишком нестандартен, вы можете использовать библиотеку Typy. Помимо безопасного доступа к вложенным объектам, он может делать много интересных вещей.

При использованииTypy, код будет выглядеть так

import t from 'typy';

const name = t(user, 'personalInfo.name').safeObject;
const city = t(user, 'personalInfo.addresses[0].city').safeObject;
// address is an array

Вот некоторые другие библиотеки, такие какLodashа такжеRamda, может это сделать. Но в легковесном фронтенд-проекте, особенно если вам нужен только один-два метода из этих библиотек, лучше выбрать другую легковесную библиотеку, либо написать свою.

Коммуникация (приглашаем вступить в группу, группа будет присылать красные конверты по рабочим дням, технология интерактивного обсуждения)

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

GitHub.com/QQ449245884…

Я Сяо Чжи, автор официального аккаунта "Moving the World",Продолжайте знакомить энтузиастов с передовыми технологиями. Я буду часто делиться тем, что я узнал и увидел, На пути продвижения, давайте подбадривать друг друга!

Обратите внимание на публичный аккаунт и отвечайте в фоновом режимеБлагосостояние, вы можете увидеть преимущества, вы знаете.

Категории