快捷導(dǎo)航

JavaScript?邏輯且(&&)和邏輯或(||)的運(yùn)用小結(jié)

更新時(shí)間：2022年09月05日 11:45:17 作者：Enziandom

這篇文章主要介紹了JavaScript?邏輯且(&&)和邏輯或(||)的妙用?,通過(guò)實(shí)例代碼介紹了邏輯且(&&)和邏輯或(||)的詳細(xì)用法，需要的朋友可以參考下

簡(jiǎn)單運(yùn)用

邏輯且(&&)：左右必須都滿足 true 才返回 true；邏輯或(||)：左右其中一個(gè)滿足 true 就返回 true。

這樣簡(jiǎn)單的運(yùn)用是整體返回一個(gè)布爾值，適合在語(yǔ)句判斷的時(shí)候用：

let user = localStorage.getItem("user");

if (user && user.age > 10) {
  // ...
}

當(dāng) user 存在時(shí)（即 true），且 user 的 age 字段大于 10，if語(yǔ)句得到的布爾值才是 true，第一個(gè)條件句才執(zhí)行。

進(jìn)階運(yùn)用

上面都是邏輯且和邏輯或的簡(jiǎn)單使用，其實(shí)它們大有用處，還能簡(jiǎn)化代碼。運(yùn)算符操作的對(duì)象稱之為操作數(shù)（Operand)。

邏輯且

左邊操作數(shù)結(jié)果	右邊操作數(shù)結(jié)果	執(zhí)行的操作數(shù)	整體結(jié)果
true	true	右	true
false	true	左	false
true	false	右	false
false	false	左	false

根據(jù)上表格得出一個(gè)結(jié)論：

如果左操作數(shù)的結(jié)果是一個(gè) true，就執(zhí)行右操作數(shù)。
如果左操作數(shù)的結(jié)果是一個(gè) false，就執(zhí)行左操作數(shù)。

假設(shè)傳入了回調(diào)函數(shù)就執(zhí)行，否則跳過(guò)不執(zhí)行。一般想到的是用 if 條件語(yǔ)句，或者三元運(yùn)算符簡(jiǎn)化 if 條件語(yǔ)句。然而，利用邏輯且(&&)的特性可以進(jìn)一步簡(jiǎn)化代碼：

function fun(callback) {
  // ...
  callback && callback();
}

fun(() => console.log("execute callback function.")); // 控制臺(tái)打印了字符串！
fun(); // 什么也沒(méi)有發(fā)生！

邏輯或

左邊操作數(shù)結(jié)果	右邊操作數(shù)結(jié)果	執(zhí)行的操作數(shù)	整體結(jié)果
true	true	左	true
false	true	右	true
true	false	左	true
false	false	右	false

根據(jù)上表得出結(jié)論：

如果左操作數(shù)的結(jié)果是一個(gè) true，就執(zhí)行左操作數(shù)。
如果左操作數(shù)的結(jié)果是一個(gè) false，就執(zhí)行右操作數(shù)。

簡(jiǎn)而言之，邏輯或(||)一旦遇到操作數(shù)的結(jié)果是 true，就執(zhí)行這個(gè)操作數(shù)，而另一個(gè)操作數(shù)直接忽略不執(zhí)行，即“短路”。

邏輯且提供默認(rèn)值

if 語(yǔ)句提供默認(rèn)值：

function fun(x) {
  if (!x) {
    x = "default value";
  }
  console.log(x);
}

fun(undefined); // "default value"
fun("inject a value"); // inject a value

邏輯且提供默認(rèn)值：

function fun(x) {
  x = !x && "default value";
  console.log(x);
}

fun(undefined); // "default value"
fun("inject a value"); // false

邏輯且要判斷第一個(gè)操作數(shù)（左操作數(shù)）是不是 false，如果是就直接執(zhí)行第一個(gè)操作數(shù)。我本來(lái)就有默認(rèn)值要提供，但第一個(gè)操作數(shù)就已經(jīng)截?cái)嗔说诙€(gè)操作數(shù)的執(zhí)行。上面的代碼，為了保證參數(shù)提供的是假值而執(zhí)行第二個(gè)操作數(shù)的結(jié)果，導(dǎo)致傳入非假值返回的是 false。

可能是我沒(méi)有想到更好的方式，所以，我認(rèn)為邏輯且(&&)不適合用來(lái)提供默認(rèn)值。

邏輯或提供默認(rèn)值

實(shí)際上邏輯或提供默認(rèn)值才是等價(jià)于上面說(shuō)到的 if 語(yǔ)句提供默認(rèn)值的邏輯：

function fun(x) {
  x = x || "default value";
  console.log(x);
}
fun(undefined); // "default value"
fun("inject a value"); // inject a value

所以，我認(rèn)為邏輯或(||)適合提供默認(rèn)值這一工作。

比較兩者

邏輯或(||)的用處比邏輯且的用途廣。前面說(shuō)到，邏輯且(&&)不適合提供默認(rèn)值，而邏輯或(||)既適合提供默認(rèn)值，也適合做決定是否執(zhí)行回調(diào)函數(shù)等一些列工作。

改造進(jìn)階運(yùn)用 - 邏輯且的例子代碼：

function fun(callback) {
  // ...
  !callback || callback();
}

fun(() => console.log("execute callback function.")); // 控制臺(tái)打印了字符串！
fun(); // 什么也沒(méi)有發(fā)生！