ECMAScript 2022 将于今年 6 月发布,本篇带来 ES2022 肯定会出现的最重要的 4 个变化!因为这些特性已经进入了 TC39 标准化发布的 第 4 个阶段 了。
TC39 所属于 Ecma International,是一个由 JavaScript 开发者、实现者、学者等组成的团体,与 JavaScript 社区合作维护和发展 JavaScript 的标准。
闲言少叙,冲鸭~~
at() 方法
终于!ES2022 数组新增一个 at() 方法,用于根据索引去取值;
var a = [1, 2, 3];
a.at(1) // 2
a.at(-1) // 3
复制代码
我们可以通过 a.at(-1)
拿到倒数第一项;
而在这之前,拿数组/字符串最后一项是这样的:
const arr = [1,2,3,4]
arr[arr.length - 2] // 3
arr.slice(-2)[0] // 3
const str = "1234"
str[str.length - 2] // '3'
str.slice(-2)[0] // '3'
复制代码
虽然这是一个小的功能改动,但是很大的提高了 数组/字符串 核心操作的可读性;
Error cause
🎉Error cause 是第一个由中国公司(阿里巴巴 TC39 代表 legendecas)代表主导推动的 JavaScript 达到 stage 4 的新特性提案!
这个提案简单理解就是:对 Error 的来源进行一次再包装;
try {
doSomeComputationThatThrowAnError()
} catch (error) {
throw new Error('I am the result of another error', { cause: error })
}
复制代码
Error Constructor 新增了一个可选的参数 options,其中可以设置 cause
并且接受任意 JavaScript 值,把这个值赋值到新创建的 error.cause
上。
try {
return await fetch('//unintelligible-url-a') // 抛出一个 low level 错误
.catch(err => {
throw new Error('Download raw resource failed', { cause: err }) // 将 low level 错误包装成一个 high level、易懂的错误
})
} catch (err) {
console.log(err)
console.log('Caused by', err.cause)
// Error: Download raw resource failed
// Caused by TypeError: Failed to fetch
}
复制代码
顶层 await
顶层 await 允许开发者在 async
函数外部使用 await
字段。
以前:
await Promise.resolve(console.log('🎉'));
// → SyntaxError: await is only valid in async function
(async function () {
await Promise.resolve(console.log('🎉'));
// → 🎉
})();
复制代码
ES2022:
顶层 await
能在模块 modules 的顶层正常工作。(在 class 代码块或非 async
函数仍不支持。)
const serviceName = await fetch("https://example.com/what-service-should-i-use")
const service = await import(`/services/${serviceName}.js`)
// OR
const params = new URLSearchParams(location.search);
const theme = params.get('theme');
const stylingFunctions = await import(`/styling-functions-${theme}.js`);
复制代码
也支持条件导入:
const date = new Date()
if(date.getFullYear() === 2023) {
await require('/special-code-for-2023-year.js')
}
复制代码
了解更多
私有属性和方法
类 的概念虽然在 ES6 就被提出,但是它的开发程度远低于面向对象语言,有些新的特性将加入 JS,比如 —— 私有属性和方法;
它们用 #
进行标记,在类外部访问时,会报错;
class Human {
#name = "John";
setName(name) {
this.#name = name;
}
}
const human = new Human()
human.#name = 'Amy' // ERROR!
human.setName('Amy') // OK
复制代码
class Human {
name = "John";
constructor(name) {
this.#setName('Amy') // OK
}
#setName(name) {
this.name = name;
}
}
const human = new Human()
human.#setName('Amy') // ERROR!
复制代码
<hr>
OK,以上,便是本篇分享~~ 足够简明扼要吧~~
我是掘金安东尼,输出暴露输入,技术洞见生活,再会~
评论