通过使用逻辑赋值运算符来减少 ES11 中重复的代码-JavaScript中文网-JavaScript教程资源分享门户

前言

在编写代码的过程中，我们经常会遇到需要多次使用同一个变量的场景。在旧版 JavaScript 中，通常需要多次声明同一个变量，这样会造成代码冗余和可读性差的情况。在 ES11 中引入了逻辑赋值运算符，可以将变量声明和赋值两个操作合并到一起，从而减少代码的冗余和提高可读性。

逻辑赋值运算符是指将逻辑运算符和赋值运算符合并到一起的运算符。在 ES11 中，共有三种逻辑赋值运算符，分别是：

&&= 运算符表示当左侧变量的值为真时，才将右侧的值赋给它。例如：

let a = null;
let b = 1;

a &&= b;
console.log(a); // null

上述代码中，由于 a 的值为 null，因此不会执行赋值操作，输出结果也是 null。

再看下面的例子：

let a = true;
let b = 1;

a &&= b;
console.log(a); // 1

上述代码中，由于 a 的值为真，因此 b 的值就会被赋给 a，输出结果就是 1。

||= 运算符表示当左侧变量的值为假时，才将右侧的值赋给它。例如：

let a = null;
let b = 1;

a ||= b;
console.log(a); // 1

上述代码中，由于 a 的值为假，所以 b 的值就会被赋给 a，输出结果就是 1。

再看下面的例子：

let a = true;
let b = 1;

a ||= b;
console.log(a); // true

上述代码中，由于 a 的值为真，因此不会执行赋值操作，输出结果也是 true。

??= 运算符表示将右侧的值赋给左侧变量，仅当左侧变量的值为 null 或 undefined 时。例如：

let a = null;
let b = 1;

a ??= b;
console.log(a); // 1

上述代码中，由于 a 的值为 null，所以 b 的值就会被赋给 a，输出结果就是 1。

再看下面的例子：

let a = 2;
let b = 1;

a ??= b;
console.log(a); // 2

上述代码中，由于 a 的值不为 null 或 undefined，因此不会执行赋值操作，输出结果也是 2。

通过逻辑赋值运算符，我们可以将变量的声明和赋值操作合并到一起，从而减少代码的冗余和提高可读性。在使用时，需要注意运算符的语法和用法，以避免出现错误。

let a = null;
let b = 1;

a ??= b;
console.log(a); // 1

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64500ff6980a9b385b93c24d