今天跟大家讲下 ES2023 ～ ES2019 新特性总结*
微信扫一扫 关注微信公众号阿勇学前端
ES2023
新增两个方法：.findLast()、.findLastIndex() 从数组的最后一个元素开始查找，可以同 find()、findIndex() 做一个对比
const arr = [{value: 1}, {value: 2}, {value: 3}, {value: 4}];
// find vs findLast
console.log(arr.find(n => n.value % 2 === 1)); // { value: 1 }
console.log(arr.findLast(n => n.value % 2 === 1)); // { value: 3 }
// findIndex vs findLastIndex
console.log(arr.findIndex(n => n.value % 2 === 1)); // 0
console.log(arr.findLastIndex(n => n.value % 2 === 1)); // 2
Hashbang 语法
例如文件内有这个语法 我们之间运行这个文件
console.log("ayong");
$ ./index.js
./index.js: line 1: syntax error near unexpected token `"JavaScript"'
./index.js: line 1: `console.log("JavaScript");'
很正常，因为我们并没有指定使用何种解释器来执行上述脚本文件。Hashbang 语法是用来指定脚本文件的解释器是什么，语法规则是在脚本文件头部增加一行代码：#!/usr/bin/env node。
// #!/usr/bin/env nodeconsole.log("ayong");
注意，还需修改脚本文件的权限 chmod +x index.js，否则执行会报 permission denied: ./index.js 错误。
ES2022
class 私有化类成员：支持私有实例、私有静态类型字段、私有方法。列举实例
class MyClass {
#privateField; // 使用井号(#)开头的命名约定
constructor() {
this.#privateField = 'Private Value';
}
getPrivateField() {
return this.#privateField;
}
}
const myInstance = new MyClass();
console.log(myInstance.getPrivateField()); // 输出：Private Value
console.log(myInstance.#privateField); // 错误：无法访问私有字段
私有静态字段（Private Static Fields）：
class MyClass {
static #privateStaticField; // 使用井号(#)开头的命名约定
static setPrivateStaticField(value) {
MyClass.#privateStaticField = value;
}
static getPrivateStaticField() {
return MyClass.#privateStaticField;
}
}
MyClass.setPrivateStaticField('Private Static Value');
console.log(MyClass.getPrivateStaticField()); // 输出：Private Static Value
console.log(MyClass.#privateStaticField); // 错误：无法访问私有静态字段
私有方法（Private Methods）：
class MyClass {
#privateMethod() { // 使用井号(#)开头的命名约定
console.log('Private Method');
}
publicMethod() {
this.#privateMethod();
}
}
const myInstance = new MyClass();
myInstance.publicMethod(); // 输出：Private Method
myInstance.#privateMethod(); // 错误：无法访问私有方法
私有字段检查使用 in 操作符检测某一实例是否包含要检测的私有字段。
class Person {
#name = 'Ergonomic brand checks for Private Fields';
static check(obj) {
return #name in obj;
}
}
Top-level await以前 await 必须随着 async 一起出现，只有在 async 函数内才可用。当需要在一些文件顶部进行初始化的场景中使用时就有不支持了，顶级 await 可以解决这个问题，但它仅支持 ES Modules。
let jQuery;
try {
jQuery = await import('https://cdn-a.com/jQuery');
} catch {
jQuery = await import('https://cdn-b.com/jQuery');
}
.at() 操作符根据指定索引获取数组元素，不同的是它支持传递负数，例如 -1 获取最后一个元素。
const str = '阿勇学前端';str.at(-1)//等价于 str[str.length - 1]
Object.hasOwn(): Object.hasOwn() 方法用于检查对象自身是否具有指定的属性，而不考虑原型链。
const obj = { prop: 'value' };
console.log(Object.hasOwn(obj, 'prop')); // 输出：true
console.log(Object.hasOwn(obj, 'toString')); // 输出：false
Error Cause: Error Cause 是指 Error 对象的一个新属性，它提供了关于错误产生原因的更详细的信息。
try {
// 产生一个错误
throw new Error('Something went wrong');
} catch (error) {
console.log(error.cause); // 输出：undefined（具体的错误原因根据错误对象而定）
}
ES2021
String.prototype.replaceAll: replaceAll() 是字符串的一个新方法，用于全局替换所有匹配的子字符串。
const str = 'Hello World';const newStr = str.replaceAll('o', '0');console.log(newStr); // 输出：Hell0 W0rld
Promise.any: Promise.any() 是一个新的 Promise 方法，用于接收一个 Promise 数组，并在其中至少一个 Promise 成功时解析。
const promises = [
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
fetch('https://api.example.com/data3'),
];
Promise.any(promises)
.then((result) => {
console.log(result); // 输出：首个成功的 Promise 结果
})
.catch((error) => {
console.error(error); // 所有 Promise 都失败时的错误
});
数字分隔符: 数字分隔符是一种在数字中插入下划线以提高可读性的语法。
const number = 1_000_000;console.log(number); // 输出：1000000
Class Static Block: 类的静态块是一种在类中定义静态成员的方式，它在类的定义中位于其他静态成员之前执行。
class MyClass {
static staticField;
static {
MyClass.staticField = 'Static Value';
console.log('Static block executed');
}
}
console.log(MyClass.staticField); // 输出：Static Value
ES2020
matchAll - 匹配所有String.prototype.matchAll() 会返回正则匹配的所有字符串及其位置，相比于
const str = 'JavaScript'
const regexp = /a/g
console.log([...str.matchAll(regexp)]);
// Output:
[
[ 'a', index: 1, input: 'JavaScript', groups: undefined ],
[ 'a', index: 3, input: 'JavaScript', groups: undefined ]
]
空值合并空值合并语法使用 ?? 表示，和 || 这个语法类似，不同的是 ?? 有明确的规定，只有当左侧的值为 null 或 undefined 时才会返回右侧的值，例如，左侧是 0 也会认为是合法的。
const a = 0a || 1 // 1a ?? 1 // 0
全局对象JavaScript 可以运行在不同的环境，浏览器为 window、Node.js 为 global。为了能够统一全局环境变量，引入了 globalThis。
window === globalThis // 浏览器环境global === globalThis // Node.js 环境
ES2019
可选的 catch 参数
try {
throw new Error('this is not a valid')
} catch {
console.error(`error...`);
}
消除前后空格 ES2019 之前有一个 trim() 方法会默认消除前后空格。新增的 trimStart()、trimEnd() 方法分别用来指定消除前面、后面空格。
JavaScript '.trim() // 'JavaScript'
JavaScript '.trimStart() // 'JavaScript '
JavaScript '.trimEnd() // ' JavaScript'
****函数的 toString() 方法函数也可以执行 toString() 方法，它会返回定义的函数体代码，包含注释。
const fn = (a, b) => {
// return a + b value
const c = a + b;
return c;
}
console.log(fn.toString());
