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](匹配的起始和结束位置)

适用场景

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

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

相关推荐
aircrushin3 分钟前
在 Expo 中实现 Azure SMS-OTP 登录
前端·javascript·后端
Mintopia4 分钟前
🔮 点在四面体内?计算几何中的灵魂拷问与精度之战
前端·javascript·计算机图形学
Mintopia11 分钟前
🌌 渲染的秘密花园:Three.js 中 WebGLRenderer 的魔法之旅与自定义 RenderPass 技巧
前端·javascript·three.js
海天胜景23 分钟前
vue3 el-table 列数据合计
前端·javascript·vue.js
征尘bjajmd24 分钟前
vue+element-ui实现主子表
javascript·vue.js·elementui
小毛驴85044 分钟前
典型的 Vue 3 项目目录结构详解
前端·javascript·vue.js
半生过往1 小时前
Vue 项目动态接口获取翻译数据实现方案(前端处理语言翻译 vue-i18n)
前端·javascript·vue.js·i18n
德育处主任1 小时前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
yume_sibai1 小时前
Vue 插槽
前端·javascript·vue.js
GISer_Jing3 小时前
50道JavaScript基础面试题:从基础到进阶
开发语言·javascript·ecmascript