ES13(ES2022)新特性整理

一、类的静态块(Static Blocks in Classes)
  • 允许在类中定义静态初始化代码块,用于灵活初始化静态属性。

    javascript 复制代码
    class Config {
      static dbConfig;
      static {
        // 可以执行复杂的静态初始化逻辑
        try {
          this.dbConfig = loadConfigFromFile();
        } catch {
          this.dbConfig = { url: "default" };
        }
      }
    }

用途:

  • 替代静态属性直接赋值的局限性(如需要 try-catch 或循环)。
二、私有字段和方法的正式支持(Private Fields/Methods)
  • 使用 # 前缀定义真正私有的类字段和方法(外部无法访问)。

    javascript 复制代码
    class Counter {
      #count = 0; // 私有字段
    
      #increment() { // 私有方法
        this.#count++;
      }
    
      get value() {
        return this.#count;
      }
    }
    
    const counter = new Counter();
    counter.#count; // SyntaxError(无法外部访问)

对比旧方案:

  • 之前通过闭包或 Symbol 模拟私有性,ES2022 提供语言级支持。
三、顶层 await(Top-Level await)
  • 允许在模块顶层直接使用 await,无需包裹在 async 函数中。

    javascript 复制代码
    // 模块中直接使用
    const data = await fetch('https://api.example.com/data');
    console.log(data);

适用场景:

  • 模块初始化时加载依赖(如配置文件、数据库连接)。

  • 浏览器中动态导入资源。

四、Array.prototype.at()(索引访问方法)
  • 支持负数索引(从末尾开始访问),更安全的数组元素获取。

    javascript 复制代码
    const arr = [10, 20, 30];
    arr.at(0);   // 10
    arr.at(-1);  // 30(等同于 arr[arr.length - 1])
    arr.at(100); // undefined(不会报错)

优势:

  • 比 arr[arr.length - 1] 更简洁。
五、Object.hasOwn()(替代 Object.prototype.hasOwnProperty)
  • 更安全的对象属性检查方法,避免 hasOwnProperty 被覆盖的问题。

    javascript 复制代码
    const obj = { a: 1 };
    Object.hasOwn(obj, "a"); // true
    Object.hasOwn(obj, "toString"); // false(不检查原型链)

对比旧方法:

javascript 复制代码
// 旧写法可能被篡改
obj.hasOwnProperty = () => false;
obj.hasOwnProperty("a"); // false(错误结果)
六、Error.cause(错误链式原因)
  • 允许在抛出错误时指定根本原因(cause),便于调试。

    javascript 复制代码
    try {
      throw new Error("表面错误", { cause: "根因描述" });
    } catch (err) {
      console.log(err.message); // "表面错误"
      console.log(err.cause);   // "根因描述"
    }

用途:

  • 嵌套错误场景(如 API 调用失败时传递底层错误)。
七、正则表达式匹配索引(d 标志)
  • 通过 d 标志获取匹配结果的开始和结束索引。

    javascript 复制代码
    const regex = /a+/d;
    const match = regex.exec("aaab");
    console.log(match.indices[0]); // [0, 3](匹配的起始和结束位置)

适用场景:

  • 高级文本编辑器、语法高亮工具。

注:如有缺失,请联系作者或在下方评论,我尽量在第一时间补充上去!!!

相关推荐
幸运小猿8 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
速易达网络11 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
paopaokaka_luck11 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
kyriewen11 小时前
我验了 7 种 sticky 失效说法:3 种根本不成立
前端·javascript·程序员
tryCbest12 小时前
ES6 ( ECMAScript 2015)核心语法
前端·ecmascript·es6
我命由我1234513 小时前
Python 实用操作 - 文件操作(打开与关闭文件、读取文件、文件写入)
java·开发语言·前端·javascript·数据库·python·java-ee
Momo__14 小时前
你写的 import 重试,从来没生效过
前端·javascript·typescript
tryCbest14 小时前
Vue3——第 11 篇:组合式 API(上)——setup 与响应式 API 深度解析
前端·javascript·vue.js
tryCbest15 小时前
Vue3——第 13 篇:计算属性与侦听器——computed 与 watch 的进化
前端·javascript·vue.js
用户1179536547816 小时前
企业团队编程软件怎么选:AI编程工具的协作与落地能力对比
javascript