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 中部分强大运算符的介绍已告一段落。如需了解更多相关内容，请搜索本站过往文章或继续浏览后续文章，感谢大家的支持！

JavaScript 中实用的运算符详解：从空值合并到逻辑判断

前言