Вы наверняка сталкивались с подобными ошибками.
Это потому, что мы пытаемсяundefined
илиnull
извлечь данные.
Решить эту задачу на самом деле очень просто, если у нас есть следующие объекты:
const a = {
b: {
c: 1
}
}
Допустим, нам теперь нужно вынутьa.b.c
, но непонятно, все ли они существуют, то код будет написан так:
if (a && a.b) {
const c = a.b.c
}
На самом деле частота появления такого кода в проекте очень высока, если уровень ценности, который нужно брать, будет слишком глубоким, код будет очень отвратительным, так можно ли решить это изящно?
Должно быть решение, которое заключается в использовании опциональной цепочки нового синтаксиса.
Этот синтаксис еще официально не выпущен, но мы можем использовать его, установив плагин Babel.
npm install --save-dev @babel/plugin-proposal-optional-chaining
После завершения установки измените файл конфигурации Babel.
{
"plugins": ["@babel/plugin-syntax-optional-chaining"]
}
Затем мы можем использовать необязательную цепочку, чтобы преобразовать приведенный выше код в этот:
const c = a?.b?.c
Babel скомпилирует такой код:
const c = a === null || a === null ? undefined : a.b === null || a.b === undefined ? undefined : a.b.c
Хотя скомпилированный код выглядит немного затянутым, написать null действительно очень элегантно и просто.
Однако в некоторых сценариях необязательная цепочка по-прежнему имеет ямки, например:
const a = {
b: {
c: false
}
}
Предположим, мы хотим взять значениеa.b.c
середина, чтобы датьc
установить значение по умолчаниюtrue
// true
const c = a?.b?.c || true
Но в этом сценарии будет ошибка, ожидаемое значение равноfalse
, полученный ответtrue
.
Решить эту проблему также очень просто, а затем ввести новый синтаксис двойной вопросительный знак. Эффект этого синтаксиса и||
аналогично, но только когда значение равноnull
илиundefined
Будет использоваться значение по умолчанию.
// false
const c = a?.b?.c ?? true
Те же двойные вопросительные знаки, а также официально не выпущенные, но также могут решить проблему с помощью конкретной установки плагина Babel, здесь не слишком много подробностей.
Вышесказанное является содержанием этой статьи.Кроме того, я чувствую, что код JS будет занят различными вопросительными знаками в будущем.
Наконец
Хоть тема и выглядит простой, но содержание расследования все же многогранно.Конечно, больше всего я хочу рассказать о fuckJS.
Если вы считаете, что контент полезен, вы можете обратить внимание на мой официальный аккаунт «Внешняя часть действительно забавная» и регулярно делиться следующими темами:
- Внешнее мало знаний, холодное знание
- Основное содержание
- Повысить эффективность работы
- персональный рост