Дополнительная цепочка

Вступление

🚨, прежде чем продолжить, имейте в виду, что Дополнительная цепочка не в релизе на Ecmascript (пока). TC39 имеет это в этап 4 (Законченный). Вам может понадобиться полифилл для этого.

Доступ к свойствам объекта является обычным явлением в JavaScript. Много раз эти свойства вложены. Когда вы получаете доступ к свойству на объекте, где объект отсутствует, JavaScript бросает ошибку.

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

const myObject = {
    name: "Parwinder",
    car: "Cybertruck",
    age: 42,
    computers: {
        first: {
            name: "iMac",
            year: 2017,
            spec: {
                cpu: "i7",
                ram: "16GB"
            }
        },
        second: {
            name: "MacBook Pro"
        }
    }
}

console.log(myObject.computers.first.spec.cpu); // i7
console.log(myObject.computers.second.spec.cpu); // Cannot read property 'cpu' of undefined

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

Мы пытаемся получить доступ к собственности ЦП из Spec Когда Spec даже не существует. ЦП находится на пятом уровне – все, прежде чем он может быть нулевым или неопределенным (myObject, компьютеры, второй или спецификация).

Мы решаем эту проблему, используя Если Заявление в сочетании с и && оператор.

if(myObject && myObject.computers && myObject.computers.second && myObject.computers.second.spec) {
    console.log(myObject.computers.second.spec.cpu);
}

В то время как приведенный выше скрипт работает, это не самый чистый код. Это много кода, чтобы написать, чтобы проверить на наличие нулевых/неопределенных цепочки свойств. Введите дополнительную цепочку.

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

Дополнительная цепочка со свойствами объекта

Мы можем переписать вышеприведенное Если оператор, как ниже, используя дополнительную цепочку:

myObject?.computers?.second?.spec?.cpu // undefined

// Concise and easy to read code
// or

myObject.computers.second.spec?.cpu

? Оператор короткие цирки оценка свойства объекта. Вместо того, чтобы вернуть ошибку, продолжая оценку, необязательные цепочки прекращаются, как только она находит первый неопределенный/нулевой в цепочке и возвращает неопределенное Анкет

?. работает только там, где это размещено.

В myobject.computers.second.spec? .cpu Первые три свойства должны присутствовать. Только Spec использует необязательный оператор цепочки, и если спецификация не существует, он вернется неопределенный.

Для любого из первых трех свойств отсутствие свойства приведет к ошибке. Так что используйте ? Только где что -то не является обязательным и может присутствовать или нет. Использование его повсюду может привести к тому, что ваш код молча не удастся и труднее отладки.

Пример: если Компьютеры Необязательно, но myobject Обязательно, всегда выбирает есть

myobject.computers?.

и нет

myobject? .compusters?.

Дополнительная цепочка с выражением объектов

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

console.log(myObject.computers.second?.["spec"].cpu); // undefined
console.log(myObject.computers.first?.["spec"].cpu); // i7

Дополнительная цепочка с функциями

Давайте добавим функцию в наш объект.

const myObject = {
    name: "Parwinder",
    car: "Cybertruck",
    age: 42,
    getAge: function () {
        return this.age;
    }
}

console.log(myObject.getAge()); // 42

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

console.log(myObject.getAge?.());

Необязательная цепочка гарантирует, что JavaScript действительно пытается выполнить функцию, которой не существует. Призыв никогда не происходит из -за короткого замыкания, предоставленного ? оператор.

Дополнительная цепочка с массивами

const names = ["Parwinder", "Lauren", "Leah", "Robert", "Eliu"];
console.log(names[3]); // Robert

const newEmployee = names?.[3]; // Check if names exists
console.log(newEmployee); // Robert

🚨 Необязательная цепочка не работает на левой стороне задания.

let myObject = {};
myObject?.name = "Parwinder"; // Uncaught SyntaxError

Оригинал: “https://dev.to/bhagatparwinder/optional-chaining-1a1f”