55、新特性

[CodingMeUp]

https://www.zhihu.com/question/376613288

[CodingMeUp]

ES 2020

1. 对象Optional Chaining 可选链式调用

console.log(flower.species?.lily) // 输出 undefined
flowers?.[1]
plantFlowers?.()

2. ？？ 由两个问号组成：?? 的合并操作符就可以检查变量 number 是否是一个数字，而不用写额外的代码了

let myNumber = number ?? 7
let myNumber = number || 7  区别对待 number = 0情况

3. class 引入了私有字段。要定义私有属性，必须在其前面加上散列符号：#。

class Flower {
  #leaf_color = "green";

4、Promise.allSettled 等待多个 promise 返回结果时，我们可以用 Promise.all([promise_1, promise_2])。但问题是，如果其中一个请求失败了，就会抛出错误。然而，有时候我们希望某个请求失败后，其他请求的结果能够正常返回。针对这种情况 ES11 引入了 Promise.allSettled 。成功的 promise 将返回一个包含 status 和 value 的对象，失败的 promise 将返回一个包含 status 和 reason 的对象

5、MatchAll

[CodingMeUp]

css

CSS 容器查询 @container 有点类似于 CSS 的媒体查询 @media ，只是它将根据元素的父容器（或祖先元素）的尺寸（size）或样式（style）来调整自己或自己后代元素的样式规则。在没有 CSS 容器查询，Web 开发者为了能在不同容器下调整 UI，大多都是依赖于媒体查询来做。也就是说，有了该特性之后，不需要再依赖视窗大小加添加类名的方式来调整UI

:has()伪类代表一个元素，如果作为参数传递的任何选择器至少与一个元素相匹配！也就是:has()中的选择器至少匹配一个元素时才会被选中

figure img { 
  aspect-ratio: 21 / 9; 
  border: 5px solid #3f51b5; 
}

figure:has(figcaption) img { 
  border: 5px solid #9c27b0; 
}

<!-- 未匹配，因为 figure 没有包含 figcaption 元素 -->
<figure>
  <img alt="" src="" />
</figure>

<!-- 会匹配，因为 figure 包含了 figcaption 元素 -->
<figure>
  <figcaption></figcaption>
  <img alt="" src="" />
</figure>

@layer 可以通过分层的方式，让你适当控制同源规则的级联排序。