В процессе разработки ECMAScript будет много функциональных обновлений, таких как деструкция, стрелочные функции, модули, они сильно меняют способ написания JavaScript, кому-то это может понравиться, кому-то может не понравиться, но как и каждая новая функция, мы в конце концов привыкнем к ним. В новой версии ECMAScript представлены три новых логических оператора присваивания: нулевой оператор, операторы И и ИЛИ. Появление этих операторов также надеется сделать наш код чище и лаконичнее. Вот несколько элегантных операторов JavaScript.
1. Необязательный оператор цепочки [? .]
Необязательный оператор цепочкиОн находится на стадии 4 предложения ES2020, поэтому его следует добавить в спецификацию. Он изменяет способ доступа к свойствам внутри объектов, особенно к глубоко вложенным свойствам. Он также доступен как функция в TypeScript 3.7+.
Я считаю, что большинство фронтенд-разработчиков столкнется с нулевыми и неопределенными свойствами. Динамическая природа языка JS не позволяет не столкнуться с ними. Особенно при работе с вложенными объектами часто используется следующий код:
if (data && data.children && data.children[0] && data.children[0].title) {
// I have a title!
}
Приведенный выше код предназначен для ответа API, и мне нужно проанализировать JSON, чтобы убедиться, что имя существует. Однако, когда объекты имеют необязательные свойства или некоторые объекты конфигурации имеют динамические сопоставления определенных значений, может возникнуть аналогичная ситуация с большим количеством граничных условий, которые необходимо проверить.
На этом этапе, если мы используем необязательный оператор цепочки, все становится проще. Он проверяет для нас вложенные свойства без необходимости явного поиска в лестнице. Все, что нам нужно сделать, это использовать оператор «?» после свойства для проверки нулевых значений. Мы можем использовать этот оператор в выражении столько раз, сколько захотим, и он будет возвращаться раньше, если никакие термины не определены.
для статических свойствИспользование:
object?.property
Для динамических свойствИзмените его на:
object?.[expression]
Приведенный выше код можно упростить до:
let title = data?.children?.[0]?.title;
Тогда, если у нас есть:
let data;
console.log(data?.children?.[0]?.title) // undefined
data = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao
Не проще ли так написать? Поскольку оператор завершается, как только он становится нулевым, его также можно использовать для условного вызова методов или применения условной логики.
const conditionalProperty = null;
let index = 0;
console.log(conditionalProperty?.[index++]); // undefined
console.log(index); // 0
для методаЗвонок можно написать так
object.runsOnlyIfMethodExists?.()
Например, следующееparentобъект, если мы вызовем напрямуюparent.getTitle(), он сообщитUncaught TypeError: parent.getTitle is not a functionОшибка,parent.getTitle?.()завершится и не будет выполняться
let parent = {
name: "parent",
friends: ["p1", "p2", "p3"],
getName: function() {
console.log(this.name)
}
};
parent.getName?.() // parent
parent.getTitle?.() //不会执行
Использовать с пустым слиянием
Предоставляет способ обработки undefined или предоставления значений по умолчанию для нулей и выражений. мы можем использовать??оператор, который предоставляет значение по умолчанию для выражения
console.log(undefined ?? 'codercao'); // codercao
Таким образом, недопустимый оператор объединения можно комбинировать с необязательным оператором объединения, чтобы предоставить значение по умолчанию, если свойство не существует.
let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao
Во-вторых, логическое пустое выделение (?? =)
expr1 ??= expr2
Логический нулевой оператор работает только с нулевыми значениями (nullилиundefined), значение expr1 присваивается выражению:
x ??= y
может выглядеть эквивалентно:
x = x ?? y;
это не правда! Есть тонкие различия.
Пустой оператор объединения (??) работает слева направо, если x не равнонулевое значениеВыражение в then не выполняется. Следовательно, если х неnullилиundefined, выражение никогдаyоценить. еслиyэто функция, она вообще никогда не будет вызываться. Следовательно, этот логический оператор присваивания эквивалентен
x ?? (x = y);
3. Логическое присваивание ИЛИ (|| =)
Этот логический оператор присваивания работает, только если левое выражениеложное значениеназначается, когда. Ложное значение отличается от нулевого, потому что ложное значение может быть любым: неопределенным, нулевым, пустой строкой (двойная кавычка "", одинарная кавычка '', обратная кавычка ``), NaN, 0. document.all в браузере IE тоже один.
грамматика
x ||= y
Эквивалентно
x || (x = y)
Это полезно в тех случаях, когда мы хотим сохранить существующее значение, если оно не существует, иначе мы хотим присвоить ему значение по умолчанию. Например, мы хотим установить для внутреннего HTML элемента значение по умолчанию, если в поисковом запросе нет данных. В противном случае мы хотим отобразить существующий список. Таким образом мы избегаем ненужных обновлений и любых побочных эффектов, таких как синтаксический анализ, повторный рендеринг, потеря фокуса и т. д. Мы можем просто использовать этот оператор для обновления HTML с помощью JavaScript:
document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'
4. Логика и присваивание (&& =)
Как вы могли догадаться, этот логический оператор присваивания присваивает значение только в том случае, если левая часть истинна. следовательно:
x &&= y
Эквивалентно
x && (x = y)
Наконец
На этот раз я поделюсь несколькими элегантными методами использования операторов JavaScript, сосредоточив внимание на использовании необязательных операторов цепочки, которые позволяют нам легко получать доступ к вложенным свойствам без написания большого количества кода в нашем примере. Но IE не поддерживает его, поэтому вам может понадобиться добавить плагин Babel, если вам нужна поддержка этого или более старых браузеров. Для Node.js вам необходимо перейти на версию Node 14 LTS, так как она не поддерживается в 12.x.
Если у вас также есть элегантные и элегантные навыки оператора JavaScript, пожалуйста, не скупитесь и общайтесь друг с другом в области комментариев~