簡單運(yùn)用

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

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

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

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

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

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

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

邏輯且

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

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

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

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

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

邏輯或

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

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

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

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

if 語句提供默認(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

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

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

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

實(shí)際上邏輯或提供默認(rèn)值才是等價于上面說到的 if 語句提供默認(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)值這一工作。

比較兩者

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

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

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

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

更多邏輯或的例子

屬性的默認(rèn)值

setTitle(options.title || 'untitled');

在給函數(shù)傳遞參數(shù)時，如果 options.title 是 null 或者其他之類的假值，就提供字符串untitled給函數(shù)。

函數(shù)結(jié)果的默認(rèn)值

function countOccurrences(regex, str) {
  return (str.match(regex) || []).length;
}

match()方法會返回一個數(shù)組或 null。得益于邏輯或(||)，在后一種請看下可以設(shè)置一個默認(rèn)值。因此，在這兩種情況下你都可以安全地訪問 length 屬性。

到此這篇關(guān)于JavaScript 邏輯且(&&)和邏輯或(||)的妙用的文章就介紹到這了,更多相關(guān)JavaScript 邏輯且(&&)和邏輯或(||)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論