JavaScript 逻辑或 || 的妙用及相关知识普及

在 JavaScript 中，||（逻辑或运算符）是一个非常常见但又容易被忽视的运算符。它不仅能用于条件判断，还能在日常编程中提供默认值、防止错误甚至优化代码逻辑。本文将带你全面了解 || 的用法及其相关知识。

一、逻辑或的基本用法

1. 什么是 || 运算符？

|| 是 JavaScript 的逻辑运算符之一，称为“逻辑或”。它的核心功能是返回两个值中的“真值”：

• 如果第一个操作数是真值，直接返回第一个操作数。
• 如果第一个操作数是假值，返回第二个操作数。

2. 什么是真值和假值？

在 JavaScript 中，以下值被认为是假值（falsy）：

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

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

• 非零数字（如 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'

在这些例子中，如果第一个值是假值，|| 运算符就会返回后面的值。

二、|| 在代码中的常见应用

1. 提供默认值

最常见的用法之一是给可能为假值的变量提供一个默认值。比如，当函数的参数未传递时：

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. 短路特性优化代码

|| 的短路特性是指：一旦左侧操作数为真值，右侧操作数就不会被计算。这种特性可以用于优化代码逻辑：

const getData = () => {
  console.log('Fetching data...');
  return { key: 'value' };
};
const result = true || getData();
// 输出：没有输出“Fetching data...”
// 解释：因为左侧的 `true` 是真值，`getData()` 不会被调用。

三、|| 和其他逻辑运算符的对比

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';

但需要注意，|| 的逻辑并不完全等同于三元运算符，当需要区分假值（如 0 和 false）时，三元运算符更准确。

推荐：

• JavaScript
• react
• vue

到此这篇关于JavaScript 逻辑或 || 的妙用及相关知识详解的文章就介绍到这了,更多相关js 逻辑或 || 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论