js 运算符

1、逻辑 OR 赋值运算符

逻辑 OR 赋值运算符 ||= 接受两个操作数，如果左操作数为假，则将右操作数分配给左操作数。

let myPlaylist = {songsCount: 0, songs:[]};
// 如果myPlaylist.songsCount不存在，或布尔值为false，如false，0，null，undefined，则赋值100
myPlaylist.songsCount ||= 100;
console.log(myPlaylist);     // {songsCount: 100, songs: Array(0)}

逻辑 OR 赋值运算符短路。此运算符 ||= 等效于以下使用逻辑 OR 运算符的语句。

let myPlaylist = {songsCount: 0, songs:[]};
myPlaylist.songsCount || (myPlaylist.songsCount = 100);

2、逻辑 AND 赋值运算符

如果左操作数为真，逻辑 AND 赋值运算符 &&= 仅将右操作数分配给左操作数。

let myPlaylist = {songsCount: 10, songs:[]};
// 如果myPlaylist.songsCount存在且布尔值为true（或等效true），则赋值100
myPlaylist.songsCount &&= 100;
console.log(myPlaylist);     // {songsCount: 100, songs: Array(0)}

逻辑 AND 赋值运算符也会短路。此运算符 &&= 等效于以下使用逻辑 AND 运算符的语句。

let myPlaylist = {songsCount: 10, songs:[]};
myPlaylist.songsCount && (myPlaylist.songsCount = 100);

3、空合并赋值运算符

如果左操作数为空或未定义，则空合并赋值运算符 ??= 仅将右操作数分配给左操作数。

let name = undefined ?? "leo"
let age = null ?? 18
console.log(name);   // "leo"
console.log(age);   // 18

let userDetails = {firstname: 'Katina', age: 24}
//如果userDetails.lastname为空或者未定义，则赋值'Dawson'
userDetails.lastname ??= 'Dawson';
console.log(userDetails);     // {firstname: 'Katina', age: 24, lastname: 'Dawson'}

空合并赋值运算符也会短路。此运算符 ??= 等效于以下使用空值合并运算符的语句。

let userDetails = {firstname: 'Katina', age: 24}
userDetails.lastname ?? (userDetails.lastname = 'Dawson');

与逻辑或操作符（||）不同，|| 会在左侧操作数为假值（例如 ''、0、NaN、false、undefined、null）时返回右侧操作数

let name1 = "" ?? 'leo';
let name2 = "" || 'lion';
console.log(name1);   // ""
console.log(name2);   // "lion"
 
let age1 = 0 ?? 18;
let age2 = 0 || 18;
console.log(age1);   // 0
console.log(age2);   // 18

4、可选链 ?.

可选链操作符 ( ?. ) 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明

let obj = {
    message: {
        name: 'leo',
        sayHi() {
            return 'hi';
        }
    }
}

在之前的语法中，想获取到深层属性或方法，不得不做前置校验，否则很容易命中 Uncaught TypeError: Cannot read property... 这种错误，影响整个程序的运行

let name = obj && obj.message && obj.message.name;
console.log(name);   // 'leo'
//使用可选链操作符 ( ?. )
let name = obj?.message?.name;
console.log(name);   // 'leo'

可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。

注意：可选链不能用于赋值

let obj = {};
obj?.message?.name = 'leo';   // 报错