new-javascript-features-ecmascript-2022-with-examples-4nhg

原始地址：https://dev.to/brayanarrieta/new-javascript-features-ecmascript-2022-with-examples-4nhg

ECMAScript 2022是对应于今年的ECMAScript版本。已经加入了一些新功能，可以在我们的JavaScript项目中使用。如果您想了解ES2021，我已经为它创建了下一个博客文章新的JavaScript功能ECMAScript 2021（带有示例）
今年的ECMAScript新功能包括：

• 顶级等待
• 私有实例字段、方法和访问器
• 静态类字段和方法
• 静态类初始化块
• 错误：.cause
• 数组、字符串和TypedArray：.at()方法
• 对象：.hasOwn()
• 正则表达式：匹配.indices（'d’标志）

顶级等待
直到这一点，我们只能在异步函数的范围内使用await。这在我们命中模块的顶级时无法使用await关键字时会有问题。现在可以在模块的顶级使用await，并且在初始化导入和创建回退时非常方便。

例子

旧行为
当首次引入异步/等待功能时，尝试在异步函数之外使用await会导致语法错误。许多开发人员将其用作替代方案 - 立即调用的函数表达式（IIFE），以便能够访问此功能。
await Promise.resolve(console.log('Hello World'));
// 输出：SyntaxError: await is only valid in async function
// 修复问题的替代方法
(async function() { await Promise.resolve(console.log('Hello World')); // 输出：Hello World })();

新行为
有了顶级等待，我们不需要使用更多的 life hacks。
await Promise.resolve(console.log('Hello World'));
// → Hello World

用例

动态依赖路径
const strings = await import('/i18n/${navigator.language}');
这允许模块在运行时使用值来确定依赖关系。这对于开发/生产拆分、国际化、环境拆分等非常有用。

资源初始化
const connection = await dbConnector();
这使模块能够表示资源，并在模块永远不能使用时产生错误。

依赖回退
let jQuery; try { jQuery = await import('https://cdn-a.com/jQuery'); } catch { jQuery = await import('https://cdn-b.com/jQuery'); }

私有实例字段、方法和访问器
以前，需要在方法名称开头添加下划线（根据约定）来声明私有方法或字段，但这不能保证方法是私有的。
ES2022加入了新特性，即私有实例字段、方法和访问器。我们只需在方法名称开头加上 # 即可将其声明为私有。

私有类字段

例子

class Test {
  #firstName = 'test-name';
}
const test = new Test();
test.firstName
// 输出：undefined

私有类方法

例子

class Test {
  #addTestRunner(testRunner) {
    this.testRunner = testRunner
  }
}
const test = new Test();
test.addTestRunner({name: 'test'});
// 输出：TypeError: test.addTestRunner is not a function

私有访问器（getter和setter）
以前，要声明getter或setter，需要通过创建的实例进行访问，ES2022引入了私有访问器作为新功能。

例子

class Test {
  get #name() {
    return 'test-name';
  }
}
const test = new Test();
test.name
// 输出：undefined

静态类字段和方法
静态类字段和方法不适用于类的实例。而是可以在类本身上调用，并使用static关键字声明。
静态方法通常是实用函数和帮助函数，而静态属性对于缓存、固定配置或任何我们不需要在实例之间复制的其他数据非常有用。

例子

静态类字段

class Test {
  static firstName = 'test-static-name';
}
Test.firstName
// 输出：test-static-name

静态类方法

class Test {
  static greeting(){
    console.log('Hello this is a greeting from a static method');
  }
}
Test.greeting();
// 输出：Hello this is a greeting from a static method

注意：上述示例中我们使用的是静态公共字段和方法，但我们也可以创建静态私有字段和方法。

静态类初始化块
这一新特性在类定义评估期间提供了额外的静态初始化机制。

例子

class Test {
  static numbers = [1,2,3,4,5,6];
  static evenNumbers = [];
  static oddNumbers = [];
  // 静态类初始化块
  static {
    this.numbers.forEach((number) => {
      if(!(number % 2) ) {
        this.evenNumbers.push(number);
      } else {
        this.oddNumbers.push(number);
      }
    });
  }
}
Test.evenNumbers;
// 输出：[2, 4, 6]
Test.oddNumbers;
// 输出：[1, 3, 5]

错误：.cause
Error及其子类现在允许我们指定错误后面的原因。有时，我们捕获在更深层的函数调用中抛出的错误，并希望附加更多信息给它们。
通过错误原因，我们可以为错误添加更多固有信息。要使用这个新功能，我们应该将错误选项指定为第二个参数，并使用cause键传递我们想要链接的错误。

例子

const getUsers = async(array)=> {
  try {
    const users = await fetch('https://myapi/myusersfake');
    return users;
  } catch (error) {
    console.log('enter')
    throw new Error('Something when wrong, please try again later', { cause: error })
  }
}
try{
  const users = await getUsers();
} catch(error) {
  console.log(error); // Error: The array need a minimum of two elements
  console.log(error.cause); // TypeError: Failed to fetch
}

数组、字符串和TypedArray：.at()方法
到目前为止，程序员一直要求JS数组能够进行负索引，就像其他编程语言一样。也就是说，请求能够写arr[-1]而不是arr[arr.length-1]，负数从最后一个元素开始倒数。今年，ECMAScript 2022添加了一个新的方法，它可以帮助程序员进行负索引，该方法由Array、String或TypedArray支持。

例子
访问数组和字符串的最后一个元素

旧行为

const fruitsArray = ['banana', 'apple', 'orange', 'kiwi'];
console.log(fruitsArray[fruitsArray.length -1])
// 输出：kiwi
const fruit = 'kiwi';
console.log(fruit[fruit.length -1])
// 输出：i

新行为

const fruitsArray = ['banana', 'apple', 'orange', 'kiwi'];
console.log(fruitsArray.at(-1))
// 输出：kiwi
const fruit = 'kiwi';
console.log(fruit.at(-1))
// 输出：i

注意：**.at()**也接受正数，因此它可以用作需要索引的另一种方式。

对象：.hasOwn()
在今天的代码中，经常会写出以下代码（特别是在库代码中）：

let hasOwnProperty = Object.prototype.hasOwnProperty
if (hasOwnProperty.call(object, "foo")) {
 console.log("has property foo")
}

这个新功能将上述代码简化为：

if (Object.hasOwn(object, "foo")) {
 console.log("has property foo")
}

正则表达式：match .indices（'d’标志）
新的**/d标志**功能提供了有关每个匹配项在输入字符串中的开始和结束索引位置的其他信息。

例子

没有/d标志

const regexExample = /greeting(\d)/g;
const exampleString = 'greeting1greeting2';
const result = [...exampleString.matchAll(regexExample)];
console.log(result[0]);

输出

有/d标志

const regexExample2022 = /greeting(\d)/dg;
const exampleString = 'greeting1greeting2';
const result = [...exampleString.matchAll(regexExample2022)];
console.log(result[0]);

输出

使用**/d标志**后，我们得到一个带有匹配正则表达式的不同元素的索引数组。

结论
JavaScript是一种令人敬畏的编程语言。每年都有新的令人敬畏的功能可以在我们的项目中使用。在本文中，我们回顾了ES2022的新功能。我们期待在明年的新版本ES2023中有更多惊喜。如果您想了解ES2021，我已经为它创建了下一个博客文章新的JavaScript功能ECMAScript 2021（带有示例）
clusion)
结论
JavaScript是一种令人敬畏的编程语言。每年都有新的令人敬畏的功能可以在我们的项目中使用。在本文中，我们回顾了ES2022的新功能。我们期待在明年的新版本ES2023中有更多惊喜。如果您想了解ES2021，我已经为它创建了下一个博客文章新的JavaScript功能ECMAScript 2021（带有示例）
请在评论中告诉我您的建议或其他可以添加的内容，我将根据您的反馈更新文章，感谢！👍