Nullish Coalescive Operator – одна из тех функций, которые выглядят просто, но их может быть трудно понять. Этот урок поможет вам узнать. Это объяснит, что такое Nullish Coalescing Operator, вы, как он работает и как его использовать. Это также покажет вам несколько GotChas и как с ними иметь дело.
Проблема с логическими операторами
В течение долгого времени JavaScript поддерживал только три логических оператора. Эти операторы – Или , И и Не Анкет Эти операторы очень полезны, поскольку они позволяют вам динамически выполнять различные задачи, основываясь на текущих условиях. Проблема в том, что у этих операторов есть свои GotChas.
Логические операторы и правдивые и фальшивые ценности
Эти логические операторы хорошо работают с логический Значения, в условиях условных утверждений, например. Когда вы используете эти операторы с разными типами данных, JavaScript иногда преобразует эти типы данных в логические. Это возможно, потому что каждый тип данных в JavaScript также либо Правда или фальсификация Анкет
Обычно это не проблема, если вы работаете с правдивыми ценностями или NULL и неопределенное Анкет Оператор OR, а также, и, очень хорошо работает с обоими, нулевой и неопределенное Анкет Проблемы могут возникнуть, если вы работаете с фальшивыми ценностями, такими как 0 или "" (пустой строки). В этом случае JavaScript преобразует эти значения в ложный Анкет
Когда эти значения преобразуются в ложный Логические операторы не имеют другого варианта, кроме как возвращать значения по умолчанию. Это то, что вы не можете не ожидать и не желать. Давайте проиллюстрируем это на одном простом примере. Допустим, вы хотите получить доступ к какому -либо объекту. Если он не имеет никакого значения, вы хотите использовать какой -то дефолт. Вы можете сделать это с логическим или оператором.
Что произойдет, если это свойство имеет ценность, но это значение является фальсификацией? Просто чтобы напомнить вам, фальшивые значения в JavaScript – это ложный , 0 В -0 , 0n , "" (пустой строки), NULL , неопределенное и НАН Анкет Любая другая ценность, кроме этого, является правдой. Когда вы используете или оператор, чтобы проверить, существует ли значение, оно преобразует это значение в логическое. Если значение является фальшивным, результат будет ложный Анкет
Что если значение существует, но оно 0 или “” “? В этом случае JavaScript преобразует это значение в ложный и или оператор вернет ваше значение по умолчанию. Неважно, что на самом деле есть ценность. Единственное, что имеет значение для или оператора, это то, что значение является фальсификацией.
const user = {
name: 'Justin Lambert',
age: 0, // 0 is a falsy value
jobTitle: '', // Empty string is a falsy value
hobbies: null // Null is also a falsy value
}
// Log the value of name property
// this will work as you expect
console.log(user.name || 'Anonymous')
// Output:
// 'Justin Lambert'
// Log the value of age property
// this not will work as you expect
console.log(user.age || 29)
// Output:
// 29
// Log the value of jobTitle property
// this not will work as you expect
console.log(user.jobTitle || 'Unemployed')
// Output:
// 'Unemployed'
// Log the value of property hobbies
// this will work as you expect
console.log(user.hobbies || 'No hobbies.')
// Output:
// 'No hobbies.'
// Log the value of non-existing property height
// this will work as you expect
console.log(user.height || 'Height is unknown.')
// Output:
// 'Height is unknown.'
Исправление логических операторов Gotchas
Когда логический оператор встречает фальшивое значение, он вернет правый операнд. Это значение, которое вы на правой стороне, которую вы предоставили в качестве Это то, что произошло в примере выше, когда вы пытались получить доступ к возраст и JobTitle характеристики. Оба значения были фальшивыми, а логический оператор вернул значение по умолчанию.
Есть способ исправить это. Вы решаете эту проблему, изменив состояние. Недостатком является то, что он вводит большую сложность. В любом случае, вот это. Вы не скажете какое -то значение или какое -то значение по умолчанию. Вместо этого вы сначала проверьте, не является ли свойство ни NULL НО неопределенное , используя и оператор.
Если собственность не NULL НО неопределенное Это означает, что собственность существует. Не имеет значения, является ли ценность правдивой или фальсификации. В этот момент нет конверсии в правдивую или фальсификационную ценность, потому что условие не работает с самой ценностью. Это выглядит только в том случае, если сама свойство существует.
Если свойство существует, вы попытаетесь получить к нему доступ и вернуть его значение. В противном случае вы вернете по умолчанию. Вы можете сделать это либо с Если … иначе утверждение или Тернарный оператор Анкет Это решение будет хорошо работать как с существующими, так и не существующими значениями.
const user = {
name: 'Justin Lambert',
age: 0, // 0 is a falsy value
jobTitle: '', // Empty string is a falsy value
hobbies: null // Null is also a falsy value
}
// Log the value of name property
// this will work as you expect
console.log((user.name !== null && user.name !== undefined) ? user.name : 'Anonymous')
// Output:
// 'Justin Lambert'
// Log the value of age property
// this will finally work as you expect
console.log((user.age !== null && user.age !== undefined) ? user.age : 29)
// Output:
// 0
// Log the value of jobTitle property
// this will finally work as you expect
console.log((user.jobTitle !== null && user.jobTitle !== undefined) ? user.jobTitle : 'Unemployed')
// Output:
// ''
// Log the value of property hobbies
// this will work as you expect
console.log((user.hobbies !== null && user.hobbies !== undefined) ? user.hobbies : 'No hobbies.')
// Output:
// 'No hobbies.'
// Log the value of non-existing property height
// this will also work as you expect
console.log(user.height !== null && user.height !== undefined ? user.height : 'Height is unknown.')
// Output:
// 'Height is unknown.'
// Notes:
// first check if property is neither null nor undefined:
// user.name !== null && user.name !== undefined
// according to this condition return either property or default
// obj.someProp : 'Some default value'
Nullish Coalescing Operator на помощь
Таким образом, есть способ исправить Gotchas из фальшивых значений и логических операторов. Недостатком является то, что может сделать ваш код менее читаемым, а также менее чистым. Лучшим решением является недавно добавленный оператор Nullish Coalescing. Можно сказать, что этот оператор является ярлыком для тройного оператора с нулевой НО неопределенный Проверьте, вы только что увидели.
Это на самом деле правда. Оператор Nullish Coalescing – новый оператор JavaScript, который делает то же самое, как этот тройной оператор. Сначала проверяйте, либо операнд на левой стороне, либо нулевой или неопределенное Анкет Если это один из них, он вернет операнд на правую сторону, значение по умолчанию. В противном случае он вернет операнд на левую сторону.
Синтаксис нулечного коалесцирующего оператора прост. Есть один операнд на левой стороне. Это то, что вы хотите вернуть, если он не является нулевым или неопределенным. Тогда есть нулечный коалесцирующий оператор ( ?? ). После этого операнд на правой стороне. Это то, что будет возвращено, если то, что вы проверяете, NULL НО неопределенное Анкет
Давайте вернемся к примеру «пользователя» и используем Nullish Coaless Operator для регистрации либо существующих свойств, либо значений по умолчанию. Мы можем в основном удалить весь тройной оператор. После этого нам просто нужно заменить колонны ?? . Как вы можете видеть в примере ниже, код станет намного короче и читаемым.
// Nullish coalescing operator
// leftOperand - something you want to return
// if it is neither null nor undefined
// rightOperand - something you want to return
// if leftOperand is null or undefined
// ?? - symbol of nullish coalescing operator
// Syntax: leftOperand ?? rightOperand
const user = {
name: 'Justin Lambert',
age: 0, // 0 is a falsy value
jobTitle: '', // Empty string is a falsy value
hobbies: null // Null is also a falsy value
}
// Log the value of name property
console.log(user.name ?? 'Anonymous')
// Output:
// 'Justin Lambert'
// Log the value of age property
console.log(user.age ?? 29)
// Output:
// 0
// Log the value of jobTitle property
console.log(user.jobTitle ?? 'Unemployed')
// Output:
// ''
// Log the value of property hobbies
console.log(user.hobbies ?? 'No hobbies.')
// Output:
// 'No hobbies.'
// Log the value of non-existing property height
console.log(user.height ?? 'Height is unknown.')
// Output:
// 'Height is unknown.'
Объединение Nullish Coalescing Operator с логическими операторами
Одна вещь, которую нужно помнить, это то, что вы не можете использовать Nullish Coalescing Operator с логическими операторами напрямую. Когда вы попробуете это, JavaScript вынесет синтаксисную ошибку. Способ решить эту проблему состоит в том, чтобы обернуть логический оператор и его операндов в скобки. Затем вы добавляете нулечный коалесковый оператор и его операнда.
// This will not work null || undefined ?? 'You should see me.' // Output: // SyntaxError: Unexpected token '??' null || false ?? 'You should see me.' // Output: // SyntaxError: Unexpected token '??' true || false ?? 'You should see me.' // Output: // SyntaxError: Unexpected token '??' // This will work (null || undefined) ?? 'You should see me.' // Output: // 'You should see me.' (null || false) ?? 'You should not see me.' // Output: // false (true || false) ?? 'You still should not see me.' // Output: // true
NULLISH COALESC OPERATOR и PROCEDENT
В JavaScript есть нечто, называемое приоритетом оператора. Это указывает, как, если вы объедините несколько операторов, JavaScript будет анализировать этих операторов. Каждому оператору, когда он добавлен в языковую спецификацию, также назначает некоторое число, которое определяет этот приоритет.
Число для самого высокого приоритета в настоящее время составляет 21. Самый низкий – 1. Операторы с более высоким приоритетом оцениваются перед операторами с более низким приоритетом. Вы можете увидеть приоритет для существующих операторов в Эта таблица Анкет Что это значит для Nullish Coalescing Operator?
Оператор Nullish Coalescing имеет приоритет 5. Логический оператор или имеет приоритет 6 и 7. Это означает две вещи. Во -первых, он помещает его в нижнюю часть таблицы приоритета. Во -вторых, если вы используете оператор Nullish Coalescing в более сложном экспрессии Nullish Coalescive Operator, вероятно, будет оцениваться как последнее.
Это может привести к очень разным результатам, чем вы, возможно, хотите. Если вы хотите увеличить приоритет Nullish Coalescing Operator, вы можете обернуть его в скобках. Клаженки, или оператор группировки, имеют приоритет 21. Это самое высокое число в таблице приоритета. Это должно обеспечить достаточный импульс.
// Declare variables for calculating reward for work const hoursWorked = null; const hourlyRate = null; // Without parentheses // The * has higher precedence than nullish coalescing operator hoursWorked ?? 1 * hourlyRate ?? 25 // Output: // 0 // because hoursWorked * hourlyRate = 0 (1 * null = 0) // With parentheses // Parentheses boost precedence of nullish coalescing operator (hoursWorked ?? 1) * (hourlyRate ?? 25) // Output: // 25
Заключение: объяснил нулечный коалесцирующий оператор
Nullish Coalescing Operator выглядит просто. Это всего лишь две вопросы вопроса. Однако даже простые вещи могут быть затруднены. Я надеюсь, что этот урок помог вам понять, как работает Nullish Coalescive Operator и как использовать его для написания чистого и более безопасного кода. Я также надеюсь, что это показало вам, на что обращать внимание, когда вы его используете. Теперь попробуйте использовать его самостоятельно.
Оригинал: “https://dev.to/alexdevero/nullish-coalescing-operator-explained-8ga”