javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js 短路运算符

js中短路运算符(|| , && ，??=，&&=，||=)

作者：叫兽~~

本文主要介绍了js中短路运算符(|| , && ,??=,&&=,||=),帮你轻松简化if条件判断,掌握逻辑赋值运算符,写出更优雅的代码

在 JavaScript 中，经常会使用到短路运算符，主要是逻辑与（&&）和逻辑或（||）。

📌 类型转换规则基础

在理解短路运算前，需要先掌握不同数据类型转换为布尔值（Boolean）的基本规则：

1. 逻辑与（&&）的运算规则

逻辑与运算遵循“找假”逻辑：只要遇到假值就停止并返回该假值；如果全部为真，则返回最后一个值。

  1. 两边都为数字或字符串数字：直接返回右边的值。
  2. 左侧转换为布尔值为 true**：无论右侧是真是假，都返回右边**的值。
  3. 左侧转换为布尔值为 false**：直接返回左边**的值（若左侧为 null / NaN / undefined，则直接返回对应的 null / NaN / undefined）。

示例代码

let c = 7 && 6;
console.log(c); // 返回 6

let a1 = true && 6;
console.log(a1); // 左边为真，返回右边的 6

let a2 = 6 && true;
console.log(a2); // 返回 true

let b1 = false && 6;
console.log(b1); // 左边为假，返回左边的 false

let bq1 = 6 && false;
console.log(bq1); // 返回 false

// --- 无空格字符串 ---
let dde1 = !"" && 5;
console.log("dde1:" + dde1); // !"" 为 true，返回右边的 5

let daee1 = "" && 5;
console.log("daee1:" + daee1); // "" 为假，返回左边的空字符串 ""

// --- 带空格字符串 ---
let dde2 = !" " && 5;
console.log("dde2:" + dde2); // !" " 为 false，返回左边的 false

let daee2 = " " && 5;
console.log("daee2:" + daee2); // " " 为真，返回右边的 5

💡 使用场景

短路运算符常用于简化 if 条件判断，例如在条件满足时才执行后续的函数或 Vuex action：

⚠️ 注意：如果代码风格是不加分号 ; 的（例如常见的 ESLint 配置），当多条件语句以小括号 () 开头时，必须注意前面添加分号，否则可能会引发语法解析报错。

// 场景一：判断 this 里是否有 phone 的值，存在时才触发 dispatch 获取验证码
let { phone } = this;
phone && (await this.$store.dispatch("getCode", phone));

// 场景二：多条件同时满足时才执行注册
let { phone, code, password, password1 } = this;
(phone && code && password && password1) && 
  this.$store.dispatch('userRegister', { phone, code, password, password1 });

2. 逻辑或（||）的运算规则

逻辑或运算遵循“找真”逻辑：只要遇到真值就停止并返回该真值；如果全部为假，则返回最后一个值。

  1. 两边都为数字或字符串数字：直接返回左边的值。
  2. 左侧转换为布尔值为 true**：直接返回左边**的值。
  3. 左侧转换为布尔值为 false**：直接返回右边**的值（无论右侧是真是假）。若两边均为 null / NaN / undefined，则返回对应的假值。

示例代码

let aac = 10 || 111;
console.log(aac); // 返回左边的 10

let aa = true || 7;
console.log(aa); // 返回左边的 true

let aaa = 7 || true;
console.log(aaa); // 返回左边的 7

let aaaa = false || 66;
console.log(aaaa); // 返回右边的 66

let aaab = 66 || false;
console.log(aaab); // 返回左边的 66

let bb = false || 6;
console.log(bb); // 返回右边的 6

console.log(!""); // 返回 true

let dd = !"" || 5;
console.log("dd:" + dd); // !"" 为 true，返回左边的 true

let da = "" || 5;
console.log("da:" + da); // "" 为 false，返回右边的 5

// --- 带空格字符串 ---
let dda = !" " || 5;
console.log("dda:" + dda); // !" " 为 false，返回右边的 5

let dae = " " || 5;
console.log("dae:" + dae); // " " 为真，返回左边的空格 " "

3. 逻辑空赋值运算符 (??=)

当变量当前值为 null 或 undefined 时，才将右侧的值赋值给该变量。

let a = null;
a ??= 10;
console.log(a); // 10

4. 逻辑与赋值运算符 (&&=)

当变量当前值转换为布尔值为 true 时，才将右侧的值赋值给该变量。

let a = 1;
a &&= 2;
console.log(a); // 2

5. 逻辑或赋值运算符 (||=)

当变量当前值转换为布尔值为 false 时，才将右侧的值赋值给该变量。

let a = 0;
a ||= 10;
console.log(a); // 10

到此这篇关于js中短路运算符(|| , && ，??=，&&=，||=)的文章就介绍到这了,更多相关js 短路运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文