JavaScript 中实用的运算符详解：从空值合并到逻辑判断
本文系统梳理了 JavaScript 中几类常被忽视但极具实用价值的运算符。重点解析了空值合并运算符（??）与逻辑或（||）的区别，介绍了空赋值（??=）与可选链（?.）的语法特性，并深入探讨了逻辑与或、位运算及逻辑非在类型转换、条件判断和性能优化中的具体应用场景。
前言
在查阅他人编写的代码时，你是否曾遇到过一些生僻的语法结构，导致思路瞬间中断？待你理清头绪后，才意识到其中蕴含的精妙之处，仿佛曾有高手在此留下印记。
本文将逐一梳理 JavaScript 中那些既强大又具实用价值的运算符。
一、?? 空值合并运算符
初次接触时，看到两个连续的问号，脑海中或许会浮现更多疑惑。
这两个问号组成的操作符被称为空值合并操作符。其逻辑为：若第一个参数并非 null 或 undefined，则直接返回该参数；否则，返回第二个参数。
console.log(1 ?? "www.shanzhzonglei.com"); // 1
console.log(false ?? "www.shanzhzonglei.com"); // false
console.log(null ?? "www.shanzhzonglei.com"); // www.shanzhzonglei.com
console.log(undefined ?? "www.shanzhzonglei.com"); // // www.shanzhzonglei.com换言之，仅当第一个参数的值为 null 或 undefined 时，才会触发返回第二个参数的行为。
需注意，尽管在 JavaScript 中，undefined、null、数值 0、NaN、布尔值 false 以及空字符串 '' 均被视为假值，但 ?? 运算符仅针对 null 和 undefined 进行处理。
这与逻辑或操作符（||）存在显著差异。逻辑或操作符在左侧操作数为任何假值时，都会返回右侧操作数，例如处理空字符串或 0 时。
console.log(1 || 2); // 1
console.log("" || 2); // 2
二、??= 空赋值运算符
此时符号组合中又增加了一个等号，难度似乎有所提升。
空赋值运算符（??=）仅在目标值为 null 或 undefined 时才执行赋值操作。
const student = { age: 20 };
student.age ??= 18;
console.log(student.age); // 20
student.name ??= "shanguagua";
console.log(student.name); // 'shanguagua'
它与前述的空值合并运算符紧密相关：表达式 x ??= y 等价于 x ?? (x = y)。这意味着，仅当 x 的值为 null 或 undefined 时，赋值语句 x = y 才会被执行。
let x = null;
x ??= 20;
console.log(x); // 20
let y = 5;
y ??= 10;
console.log(y); // 5
三、?. 可选链操作符
可选链操作符（?.）允许开发者安全地访问嵌套对象链深处的属性，而无需显式验证链中每个引用是否有效。该操作符会自动检查属性是否为 null 或 undefined，从而使代码更加简洁优雅。
const obj = {
name: "山呱呱",
foo: {
bar: {
baz: 18,
fun: () => {},
},
},
school: {
students: [
{
name: "shanguagua",
},
],
},
say() {
return "www.shanzhonglei.com";
},
};
console.log(obj?.foo?.bar?.baz); // 18
console.log(obj?.school?.students?.[0]["name"]); // shanguagua
console.log(obj?.say?.()); // www.shanzhonglei.com
四、?: 三元运算符
该运算符也常被称为三目运算符，在实际开发中极为常见。
对于条件表达式 b ? x : y，系统首先计算条件 b 的值。若 b 为 true，则计算并返回 x 的值；否则，计算并返回 y 的值。
console.log(false ? 1 : 2); // 2
console.log(true ? 1 : 2); // 1
五、逻辑与（&&）和逻辑或（||）
首先回顾基础概念：
逻辑与（&&）：当第一个操作数为 true 时，系统将不再判断第二个操作数，因为无论第二个操作数的值如何，最终运算结果必然为 true。
在实际开发中，利用这一短路特性可实现以下操作：
1、若某条件值为 true，则执行特定函数。
function say() {
console.log("www.shanzhonglei.com");
}
let type = true;
type && say(); // www.shanzhonglei.com
2、用于判断特定值的有效性。
// 如果age大于10并且小于20才会执行
if (age > 10 && age < 20) {
console.log(age);
}
逻辑或（||）：当第一个操作数为 false（即 JavaScript 中的假值）时，系统将不再判断第二个操作数，因为此时无论第二个操作数的值如何，最终运算结果必然为 false。
在实际开发中，利用这一短路特性可实现以下操作：
1、为变量设置默认初始值。
let student = {
name: "shanguagua",
};
console.log(student.age || "www.shanzhonglei.com"); // www.shanzhonglei.com
2、用于判断特定值。
// 如果age等于10或者等于20或者等于30都执行
if (age === 10 || age === 20 || age === 30) {
console.log(age);
}
六、位运算符 & 和 |
位运算符执行按位运算，包括按位与（&）和按位或（|）。使用位运算符时会丢弃小数部分，我们可以利用 | 0 的方式对数字进行取整。此外，也可以使用 & 1 来判断数字的奇偶性。
在实际开发中，利用这一特性可实现以下操作：
1、实现数字取整。
1.3 |
(0 - // 打印出 1
1.9) |
0; // 打印出 -1
2、判断数字奇偶性。
let num = 5;
!!(num & 1); // true
!!(num % 2); // true
七、双位运算符 ~~
可以使用双位取反操作符（~~）来替代正数的 Math.floor() 函数，或替代负数的 Math.ceil() 函数。
双位取反操作符的优势在于执行速度更快。对于正数，~~ 的运算结果与 Math.floor() 相同；对于负数，其结果与 Math.ceil() 相同。
Math.floor(5.2) === 5; // true
~~3.2 === 3; // true
Math.ceil(-6.6) === -6; // true
~~-4.5 === -6; // true
七、逻辑运算符 !
逻辑非运算符（!）可将变量转换为布尔类型。null、undefined 和空字符串 '' 取反后均为 true，其余值取反均为 false。通常涉及几种用法：!、!!、!= 和 !==。
7.1 利用 ! 进行取反操作
let cat = false;
console.log(!cat); // true
7.2 利用 !! 进行类型判断
用于判断变量 a 不等于 null、undefined 且不为空字符串时，才执行相应方法。
var a;
if (a != null && typeof a != undefined && a != "") {
//a有内容才执行的代码
}
该逻辑等价于：
if (!!a) {
//a有内容才执行的代码...
}
7.3 判断两个值是否相等
通常推荐使用全不等于（!==），因为使用不等于（!=）时，0 != "" 会返回 false，原因是 JavaScript 中 0 和空字符串转化为布尔型后均为 false。因此，推荐始终使用全不等于（!==）。
let a = 0;
let b = 0;
let c = "0";
let d = '';
a != b //false
a != c // false number和string的0 被判断为相等
a != d // false 0和空字符串被判断为相等
a !== b // false
a !== c // true
a !== d // true
总结
至此，关于 JavaScript 中部分强大运算符的介绍已告一段落。如需了解更多相关内容，请搜索本站过往文章或继续浏览后续文章，感谢大家的支持！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58