写点什么

分分钟带你了解 ES2022 最重要的 4 个特性!

作者:掘金安东尼
  • 2022 年 8 月 29 日
    广东
  • 本文字数:1495 字

    阅读完需:约 5 分钟

分分钟带你了解 ES2022 最重要的 4 个特性!

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] // 3arr.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,以上,便是本篇分享~~ 足够简明扼要吧~~



我是掘金安东尼,输出暴露输入,技术洞见生活,再会~

发布于: 刚刚阅读数: 6
用户头像

安东尼陪你度过漫长编程岁月~ 2022.07.14 加入

社会我瓜哥,人狠话不多😎 微信 anthony1453,加我交个朋友😎 正联合【机械工业出版社】出版《程序员成长手册》,敬请期待😎 真正的大师,永远怀着一颗学徒的心(易)😎

评论

发布
暂无评论
分分钟带你了解 ES2022 最重要的 4 个特性!_前端_掘金安东尼_InfoQ写作社区