Чи має JavaScript оцінку “короткого замикання”?

Я хотів би знати, чи має JavaScript оцінку "короткого замикання", як && Operator у C #. Якщо ні, я хотів би знати, чи є якийсь обхідний шлях, який має сенс прийняти.

Так, JavaScript має оцінку "короткого замикання".

if (true == true || foo.foo){
    // Passes, no errors because foo isn't defined.
}

ДЕМО в прямому ефірі

if (false && foo.foo){
    // Passes, no errors because foo isn't defined.
}

ДЕМО в прямому ефірі

Ця відповідь детально описує, як коротке замиканняпрацює в JavaScript, з усіма причепами, а також відповідними темами, такими як пріоритет оператора, якщо ви шукаєте швидке визначення і вже розумієте, як працює коротке замикання, я б рекомендував перевірити інші відповіді.

Те, що ми (думали, що ми) знали до цього часу:

Спочатку давайте перевіримо поведінку, яку ми всі знайомі, всередині if()блоку, де ми використовуємо, &&щоб перевірити, чи є ці дві речі true:

if (true && true) {
   console.log('bar');
} 

Тепер ваш перший інстинкт, мабуть, полягає в тому, щоб сказати: "Ах, так, досить просто, код виконує оператор, якщо обидва expr1і expr2оцінюються як true"

Ну, так і ні. Ви технічно правильні, саме таку поведінку ви описали, але це не зовсім так, як оцінюється код, і нам потрібно буде глибше заглибитися, щоб повністю зрозуміти.

Як саме інтерпретується &&та ||?

Пора заглянути "під капот javascript розглянемо цей практичний приклад:

function sanitise(x) {
  if (isNaN(x)) {
    return NaN;
  }
  return x;
}

let userinput = 0xFF; // as an example
const res = sanitise(userinput) && userinput + 5

console.log(res);

Ну результат 260... але чому? Щоб отримати відповідь, нам слід зрозуміти, як працює оцінка короткого замикання.

За визначенням MDN&& оператор expr1 && expr2виконується followingly:

Якщо expr1їх можна перетворити true, повертається expr2; інше, повертається expr1.

Отже, це означає, що на нашому практичному прикладі const resоцінюється наступним чином:

1. Виклик expr1-sanitise(0xFF)
2. 0xFF є дійсним шістнадцятковим числом для 250, інакше я б повернув NaN
3. expr1Повернув «truthy» значення, час виконання expr2 ( в іншому випадку я б зупинити , як NaNце falsy)
4. Оскільки userinputце істинний (число), я можу додати +5до нього

• "Істинно" означає, що вираз можна оцінити як істинний. Ось список truthy і falsy виразів.

Отже, тут ми змогли уникнути додаткових ifблоків та подальших isNaNперевірок простим використанням &&оператора.

Як це насправді працює:

До теперішнього часу ми повинні мати принаймні уявлення про те, як коротке замиканняпрацюють оператори. Загальне правило:

• (some falsy expression) && expr оцінить до хибного виразу
• (some truthy expression) || expr буде оцінювати до правдивого виразу

Ось ще кілька прикладів для кращого розуміння:

function a() { console.log('a'); return false; }
function b() { console.log('b'); return true; }

if ( a() && b() ){
     console.log('foobar'); 
}

//Evaluates a() as false, stops execution.

function a() { console.log('a'); return false; }
function b() { console.log('b'); return true; }

if ( a() || b() ){
     console.log('foobar'); 
}

/* 1. Evaluates a() as false
   2. So it should execute expr2, which is `b()`
   3. b() returned as true, executing statement `console.log('foobar');`
*/

Остання остання настирлива, але дуже важлива річ [Пріоритет оператора]:

Приємно, сподіваємось, ви звикли! Останнє, що нам потрібно знати, це правило про пріоритет оператора, тобто:

• &&Оператор завжди виконується до ||оператора.

Розглянемо наступний приклад:

function a() { console.log('a'); return true;}
function b() { console.log('b'); return false;}
function c() { console.log('c'); return false;}

console.log(a() || b() && c());

// returns a() and stops execution

Це повернеться як, можливо, заплутано для когось як a(). Причина досить проста, це просто наш погляд, який нас як би обманює, тому що ми звикли читати зліва направо. Давайте розберемо те, console.log()що не, і зосередимось виключно на оцінці

true || false && false

Тепер, щоб обернути голову навколо цього:

1. Ми сказали, що &&оператор має пріоритет, тому він оцінюється як перший. Щоб допомогти нам краще уявити оцінку, подумайте про визначення

   expr1 && expr2

   Де:

   • expr2 є false
   • expr1 є true || false

2. Отже, це була хитра частина, тепер true || falseоцінюється ( expr1- ліва сторона &&).

   • Враховуючи, що ||оператор зупиняє виконання, якщо expr1 || expr2in expr1вважає істинним, expr1виконується і виконання коду.

3. Повернене значення: true

Ну .. це було досить складно, все через кілька дивних правил та семантики. Але пам’ятайте, ви завжди можете уникнути переваги оператора за допомогою ()- так само, як і в математиці

function a() { console.log('a'); return true;}
function b() { console.log('b'); return false;}
function c() { console.log('c'); return false;}

console.log((a() || b()) && c());

/* 1. The () escape && operator precedence
   2. a() is evaluated as false, so expr2 (c()) to be executed
   3. c()  
*/