ES2016、ES2017、ES2018、ES2019、ES2020、ES2021、ES2022、ES2023 新特性概览

9,254次阅读
3 条评论

共计 3800 个字符,预计需要花费 10 分钟才能阅读完成。

提醒:本文最后更新于2025-07-07 14:42,文中所关联的信息可能已发生改变,请知悉!

ES2016(ES7)

  • Array.prototype.includes
  • 指数运算符 **

ES2017(ES8)

  • ''.padStart''.padEnd
  • Object.values
  • Object.entries
  • Object.getOwnPropertyDescriptors()
  • 函数参数列表和调用中的尾随逗号
  • Async Functions 异步函数 Async/Await
  • 共享内存 和 Atomics

ES2018(ES9)

  • rest / spread 属性允许将对象的剩余属性收集到新对象中: const {x, ...y} = data
  • 异步迭代for-await-offor await (const line of readLines(filePath)) console.log(line)
  • Promise.prototype.finally
  • 移除对“在‘带标签的模版字面量’中使用非法转义序列”的限制
  • 正则表达式
    • ?= 先行断言(lookahead):/test(?=\d)/.test('test1') => true
    • ?! 先行断言逆操作:/test(?!\d)/.test('test1') => false
    • ?<= 后行断言(lookbehind):/(?<=Roger) Waters/.test('Roger Waters') => true
    • ?<! 后行断言逆操作:/(?<!Roger) Waters/.test('Roger Waters') => false
    • 命名捕获组: const result = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.test('2018-01-01') => result.groups.year
    • s 标志 single line,使 . 符号可以匹配新行:/hi.+tom/s.test('hi,\ntom') => true
    • 使用 Unicode 属性转义 \p{…}\P{…} 扩展 Unicode 匹配范围:
    • /^\p{ASCII}+$/u.test('ABC&#x1f643;') => false
    • /^\p{Emoji}+$/u.test('&#x1f643;&#x1f643;') => true
    • /^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') => true
    • /^\p{Uppercase}$/u.test('H') => true
    • /^\p{Lowercase}$/u.test('h') => true
    • /^\p{Script=Latin}+$/u.test('hey') => true

ES2019(ES10)

  1. JSON 成为 ECMAScript 的完全子集:在以前,行分隔符(\u2028)和段分隔符(\u2029)会导致 JSON.parse 抛出语法错误异常
  2. JSON.stringify改进,对于超出 Unicode 范围的转义序列,JSON.stringify() 会输出未知字符:JSON.stringify('\uDEAD'); // '"�"'
  3. Function.prototpye.toString() 返回函数定义的内容,包括注释、空格等完整信息
  4. 增加 Array.prorptype.flatArray.prorptype.flatMap
  5. 增加 String.prototype.trimStartString.prototype.trimEnd
  6. 增加 Object.fromEntries()
  7. Symbol.prototype.description输出 Symbol 描述: const a = Symbol('lzwme'); console.log(a.description); // lzwme
  8. 可选的 catch 绑定(Catch Binding):try {} catch {}
  9. Array.prototype.sort() 使用稳定的排序算法

ES2020(ES11)

  1. 变量名前加 # 定义类私有变量
  2. 增加 Promise.allSettled
  3. ? 可选链运算符:var age = user?.info?.getAge?.()
  4. ?? 空值合并运算符:仅当左侧变量为 undefined 或 null 时,该操作符才将右侧变量赋值给左侧变量。例:var age = user?.age ?? 18
  5. Dynamic Import 动态导入: import('./b.js').then
  6. globalThis 提供一种标准化方式访问全局对象
  7. BigInt安全的进行大数整型计算:var bigIntNum = 9007199254740993n; var bigIntNum = BigInt(9007199254740);
  8. String.prototype.matchAll

ES2021(ES12)

  • String.protype.replaceAll
  • Promise.any:任何一个成功则返回成功,全部失败则返回失败(Promse.race 返回最快的一个的执行结果)
  • WeakRef:弱引用
    • new WeakRef(element) 创建对象 element 的弱引用
    • new FinalizationRegistry(heldValue => {}).register(obj, "value") 当对象 obj 被垃圾回收之后触发监听事件
  • 逻辑赋值运算符
    • &&= 且等于: 仅当左侧变量为真值(true)时,才将右侧变量赋值给左侧变量
    • ||= 或等于: 仅当左侧变量为虚值(false)时,才将右侧变量赋值给左侧变量
  • _ 数字分隔符

ES2022(ES13)

  • Class Fields
    • Class Public Instance Fields 公共实例字段
    • Private Instance Fields 私有实例字段
    • Private instance methods and accessors 私有实例方法和访问器
    • Static class fields and methods 静态公共字段和方法
    • Private static class fields and methods 静态私有字段和方法
    • Class Static Block 类静态初始化块
    • Ergonomic brand checks for Private Fields 私有字段检查
  • RegExp Match Indices: /d 标识符与 .indices
  • Top-level await
  • Array.prototype.at
  • Object.hasOwn(obj, 'key'):取代用法 Object.prototype.hasOwnProperty.call(obj, 'key')
  • Error Cause: throw new Error('failed', { cause: err });

示例:

class TestLzwme {
/** 私有实例字段 */
#count = 0;
/** 私有实例方法和访问器 */
get #getCount() {
return this.#count;
}
set #setCount(count) {
this.#count = count;
}
/** 静态字段 */
static num = 10;
/** 静态公共方法,可通过 this 访问静态字段 */
static getNum() {
return this.num;
}
/** 静态私有字段。只能在类内部通过类名访问 */
static #total = 100;
getTotal() {
return TestLzwme.#total;
}
/** 静态初始化块。可以访问和修改私有静态字段和方法 */
static {
this.#total = this.initTotal();
}
/** 私有字段检查 */
static hasCount(obj) {
return #count in obj;
}
}
// [].at()
[3, 4, 5].at(-1); // => 5

ES2023(ES14)

  • Array.prototype.findLast() 返回数组中满足提供的测试函数条件的最后一个元素
  • Array.prototype.findLastIndex() 返回数组中满足提供的测试函数条件的最后一个元素的索引
  • Hashbang 语法: 支持 #!/usr/bin/env node 指定脚本解释器为 Node.js

node-Shebang 示例:

# 新建文件 test.js 并添加可执行权限
echo > test.js
chmod u+x test.js
# 编辑 test.js 文件,内容参考如下:
#!/usr/bin/env node
console.log(123);
# 直接执行 test.js
./test.js

node-Shebang 语法更多示例:

# 传递参数
#!/usr/bin/env -S node --experimental-module
# 运行当前脚本前运行另一个脚本
#!/usr/bin/env -S node -r ./precheck.js
# 设置环境变量示例
#!/usr/bin/env -S NODE_ENV=production node
#!/usr/bin/env -S NODE_OPTIONS=--experimental-modules node
# 忽略环境变量: -i
#!/usr/bin/env -S -i node
# 全局安装了 ts-node 和 TypeScript,指定 ts-node 作为解释器
#!/usr/bin/env ts-node

更多参考

  • https://github.com/tc39/
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2019-03-25发表,共计3800字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(3 条评论)
验证码
111111 评论达人 LV.1
2020-12-02 17:21:38 回复
Google Chrome 87.0.4280.66 Google Chrome 87.0.4280.66 Windows 10 x64 Edition Windows 10 x64 Edition

:exclaim: :surprised:

 Windows  Chrome  中国重庆重庆市电信
    2020-12-02 17:26:19 回复
    Google Chrome 85.0.4183.121 Google Chrome 85.0.4183.121 Windows 10 x64 Edition Windows 10 x64 Edition

    @111111 小哥你想干嘛

     Windows  Chrome  中国广东省广州市电信
2020-09-10 09:48:34 回复
Google Chrome 85.0.4183.83 Google Chrome 85.0.4183.83 Windows 10 x64 Edition Windows 10 x64 Edition

test

 Windows  Chrome  中国广东省广州市电信