JavaScript常用逻辑运算符

JavaScript常用逻辑运算符

在 JavaScript 中，逻辑运算符用于对布尔值进行操作，或根据条件返回布尔值。以下是常用的逻辑运算符及其用法：

1. 逻辑与 (&&)

• 功能：如果所有操作数都为 true，则返回 true；否则返回 false。
• 短路行为：如果第一个操作数为 false，则直接返回 false，不会计算第二个操作数。

示例

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// 短路行为
const value = null;
console.log(value && value.property); // null（不会报错）

2. 逻辑或 (||)

• 功能：如果至少有一个操作数为 true，则返回 true；否则返回 false。
• 短路行为：如果第一个操作数为 true，则直接返回 true，不会计算第二个操作数。

示例

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// 短路行为
const defaultValue = "Default";
const userInput = "";
console.log(userInput || defaultValue); // "Default"

3. 逻辑非 (!)

• 功能：对操作数取反。如果操作数为 true，则返回 false；反之亦然。
• 双非 (!!)：将值转换为布尔值。

示例

console.log(!true); // false
console.log(!false); // true

// 双非操作
console.log(!!0); // false
console.log(!!1); // true
console.log(!!"Hello"); // true

4. 空值合并运算符 (??)

• 功能：如果左侧操作数为 null 或 undefined，则返回右侧操作数；否则返回左侧操作数。
• 与 || 的区别：?? 仅对 null 和 undefined 生效，而 || 对所有假值（如 0、""、false）生效。

示例

const value = null;
console.log(value ?? "Default"); // "Default"

const zero = 0;
console.log(zero ?? 10); // 0
console.log(zero || 10); // 10

5. 可选链运算符 (?.)

• 功能：如果左侧操作数为 null 或 undefined，则返回 undefined；否则继续访问属性或调用方法。
• 用途：避免访问深层嵌套属性时因 null 或 undefined 导致的错误。

示例

const user = { name: "Alice", address: { city: "New York" } };

console.log(user.address?.city); // "New York"
console.log(user.contact?.phone); // undefined（不会报错）

6. 三元运算符 (? :)

• 功能：根据条件返回两个值之一。
• 语法：条件 ? 表达式1 : 表达式2
  • 如果条件为 true，返回 表达式1 的值。
  • 如果条件为 false，返回 表达式2 的值。

示例

const age = 18;
const message = age >= 18 ? "成年人" : "未成年人";
console.log(message); // "成年人"

7. 逻辑运算符的优先级

逻辑运算符的优先级从高到低依次为：

逻辑非 (!)

逻辑与 (&&)

逻辑或 (||)

三元运算符 (? :)

示例

const result = true || false && false;
console.log(result); // true（&& 优先级高于 ||）

8. 逻辑运算符的短路行为

逻辑运算符的短路行为可以用于条件执行或默认值设置。

示例

// 条件执行
function logMessage(message) {
    message && console.log(message); // 仅在 message 为真时执行
}

// 默认值设置
const config = userConfig || defaultConfig;

总结

运算符	功能描述	示例
&&	逻辑与，全部为真时返回真	true && false → false
||	逻辑或，至少一个为真时返回真	true || false → true
!	逻辑非，取反操作	!true → false
??	空值合并，仅对null 和 undefined 生效	null ?? "Default" → "Default"
?.	可选链，避免访问null 或 undefined	user?.address?.city → undefined
? :	三元运算符，根据条件返回不同值	age >= 18 ? "成年人" : "未成年人"

逻辑运算符是 JavaScript 中处理条件逻辑的重要工具，合理使用可以提高代码的简洁性和可读性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github