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

更新时间：2024年12月07日 14:13:21 作者：Peter-Lu

本文给大家介绍了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 逻辑或 || 的妙用及相关知识普及

目录

一、逻辑或的基本用法

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

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具