簡單運用

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

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

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

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

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

進階運用

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

邏輯且

根據上表格得出一個結論：

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

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

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

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

邏輯或

根據上表得出結論：

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

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

邏輯且提供默認值

if 語句提供默認值：

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

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

邏輯且提供默認值：

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

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

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

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

邏輯或提供默認值

實際上邏輯或提供默認值才是等價于上面說到的 if 語句提供默認值的邏輯：

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

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

比較兩者

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

改造進階運用 - 邏輯且的例子代碼：

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

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

更多邏輯或的例子

屬性的默認值

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

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

函數結果的默認值

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

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

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

最新評論