HTML5學堂-碼匠：短路，並不僅僅存在於物理學當中，JavaScript 中的邏輯操作符也有短路問題，這個問題時常作為前端（HTML5）的考點（面試）出現哦！

物理短路 - HTML5學堂

前端面試真題

var a = 1, b = 0, c = '前端 - HTML5學堂';

a || b && (c = '前端 - 碼匠');

console.log(c);

var a = 1, b = 0, c = '前端 - HTML5學堂';

(a || b) && (c = '前端 - 碼匠');

console.log(c);

案例來源於某大型互聯網公司的面試真題

考查的主要知識為“操作符的運算順序”、“賦值操作符”以及“邏輯操作符的短路問題”。

運行結果：

'前端 - HTML5學堂'

'前端 - 碼匠'

什麼鬼，結果為什麼會這樣 - HTML5學堂

JavaScript 邏輯操作符的短路問題

短路問題

短路問題，主要出現在邏輯與、邏輯或這兩個操作符當中。

邏輯與（ && ）

當邏輯與（&&）前面是0（false）時，&&後面的表達式並不會執行。

邏輯或（ || ）

當邏輯或（||）前面的表達式結果“非0”（真）時，||符號後面的表達式並不會執行。

案例分析

var a = 1, b = 0, c = '前端 - HTML5學堂';

a || b && (c = '前端 - 碼匠');

console.log(c);

案例解析：

a || b && (c='前端 - 碼匠');

該表達式當中有“邏輯與”和“邏輯或”這兩種操作符，邏輯與的優先級要優於邏輯或，因此該表達式，等價於 a || ( b && (c=‘前端 - 碼匠’))。

由於a的值為1，在布爾值當中會被轉換為true，對於邏輯或（||），一真必真，當第一個表達式為真時，第二個表達式就不再執行了，因此並沒有執行（b&& (c='前端 - 碼匠')）這句代碼，c也就沒有被賦值了。

var a = 1, b = 0, c = '前端 - HTML5學堂';

(a || b) && (c = '前端 - 碼匠');

console.log(c);

案例解析：

(a || b) && (c='前端 - 碼匠');

該表達式，先計算（a || b），該表達式的結果為true，對於邏輯與（&&）來說，只有兩個表達式均為真，最終結果才能夠為真。因此，當第一個表達式為真時，需要進行第二個表達式的執行。

因此，c='前端 - 碼匠';會被執行，c也被賦值為'前端 - 碼匠'。

這麼簡單啊 - HTML5學堂

相關面試真題

可以嘗試以下案例，加強或測試一下自己的知識。

習題1

var a = 4, b = 3;

c = (a < b) && (a = 5);

console.log(a);

習題2

var a = 2, b = 3;

c = (a < b) || (a = 5);

console.log(a);

參考答案

習題1 運行結果：

4

習題2運行結果：

2

相關知識說明

操作符優先級（由高到低）

邏輯非

前置遞增和前置遞減

算術操作符

關係操作符

邏輯與 邏輯或

條件操作符

賦值操作符

收穫滿滿 - HTML5學堂

HTML5學堂（碼匠） - https://weixin.mj216.com/