После ES2015 / ES6 JavaScript каждый год выпускает новые функции и облегчает нашу жизнь как разработчиков. В прошлом году в ES2020 / ES11 они выпустили некоторые функции, такие как BigInt, import.meta, import (), String.prototype.matchAll, Promise.allSettled, globalThis, для -в механике, необязательном связывании и нулевом операторе слияния.
В этой статье я подробно объясню операторы необязательного связывания и нулевого объединения с примерами.
Что такое дополнительный оператор цепочки?
«Оператор Необязательная цепочка (?.) обращается к значениям, не проверяя, существует ли родительский объект. Вместо того, чтобы возвращать ошибку, он вернет null или undefined »
Разберемся на примере. Здесь у нас есть два объекта studentA и studentB, завернутые в массив студентов.
На двух вышеупомянутых объектах мы можем заметить, что форма объектов не одинакова. Такая ситуация случается в любое время в реальном проекте, который полагается на внешний API. Мы не можем контролировать форму ответа, получаемого через API. Здесь я создал цикл for и console, чтобы получить скучное название темы. Но тут мы получаем следующую ошибку и наш код сломался.
Uncaught TypeError: Cannot read property ‘subjectName’ of undefined
Итак, что здесь произошло, если мы проверим studentA
student.boaringSubject => undefined
Теперь с этим неопределенным значением мы пытаемся получить boaringSubject,
undefined.subjectName => error
Это нарушает код, потому что undefined не является объектом.
Чтобы решить эту ошибку, до ES2020 / ES11 мы использовали Короткое замыкание.
Вывод:
undefined
History
Итак, что здесь произошло, если первая часть короткого замыкания имеет истинное значение, тогда она переходит к следующей части, и если первая часть является значением Falsy (undefined, null, 0, NaN, false), тогда она не будет работать Вторая часть.
Но мы видим в приведенном выше коде, что у нас может возникнуть проблема с большей вложенностью в наш проект из-за короткого замыкания. Наш Код становится длинным, если нам нужно получить свойство из большого объекта. Вот почему на сцену вышло необязательное связывание.
Вывод:
undefined
History
Что здесь делает оператор Optional Chaining (?.)? Он проверил свойство родительского объекта, и если это истинное значение, то он выдаст следующее значение свойства, в противном случае он выдаст undefined или null вместо ошибки.
Необязательный оператор цепочки с вызовом функции
Прежде всего, мы добавляем один метод с именем speak () в наш объект studentA, а затем вызываем его в цикле for.
Вывод:
Maths is my favourite subject
Uncaught TypeError: student.speak is not a function
Наш код ломается, потому что во втором объекте studentB нет метода Speech. Итак, как мы решаем эту ошибку до ES2020 / ES11? Давайте решим с помощью короткого замыкания.
Вывод:
Maths is my favourite subject
Здесь на этот раз мы не получаем ошибок типа и ничего не ломается. Теперь перейдем к оператору Optional Chaining.
Вывод:
Maths is my favourite subject
Таким образом, мы можем писать очень чистый и простой код с этим оператором вместо того, чтобы выполнять вложенную цепочку.
Необязательное связывание с массивом
Давайте добавим массив в объект studentB и попробуем прочитать значения из массива.
Здесь мы получим следующую ошибку.
Uncaught TypeError: Cannot read property ‘0’ of undefined
Поскольку у studentA нет оценок, он нарушает наш код. Чтобы решить эту проблему, мы используем короткое замыкание.
Вывод:
undefined
65
Согласно приведенным выше примерам, у нас такая же проблема с вложенной цепочкой. Давайте попробуем использовать Дополнительный оператор цепочки.
Вывод:
undefined
65
Итак, по сути, Optional Chaining Operator - это альтернативное решение вложенной цепочки, в котором мы можем писать чистый и шорткод.
Что такое нулевое слияние?
«Оператор объединения с нулевым значением (??) - это логический оператор, который возвращает его правый операнд, если его левый операнд равен null или undefined, в противном случае возвращает его левый операнд »
Разберемся на примере.
Здесь у нас есть объект student, и мы будем консультировать каждое значение ключа и понимать важность оператора Nullish Coalescing.
console.log(student.name || ‘Does not have name’)
Вывод:
Alex
Это также оператор короткого замыкания ИЛИ, поэтому, если с объектом что-то не так, будет выдано сообщение об ошибке «Нет имени».
console.log(student.height || ‘Did not tell us height’)
Вывод:
Did not tell us height
Поскольку значение null является ложным, значение student.height не вычисляется, поэтому будет выдано сообщение об ошибке.
console.log(student.marks || ‘still in checking’)
Вывод:
still in checking
Итак, здесь 0 - ложное значение, и поэтому отображается сообщение об ошибке. Но мы хотим 0, потому что 0 рассматривается как отметка. Чтобы решить эту проблему, мы используем нулевой оператор объединения (??);
console.log (student.marks ?? "все еще проверяется")
Вывод:
0
?? Оператор проверяет левую часть, и если она не определена или равна нулю, он вычислит вторую часть, в противном случае - нет.
console.log(student.hasEnrolledForNextClass || ‘Depend on test result’)
Вывод:
Depend on test result
console.log(student.hasEnrolledForNextClass ?? ‘Depend on test result’)
Вывод:
false
Таким образом, это очень полезно, когда мы хотим различать ложные значения. Это даст вам только правую сторону, когда левая сторона имеет неопределенные и нулевые значения. Любое другое значение в левой части будет сообщать о том, что мы определяем в правой части.
Заключение
Надеюсь, вы нашли это полезным и, возможно, узнали что-то новое сегодня. Необязательный оператор цепочки и нулевые операторы объединения принесли много преимуществ с точки зрения простоты кода и логики. Сегодня мы, разработчики, используем эти операторы, чтобы избежать вложенных цепочек и сделать наш код простым, легким для чтения и обслуживания.
Больше контента на plainenglish.io
