我们继续上一篇的ES重点内容。

ES2020 ( ES11 )

1.  可选链操作符

    ● 在 JavaScript 的操作中, 我们经常会访问一些属性, 但是如果他的前置是未定义的呢 ? 是不是就会报错了呢
    ● 这个时候我们不确定他的前置是不是确实存在, 那么我们怎么办呢 ?
    ● 只能是任由他报错, 如果要做一些容错处理, 那么只能是 try catch 了, 但是这样的代码太难受了看起来
    ● 在 ES2020 中出现了一个新的运算符, 可选链运算符 ( ?. ), 帮我们解决了这个问题
   ● 意义 : 当前置是 undefined 的时候, 不在继续向后访问属性, 直接返回 undefined

2.  空值运算符 ( ?? )

● 这是一个非常简单的操作符, 和 || 操作符差不多, 但是又不太一样
● 只有当运算符左侧是 null 或者 undefined 的时候, 才会返回右侧的操作数据, 否则就返回左侧的操作数据
        || 运算符
        如果左侧为 假值 的时候, 就会返回右侧的数据
        ?? 运算符
        只有左侧为 null 或 undefined 的时候, 才会返回右侧的数据

3.  类的私有变量

    ● 在 ES2020 中, 扩展了类的私有变量
    ● 当你创建一个类以后, 你可能希望这个类在不同位置使用, 但是你又不希望类里面的某个或者某些属性可以全局使用, 而只是在类内部使用
    ● 此时, 你可以在类里面定义该属性的时候使用一个 哈希符号

4.  Promise 方法扩展 : Promise.allSettled()

    ● 当我们在使用多实例 promise 的时候, 特别是当这些 promise 实例之间还有互相依赖的关系的时候, 我们需要拿到每一个 promise 的结果
    ● 现在, ES2020 为我们提供了一个 allSettled 方法, 可以实现这个功能

5.  数据类型扩展 : bigInt

    ● 我们在 JS 的开发中, 一般不会涉及到非常大的数字, 以前我们也没有想过有一天我们也要涉及一些极其大的数字
    ● 但是当有一天我们真的遇到了, 发现我们没办法准确的把握这些数字了
    ● 因为 js 能处理的最大的数字就是 2 的 53 次方
    ● 来看下面一个例子

    ● 我们会发现, 对于一些过于大的数字, 把握的不是很准确了, 这就会导致我们的程序出现一些不可控的问题
    ● 在 ES2020 的语法规范中, 提出了一种新的数据结构, 叫做 bigInt 表示大整数, 专门用来处理过大的数字的问题
    ● 在书写的时候也是非常简单的, 只需要在数字的末尾加上一个 n, 那么该数据就表示是一个大整数类型

    ● 我们需要注意的就是, 大整数类型不能和其他数值类型进行运算

    ● 此时我们再来看到之前的例子

6.  模块化扩展 : 动态导入

    ● 以前我们的模块化实现规范, 只能是前置导入, 不管一个外部文件, 我们需要用到多少东西, 也不管我们需要在什么时候使用, 那么都需要先完整导入进来再说
    ● ES2020 我们支持了动态导入环境, 尤其是我们结合了 async 和 awiat 语法以后, 变得简单了很多
    ● 语法: import( '地址' )
    ● 例子 :
        ○ utils.js

        ○ index.js

ES2021 ( ES12 )

1.  字符串扩展 : String.prototype.replaceAll()

    ● 语法 : 字符串.replaceAll( 换下字符, 换上字符 )
    ● 作用 : 将所有换下字符全部替换

2.  数值分隔符

    ● 在书写数值的时候, 可以以 下划线(_) 作为分隔符书写
    ● 目的就是更直观地看到数字的大小

        ○ 这个数字是多少呢, 一亿 ? 十亿 ? 一百亿 ?
        ○ 好难一眼看出来

         ○ 现在呢, 是不是直观了好多
3.  逻辑运算符的赋值表达式    
    ● 以前, 我们的赋值表达式其实有 += -= 之类的内容
    ● 现在只不过是在 ES2021 中, 将 逻辑运算符与赋值表达式合作了

    ● 简单解释一下工作原理

4.  Promise 扩展 : Promise.any 方法

    ● 是 Promise 的全局静态方法之一, 可以同时放置多个 promise 实例并行执行
    ● 只要任何一个 promise 实例成功了, 那么就返回这个成功的值
    ● 如果所有的 promise 实例都失败了, 那么最终走入失败

ES2022 ( ES13 )

1.  类的字段声明

    ● 以前, 我们在书写类的时候, 只能在构造器( constructor ) 内进行字段的声明

    ● 在 ES2022 中, 我们可以直接在类中定义字段了, 消除了必须要在构造器内定义字段

2.  await 运算符扩展

    ● 以前, 我们的 await 运算符必须书写在函数内, 并且函数还有有 async 关键字
    ● 现在, 在 ES2020 的语法规范中, await 关键字可以直接在全局使用了

3.  数组扩展 : Array.prototype.at() 方法

    ● 语法 : 数组.at( 索引 )
    ● 其实就是通过索引访问数组内某一个数据
    ● 但是比我们的 数组[索引] 更强大一些

4.  数组扩展 : Array.prototype.findLast()和findLastIndex()

    ● 其实和之前的 find() 和 findIndex() 方法用法一样
    ● 只不过是从数组的末尾开始向前检索

5.  正则扩展 : 匹配索引

    ● 以前, 我们在正则匹配的时候, 只能拿到符合要求的字符串片段的开始索引
    ● 现在, 在 ES2022 的语法规范中, 我们可以给正则添加一个 d 修饰符, 来获取到符合要求的字符串片段的开始索引和结束索引

    ● 我们可以同时拿到这一段字符串的开始索引和结束索引, 分别是 [6] 和 [11]

ES2023 ( ES14 )

1.  数组方法扩展 : toReversed() 和 toSorted() 和 toSpliced()

    ● 他们的使用方法和语法于原先的 reverse() sort() splice() 是一样的
    ● 只不过, 原先的方法会直接在原始数组上操作
    ● ES2023 扩展的几个方法, 不会改变原始数组, 而是以返回值的形式返回改变后的数组
    ● 以 toReversed() 为例 :

    ● 其他的方法和 toReversed() 方法是一个道理

2.  其他

    ● ES2023 还在计划引入一些新的内容
    管道操作符 |>
        Record
        tuple
        Iteration Helpers
        Better Intl Support
    ● 只不过目前还处在计划中
    ● 等到彻底发布了, 浏览器也可以支持了, 我会再次更新, 给大家分享最新的技术点

- End -