JavaScript 2022 新特性
JavaScript 2022 新特性
自2023 年 3 月起，所有现代浏览器均已支持。
| 功能 | 描述 | |
|---|---|---|
| Array at() | 从数组中返回索引元素 | |
| String at() | 从字符串中返回索引元素 | |
| RegExp /d | 执行子字符串匹配 | |
| Object.hasOwn() | 检查属性是否为对象的自身属性 | |
| error.cause | 允许您指定错误原因 | |
| await import | 允许 JavaScript 模块在运行前等待需要导入的资源。 | |
| 类字段声明 | 允许在类中直接定义属性。 | |
| 私有方法和字段。 | 允许私有属性(#method 和 #field)。 |
浏览器支持
ECMAScript 2022 自 2023 年 3 月起，所有现代浏览器均支持该规范:
| Chrome 94 |
Edge 94 |
Firefox 93 |
Safari 16.4 |
Opera 80 |
| 2021年9月 | 2021年9月 | 2021年10月 | 2023年3月 | 2021年10月 |
JavaScript 数组 at()
ES2022 引入了数组方法 at():
示例
获取水果中的第三个元素:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);亲自试一试 »
获取水果中的第三个元素:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];亲自试一试 »at() 方法返回数组中指定的索引元素。
at() 方法返回与 [] 相同的值。
at() 方法自 2022 年 3 月起在所有现代浏览器中均受支持。
注意
许多语言允许使用负括号索引，例如[-1]，来访问对象/数组/字符串末尾的元素。
这在 JavaScript 中是不可能的，因为[]既用于访问数组也用于访问对象。obj[-1] 指的是键为 -1 的值，而不是对象的最后一个属性。
at() 方法在 ES2022 中引入，用于解决这个问题。
JavaScript 字符串的 at() 方法
ES2022 引入了字符串的 at() 方法:
示例
获取姓名中的第三个字母:
const name = "FreeW3C";
let letter = name.at(2);亲自试一试 »
获取姓名中的第三个字母:
const name = "FreeW3C";
let letter = name[2];亲自试一试 »at() 方法返回字符串中的一个索引元素。
at() 方法返回与 [] 相同的值。
正则表达式 d 修饰符
ES2022 添加了 /d 修饰符，用于表示匹配的开始和结束。
正则表达式修饰符用于指定不区分大小写和其他全局搜索:
| 修饰符 | 描述 | 试一试 |
|---|---|---|
| i | 执行不区分大小写的匹配 | 试一试 » |
| g | 执行全局匹配(查找所有匹配项) | 试一试 » |
| m | 执行多行匹配 | 试一试 » |
| d | 执行子字符串匹配(ES2022 新增) | 试一试 » |
Object hasOwn
ES2022 提供了一种安全的方式来检查一个属性是否是对象的自身属性。
Object.hasOwn() 类似于 Object.prototype.hasOwnProperty，但它支持所有对象类型。
错误原因
从 ECMAScript 2022 开始，Error 构造函数(及其子类，例如 TypeError、SyntaxError 等)支持一个可选的 {cause} 属性。
这允许您创建链式错误——其中一个错误包含另一个错误作为其原因。
示例 (before)
try {
// 创建一个 JSON 解析失败事件
JSON.parse("blablablabla");
} catch(err) {
let text = err.name + " " + err.message;
}
亲自试一试 »示例 (now)
try {
try {
// 创建 JSON 解析失败事件
JSON.parse("blablablabla");
} catch(err) {
// 创建一个新错误，并将原错误作为原因包含在内。
throw new Error("Failed to load JSON", {cause:err});
}
} catch(err){
let text = err.name + " " + err.message;
document.getElementById("demo").innerHTML = text;
}
亲自试一试 »JavaScript await import
JavaScript 模块现在可以在运行前等待需要导入的资源:
import {myData} from './myData.js';
const data = await myData();JavaScript 类字段声明
class Hello {
counter = 0; // Class field
}
const myClass = new Hello();
let x = myClass.counter;JavaScript 私有方法和字段
class Hello {
#counter = 0; // Private field
#myMethod() {} // Private method
}
const myClass = new Hello();
let x = myClass.#counter; // Error
myClass.#myMethod(); // Error
