Мы можем сократить наши условные операторы в JavaScript

Работая с JavaScript, я все еще пишу много условных операторов каждый день, и держу пари, что вы тоже. Вот что вы можете написать лучше условных выражений.

Понимание правды и лжи

Каждому значению в JavaScript присуще логическое значение, обычно называемое правдивым или ложным.

Ложь

Вот краткий список ценностей, которые являются ложной вежливостью.

  • false
  • null
  • 0
  • NaN (не число)
  • '' или "" (пустая строка)
  • undefined

Правда

Все остальное правда. Это включает:

  • '0' (строка, содержащая один ноль)
  • 'false' (строка, содержащая текст «false»)
  • [] (пустой массив)
  • {} (пустой объект)
  • function(){} («пустая» функция)

Имейте в виду, что массивы и объекты, даже пустые массивы и объекты, всегда правдивы.

Эквивалентность и идентичность

Эквивалентность

Эквивалентное значение, если оно такое же, но другого типа и проверяется с помощью ключевого слова ==.

10 == '10' // true

empty string равно false (но не идентично).

'' == false // true

It is falsy.

if (!‘’) {
    return 'I am false.'
}

Личность

Идентичные значения означают, что они должны быть одного типа.

10 === '10' // false
10 === 10 // true

Массивы и объекты

Поскольку массивы и объекты всегда правдивы, мы должны найти другой способ проверить пустоту с помощью [] .length или Object.keys ({}). Length, который даст вам либо 0, либо хорошее правдивое число.

if (array && array.length) {
    // not empty
}

Сократите условные операторы в JavaScript

Нам нужно понимать ложные и правдивые ценности. Они важны, потому что вы можете сократить многие длинные выражения.

Например: нам не нужно знать, дата это или название сертификата. Все, что нам нужно знать, это то, что ценность существует и что-то в ней есть.

const​ student = {​ 
    name: ​'Bob’​,​ 
    equipmentTraining: ​''​,​ 
}
if​(!student.equipmentTraining) {​
    return​ ​'Not authorized to operate machinery'​
}

Может быть легко непреднамеренно создать ложное значение.

Наиболее частая проблема возникает, когда вы проверяете наличие в массиве, проверяя индекс значения. Например: здесь 0 - ложь.

[“a”, “b”, “c”].indexOf(“a”)
<< 0 // which is falsy

Что делать, если вы используете следующее выражение (здесь существует ключ «a»).

if (![“a”, “b”, “c”].indexOf(“a”)) {
    console.log(“a doesn’t exist”)
}
>> a doesn't exist

Если вы получили неопределенное или нулевое значение, может возникнуть ложное значение.

Сделайте ваш код более чистым с помощью тернарного оператора

Я всегда стараюсь сократить выражение до минимального количества символов, которое я могу, с помощью тернарного оператора.

Например, если age больше, чем 16, то разрешить человеку управлять автомобилем можно закодировать следующим образом.

var age = 19
var canDrive 
if (age > 16) { 
    canDrive = 'yes'
} 
if (age <= 16) { 
    canDrive = 'no’ 
}

Но мы можем использовать тернарный оператор как ярлык. Код выглядит намного чище.

var canDrive = age > 16 ? 'yes' : 'no'

Некоторые проблемы с новыми переменными

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

Например.

if​ (type === ​’bird’​) {​ ​
    const​ move = [​’walk’​, ​’fly’​]
} ​else​ {​ ​
const​ move = [​’walk’​]
}​ 
move // move is not defined​
<< undefined​

Итак, что нам нужно сделать перед блоком.

let​ move
​if​ (type === ​’bird’​) {​ 
    move = [​’walk’​, ​’fly’​]
} ​else​ {​ 
    move = [​’walk’​]
}

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

const​ move = type === ​’bird’​ ? [​’walk’​, ​’fly’​] : [​’walk’​]

Что такое короткое замыкание?

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

var person = {
  name: 'Jack',
  age: 34
}
console.log(person.job || 'unemployed')
// 'unemployed'

Цель здесь довольно ясна. Если у человека есть задание (в данном случае это означает, что оно определено, а не является пустой строкой), то вы хотите распечатать задание. Если это falsy, undefined или ‘’, тогда вы хотите использовать default.

Легко, правда?

Спасибо, что прочитали 😘, до свидания, и не забудьте 👏 до 50 раз и подпишитесь!

Примечание из JavaScript In Plain English

Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!

Мы также всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотите отправить в какую-либо из наших публикаций, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите быть добавлены.