Тернарный оператор ?:
Каждые выходные я спрашиваю себя, как мне это устроить? Итак, я написал программу и запустил ее
if (hasMoney) {
console.log('周末嗨翻天');
} else {
console.log('周末睡一天');
}
Вроде бы нет проблем, но мне всегда кажется, что код немного раздут, можно ли сделать его немного проще?
После замены тернарным оператором
hasMoney ? console.log('周末嗨翻天') : console.log('周末睡一天');
смотри, когда hasMoney истинно, эй, спи денек, когда оно ложно. Этот оператор очень полезен, когда мы присваиваем значения на основе простых предикатов.
let weekendPlan = hasMoney ? '周末嗨翻天' : '周末睡一天';
Таким образом, наш код не будет заполнен большим количеством условных предложений if, и это будет слегка раздражать. Но не переусердствуйте
val = simpleCondition
? 1
: simpleConditionAgain
? 2
: simpleConditionAgainAndAgain
? 3
: 4;
Приведенный выше пример немного напрягает ради показухи, и он немного плох с точки зрения читабельности кода, даже если его заменить условным предложением if, то это не очень красиво, в этом случае можно используйте оператор switch или идею дизайна шаблона стратегии для оптимизации.
Логический оператор И &&
Если у вас есть деньги, вы можете отправиться в небо по выходным, но если у вас нет денег, вы не придумали, что делать (хотя вы ничего не можете сделать, если у вас нет денег), нормальная работа это:
if (hasMoney) {
console.log('周末嗨翻天');
}
В это время используйте тернарный оператор, чтобы переписать слова
hasMoney ? console.log('周末嗨翻天') : undefined;
Немного странно, что мы должны писать undefined, чтобы сообщить программе, что делать, когда условие ложно. Этой проблемы можно избежать, используя логический оператор И.
hasMoney && console.log('周末嗨翻天');
Логический оператор И будет использовать логическую функцию, чтобы определить, является ли каждое условие (выражение) истинным.Когда все условия оценки истинны, будет возвращен результат операции последнего выражения; но если какое-либо условие оценки ложно, если это так, он вернет первый результат операции, условие оценки которого ложно
true && console.log('It is true'); // It is true
true && false && console.log('It is true'); // 返回 false
true && 0 && console.log('It is true'); // 返回 0
true && undefined == null && console.log('It is true'); // It is true, 表达式undefined == null的运算结果为true
true && undefined === null && console.log('It is true'); // 返回 false, 表达式undefined === null的运算结果为false
Поэтому при использовании логического оператора AND для рендеринга элементов в реакции вы должны обратить внимание
render() {
return (
<Fragment>{
data.length && data.map(item => <span>{ item }</span>)
}</Fragment>
);
}
// 当没有数据的时候，页面会渲染出一个0
Исходное намерение приведенного выше примера состоит в том, чтобы визуализировать данные, когда они есть, и ничего не делать, когда данных нет. Но логический оператор И вернет результат первого выражения, которое является ложным, что приведет к 0!
логический оператор ИЛИ ||
Говоря о логическом операторе И, мы должны упомянуть его хорошего друга: логический оператор ИЛИ. Рассмотрим следующий сценарий
// 当自身为undefined时，赋值为0，否则还是赋值为自身
val = val !== undefined ? val : 0;
При использовании тернарного оператора для обработки логики приведенного выше примера нам нужно явно определить, является ли val пустым, а затем решить, должна ли переменная val быть равна самой себе. Затем в соответствии с принципом сохранения там, где мы можем сохранить, мы можем использовать логический оператор ИЛИ
val = val || 0;
Логический оператор ИЛИ, который передаст результат первого выражения в булевую функцию, если булева функция возвращает истину, она вернет результат операции, в противном случае будет пробовать следующее до конца, если все выражения имеют Если логическое значение, соответствующее результату операции, равно false, возвращается результат операции последнего выражения.
Поэтому этот оператор очень полезен для обратной совместимости и для установки значений параметров функции по умолчанию.
// ES5设置函数默认值
function testFunc(arg1) {
arg1 = arg1 || 1;
// do something else
}
let a = 1,
b = 2,
c = null;
console.log(a || b || c); // 1
console.log(0 || b || c); // 2
console.log(0 || false || c); // null
примечание: поэтому предполагается, что логические операторы ИЛИ и логические И используются в условном операторе if, но на самом деле они только возвращают результат операции выражения, а затем неявно вызывают логическую функцию для получения конечного логического значения .
Отрицательная логика!
Как упоминалось выше, в выходные с деньгами можно делать все, что угодно, а в выходные без денег можно выбрать только один день для сна. В этом случае, если мы используем hasMoney в качестве критерия, наш код выглядит так
hasMoney === false && console.log('周末睡一天');
Когда hasMoney не является логическим значением, оператор hasMoney === false всегда будет возвращать false, создавая иллюзию денег. Таким образом, мы должны преобразовать hasMoney в логическое значение, чтобы судить, просто оператор отрицания может делать для нас обе вещи одновременно.
!hasMoney && console.log('周末睡一天');
Таким образом, вы можете спать в течение дня, когда у вас нет денег.
Оператор отрицания может преобразовать нелогическое значение в логическое значение и инвертировать
!true && console.log('666'); // 返回false
!!true && console.log('666'); // 666
{} && console.log('666'); // 报错
!{} && console.log('666'); // 返回false
!!{} && console.log('666'); // 666
побитовый оператор отрицания ~
Чтобы присоединиться, нам нужно определить, существует ли элемент в массиве.В ES6 можно использовать включения.
let arr = ['we', 'are', 'the', 'BlackGold', 'team'];
arr.includes('the') && console.log('in'); // in
Но у этого метода есть большое ограничение: нет возможности передать функцию фильтра.
let arr = ['we', 'are', 'the', 'BlackGold', 'team'];
arr.includes(element => element === 'the') && console.log('in'); // 返回false
В этом случае мы обычно можем использовать метод findIndex.
let arr = ['we', 'are', 'the', 'BlackGold', 'team'];
arr.findIndex(element => element === 'the') !== -1 && console.log('in'); // in
Поскольку индекс, возвращаемый методом findIndex, начинается с 0, мы должны решить, не равен ли возвращенный индекс -1 или больше или равен 0. Если используется оператор побитового отрицания, его не нужно будет отображать для оценки.
let arr = ['we', 'are', 'the', 'BlackGold', 'team'];
~arr.findIndex(element => element === 'we') && console.log('in'); // in
~arr.findIndex(element => element === 'the') && console.log('in'); // in
Оператор побитового отрицания, как следует из названия, должен инвертировать каждый бит переменной: 0->1, 1->0.
console.log(~-1); // 0 转换为Boolean值即为false
console.log(~0); // -1 转换为Boolean值即为true
console.log(~1); // -2 转换为Boolean值即为true
Эпилог
Серия статей JavaScript Sao Operation в основном суммирует некоторые полезные функции и методы JavaScript для общения и обучения. Если вам это не нравится, не распыляйтесь. Если есть какие-либо ошибки, пожалуйста, поправьте меня.
Статьи по Теме:
Обход, перечисление и итерация операции JavaScript Sao (часть 1)
Обход, перечисление и итерация операции JavaScript Sao (часть 2)
@Author: PaperCrane