在 JavaScript 中，||（邏輯或運算符）是一個非常常見但又容易被忽視的運算符。它不僅能用于條件判斷，還能在日常編程中提供默認值、防止錯誤甚至優(yōu)化代碼邏輯。本文將帶你全面了解 || 的用法及其相關(guān)知識。

一、邏輯或的基本用法

1. 什么是 || 運算符？

|| 是 JavaScript 的邏輯運算符之一，稱為“邏輯或”。它的核心功能是返回兩個值中的“真值”：

• 如果第一個操作數(shù)是真值，直接返回第一個操作數(shù)。
• 如果第一個操作數(shù)是假值，返回第二個操作數(shù)。

2. 什么是真值和假值？

在 JavaScript 中，以下值被認為是假值（falsy）：

• false
• 0
• NaN
• null
• undefined
• 空字符串（''）

其他所有值都是真值（truthy），包括：

• 非零數(shù)字（如 1, -1）
• 非空字符串（如 'hello'）
• 對象（如 {} 或 []）

3. 示例講解

console.log(true || false); // 輸出：true
console.log(false || 'hello'); // 輸出：'hello'
console.log(0 || 42); // 輸出：42
console.log('' || 'default'); // 輸出：'default'
console.log(undefined || null || 'fallback'); // 輸出：'fallback'

在這些例子中，如果第一個值是假值，|| 運算符就會返回后面的值。

二、|| 在代碼中的常見應(yīng)用

1. 提供默認值

最常見的用法之一是給可能為假值的變量提供一個默認值。比如，當函數(shù)的參數(shù)未傳遞時：

function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}!`);
}
greet(); // 輸出：Hello, Guest!
greet('Alice'); // 輸出：Hello, Alice!

如果 name 是 undefined 或空字符串，那么默認值 'Guest' 會生效。

2. 防止報錯

當訪問一個可能不存在的對象屬性時，可以通過 || 提供默認值，避免程序崩潰：

const user = { name: 'Alice' };
console.log(user.age || 'N/A'); // 輸出：N/A

這里 user.age 是 undefined，|| 返回了 'N/A'。

3. 短路特性優(yōu)化代碼

|| 的短路特性是指：一旦左側(cè)操作數(shù)為真值，右側(cè)操作數(shù)就不會被計算。這種特性可以用于優(yōu)化代碼邏輯：

const getData = () => {
  console.log('Fetching data...');
  return { key: 'value' };
};
const result = true || getData();
// 輸出：沒有輸出“Fetching data...”
// 解釋：因為左側(cè)的 `true` 是真值，`getData()` 不會被調(diào)用。

三、|| 和其他邏輯運算符的對比

1. || 與 &&

• || 返回第一個真值，或最后一個假值。
• && 返回第一個假值，或最后一個真值。

console.log(false || 'hello'); // 輸出：'hello'
console.log(false && 'hello'); // 輸出：false
console.log('world' || 0); // 輸出：'world'
console.log('world' && 0); // 輸出：0

2. || 與三元運算符 ? :

有時可以用 || 替代簡單的三元運算符：

const value = input || 'default'; // 等價于：
const value2 = input ? input : 'default';

但需要注意，|| 的邏輯并不完全等同于三元運算符，當需要區(qū)分假值（如 0 和 false）時，三元運算符更準確。

推薦：

• JavaScript
• react
• vue

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

最新評論