1、可选链接运算符【?.】

开发前端中经常会遇到null和未定义的属性，特别是在处理嵌套对象时，例如：

if (data && data.children && data.children[0] && data.children[0].title) {
  console.log(data.children[0].title)
}

以上代码用于API响应，必须解析JSON以确保名称存在。但是，当对象具有可选属性或某些配置对象具有某些值的动态映射时，可能会遇到类似情况，需要检查很多边界条件。

可选链接运算符可以检查嵌套属性，而不必显式搜索梯形图。"?"就是检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符，并且如果未定义任何项，它将尽早返回。

以上代码可以简化为:

let title = data?.children?.[0]?.title

对于方法调用，可以这样写：

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  
  parent.getName?.()    // parent
  parent.getTitle?.()   // 直接调用parent.getTitle()则会报错，因为parent对象上没有getTitle方法，而使用?.则会终止不会执行

此外，它还可以与无效合并运算符【??】一起使用，就是给未定义或空值提供默认值

let title = data?.children?.[0]?.title ?? '标题';
console.log(title); // 标题

2、逻辑空分配【??=】

x ??= y

逻辑空值运算符仅在nullish值（null 或者 undefined）时才将值分配给x；

此逻辑赋值运算符等效于：

x ?? ( x = y)

3、逻辑或分配【||=】

此逻辑赋值运算符仅在左侧表达式为 falsy 值（虚值） 时才赋值。falsy 值（虚值）与 null 有所不同，因为 falsy 值（虚值）可以是任何一种值：undefined，null，空字符串 (双引号 ""、单引号''、反引号 ``)，NaN，0。IE 浏览器中的 document.all，也算是一个。

x ||= y

等同于：

x || (x = y)

在想要保留现有值（如果不存在）的情况下，这很有用，否则我们想为其分配默认值。例如，如果搜索请求中没有数据，希望将元素的内部HTML设置为默认值。否则就要显示现有列表。这样就避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦点等。我们可以简单地使用此运算符来使用 JavaScript 更新 HTML：

document.getElementById('search').innerHTML ||= '<p>搜索不匹配</p>'

4、逻辑与分配【&& =】

此逻辑赋值运算符仅在左侧为真时才赋值

x &&= y

等同于：

x && (x = y)