在前端开发过程中，代码的逻辑性和可读性是非常重要的。为了简化代码逻辑，ES12 (也称为 ECMAScript 2021) 提供了逻辑赋值运算符，并且在某些场景下能够让代码更加简洁清晰。在本文中，我们将会深入探讨 ES12 的逻辑赋值运算符，并给出示例代码帮助大家更好地理解。
什么是逻辑赋值运算符？
逻辑赋值运算符是一种操作符，用来同时进行逻辑操作和赋值操作，它的形式是一个逻辑操作符紧跟一个等号。以下是 ES12 中的逻辑赋值运算符和对应的逻辑操作符：
- &&= (逻辑与赋值)：若左侧表达式为真，则将右侧表达式的值赋给左侧表达式；否则不进行任何操作。
- ||= (逻辑或赋值)：若左侧表达式为假，则将右侧表达式的值赋给左侧表达式；否则不进行任何操作。
- ??= (空值合并赋值)：当左侧表达式为 null 或 undefined 时，将右侧表达式的值赋给左侧表达式。
逻辑赋值运算符可以避免很多重复的代码和冗余的判断，同时还能使代码更加简洁易懂。
示例代码
下面我们将通过一些示例来展示逻辑赋值运算符的使用方法，帮助大家更好地理解这些运算符：
1. 逻辑与赋值
let a = {};
let b = { key: "value" };
a.key &&= b.key;
console.log(a.key); //undefined
a.key2 &&= b.key2;
console.log(a.key2); //undefined在上面的代码中，我们创建了两个对象 a 和 b，并给 b 添加了属性 key，接着使用逻辑与赋值将 b.key 赋给 a.key，但因为 a 对象中没有 key 属性，所以这个逻辑赋值并没有生效， a.key 的值仍然为 undefined。再次使用逻辑与赋值将 b.key2 赋给 a.key2，由于 a 对象中不存在 key2 属性，所以也没能生效， a.key2 仍然是 undefined。
2. 逻辑或赋值
let a = {};
let b = { key: "value" };
a.key ||= b.key;
console.log(a.key); //"value"
a.key2 ||= b.key2;
console.log(a.key2); //undefined在这个例子中，我们同样创建了两个对象 a 和 b，并给 b 添加了属性 key。在第一次使用逻辑或赋值时，由于 a 对象中没有 key 属性，所以 a.key 取到了 b.key 的值。在第二次使用逻辑或赋值时，因为 b 对象中也没有 key2 属性，所以 a.key2 仍是 undefined。
3. 空值合并赋值
let a = {};
let b = { key: "value" };
a.key ??= b.key;
console.log(a.key); //"value"
a.key2 ??= b.key2;
console.log(a.key2); //undefined在这个实例中，我们同样创建了两个对象 a 和 b，但这次我们使用了空值合并运算符。在第一次使用空值合并赋值时，由于 a 对象中没有 key 属性，所以 a.key 取到了 b.key 的值。在第二次使用空值合并赋值时，同样由于 b 对象中没有 key2 属性，所以 a.key2 仍是 undefined。
结论
通过以上示例，我们可以看到逻辑赋值运算符的确在某些场景下是非常有用的。同时还可以减少代码量，简化代码逻辑。但是，对于一些复杂的情况，仍然建议仔细考虑使用逻辑赋值运算符是否合适。总的来说，我们可以在 ES12 中尝试使用逻辑赋值运算符，以提高代码的可读性和简洁性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a7de1a1ce00635490eaf9