JavaScript가 es로 업데이트되었습니다.

JavaScript가 es13으로 업데이트되었습니다. 2022년 6월 22일 제123회 Ecma 컨퍼런스에서 ECMAScript2022 언어 사양이 승인되었습니다. 이는 이제 공식적으로 JavaScript 표준이 되었음을 의미하며 ECMAScript2022는 13번째 반복이므로 ECMAScript13 또는 줄여서 ES13이라고도 합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 13, Dell G3 컴퓨터.

새로운 ES13 사양이 드디어 출시되었습니다.

JavaScript는 오픈 소스 언어가 아니며 ECMAScript 표준 사양에 따라 작성되어야 하는 언어입니다. TC39 위원회는 새로운 기능 출시를 논의하고 승인하는 역할을 담당합니다.

“ECMA International의 TC39는 JavaScript의 정의를 유지하고 발전시키기 위해 커뮤니티와 협력하는 JavaScript 개발자, 구현자, 학자 등의 그룹입니다.” — TC39.es

그들의 릴리스 프로세스는 2015년 이후 매년 출시를 해왔고, 보통 봄에 출시됩니다.

2022년 6월 22일 제123회 Ecma 의회에서 ECMAScript 2022 언어 사양을 승인했습니다. 이는 이제 공식 표준이 되었음을 의미합니다.

ECMAScript 버전을 참조하는 방법에는 두 가지가 있습니다.

• 연도별: 이 새 버전은 ES2022입니다.

• 반복 횟수 기준: 이 새 버전은 13번째 반복이므로 ES13이라고 할 수 있습니다.

이번 버전의 새로운 기능은 무엇인가요? 우리는 어떤 기능을 좋아할 수 있습니까?

01, 정규식 일치 인덱스

현재 JavaScript에서 JavaScript Regex API를 사용하면 일치 항목의 시작 인덱스만 반환됩니다. 그러나 일부 특별한 고급 시나리오에서는 이것만으로는 충분하지 않습니다.

이 사양의 일부로 특수 플래그 d가 추가되었습니다. 이를 사용하면 정규식 API는 이름 인덱스의 키로 2차원 배열을 반환합니다. 여기에는 각 일치 항목의 시작 및 끝 인덱스가 포함됩니다. 명명된 그룹이 정규 표현식에 캡처되면 명명된 그룹 이름이 키가 되는 indices.groups 개체에 시작/끝 인덱스가 반환됩니다.

// ✅ a regex with a 'B' named group capture
const expr = /a+(?<B>b+)+c/d;


const result = expr.exec("aaabbbc")


// ✅ shows start-end matches + named group match
console.log(result.indices);
// prints [Array(2), Array(2), groups: {…}]


// ✅ showing the named &#39;B&#39; group match
console.log(result.indices.groups[&#39;B&#39;])
// prints [3, 6]

원래 제안 보기, https://github.com/tc39/proposal-regexp-match-indices

02, 최상위 수준 wait

이 제안 이전에는 최상위 수준 wait가 아닙니다. 허용됩니다. 이 동작을 시뮬레이션하는 해결 방법이 있지만 단점도 있습니다.

최상위 대기 기능을 사용하면 모듈을 사용하여 이러한 약속을 처리할 수 있습니다. 이는 직관적인 기능입니다.

하지만 모듈의 실행 순서가 변경될 수 있다는 점에 유의하세요. 모듈이 최상위 대기 호출로 다른 모듈에 의존하는 경우 해당 모듈의 실행은 약속이 완료될 때까지 일시 중지됩니다.

예를 살펴보겠습니다.

// users.js
export const users = await fetch('/users/lists');


// usage.js
import { users } from "./users.js";
// ✅ the module will wait for users to be fullfilled prior to executing any code
console.log(users);

위의 예에서 엔진은 Usage.js 모듈에서 코드를 실행하기 전에 사용자가 작업을 완료할 때까지 기다립니다.

대체로 이 기능은 주의해서 사용해야 하고 남용하지 말아야 하는 훌륭하고 직관적인 기능입니다.

여기에서 원래 제안서를 확인하세요. https://github.com/tc39/proposal-top-level-await

03, .at( )

오랫동안 JavaScript에서 배열에 Python과 유사한 음수 인덱스 접근자를 제공해 달라는 요청이 있었습니다. array[array.length-1]을 수행하는 대신 간단히 array[-1]을 수행하십시오. [] 기호는 JavaScript의 객체에도 사용되기 때문에 불가능합니다.

승인된 제안은 보다 실용적인 접근 방식을 취했습니다. 이제 배열 객체에는 위의 동작을 시뮬레이션하는 메서드가 있습니다.

const array = [1,2,3,4,5,6]


// ✅ When used with positive index it is equal to [index]
array.at(0) // 1
array[0] // 1


// ✅ When used with negative index it mimicks the Python behaviour
array.at(-1) // 6
array.at(-2) // 5
array.at(-4) // 3

원래 제안 보기 https://github.com/tc39/proposal-relative-indexing-method

그런데 배열에 대해 이야기하고 있으니 배열 위치를 구조 해제할 수 있다는 것을 알고 계셨나요?

const array = [1,2,3,4,5,6];


// ✅ Different ways of accessing the third position
const {3: third} = array; // third = 4
array.at(3) // 4
array[3] // 4

04, 액세스 가능 Object.prototype.hasOwnProperty

다음은 간단하게 설명했는데 이미 hasOwnProperty가 있습니다. 그러나 수행하려는 조회 인스턴스 내에서 호출해야 합니다. 따라서 많은 개발자가 다음과 같은 작업을 수행하는 것이 일반적입니다.

const x = { foo: "bar" };


// ✅ grabbing the hasOwnProperty function from prototype
const hasOwnProperty = Object.prototype.hasOwnProperty


// ✅ executing it with the x context
if (hasOwnProperty.call(x, "foo")) {
  ...
}

이러한 새로운 사양을 사용하면 hasOwn 메서드가 객체 프로토타입에 추가되었으며 이제 간단히 다음을 수행할 수 있습니다.

const x = { foo: "bar" };


// ✅ using the new Object method
if (Object.hasOwn(x, "foo")) {
  ...
}

원래 제안 보기, https:// / github.com/tc39/proposal-accessible-object-hasownproperty

05、오류 원인

错误帮助我们识别应用程序的意外行为并做出反应，然而，理解深层嵌套错误的根本原因，正确处理它们可能会变得具有挑战性，在捕获和重新抛出它们时，我们会丢失堆栈跟踪信息。

没有关于如何处理的明确协议，考虑到任何错误处理，我们至少有 3 个选择：

async function fetchUserPreferences() {
  try { 
    const users = await fetch('//user/preferences')
      .catch(err => {
        // What is the best way to wrap the error?
        // 1. throw new Error('Failed to fetch preferences ' + err.message);
        // 2. const wrapErr = new Error('Failed to fetch preferences');
        //    wrapErr.cause = err;
        //    throw wrapErr;
        // 3. class CustomError extends Error {
        //      constructor(msg, cause) {
        //        super(msg);
        //        this.cause = cause;
        //      }
        //    }
        //    throw new CustomError('Failed to fetch preferences', err);
      })
    }
}


fetchUserPreferences();

作为这些新规范的一部分，我们可以构造一个新错误并保留获取的错误的引用。 我们只需将对象 {cause: err} 传递给 Errorconstructor。

这一切都变得更简单、标准且易于理解深度嵌套的错误， 让我们看一个例子：

async function fetcUserPreferences() {
  try { 
    const users = await fetch('//user/preferences')
      .catch(err => {
        throw new Error('Failed to fetch user preferences, {cause: err});
      })
    }
}


fetcUserPreferences();

了解有关该提案的更多信息，https://github.com/tc39/proposal-error-cause

06、Class Fields

在此版本之前，没有适当的方法来创建私有字段， 通过使用提升有一些方法可以解决它，但它不是一个适当的私有字段。 但现在很简单， 我们只需要将 # 字符添加到我们的变量声明中。

class Foo {
  #iteration = 0;


  increment() {
    this.#iteration++;
  }


  logIteration() {
    console.log(this.#iteration);
  }
}


const x = new Foo();


// ❌ Uncaught SyntaxError: Private field '#iteration' must be declared in an enclosing class
x.#iteration


// ✅ works
x.increment();


// ✅ works
x.logIteration();

拥有私有字段意味着我们拥有强大的封装边界， 无法从外部访问类变量，这表明 class 关键字不再只是糖语法。

我们还可以创建私有方法：

class Foo {
  #iteration = 0;


  #auditIncrement() {
    console.log('auditing');
  }


  increment() {
    this.#iteration++;
    this.#auditIncrement();
  }
}


const x = new Foo();


// ❌ Uncaught SyntaxError: Private field '#auditIncrement' must be declared in an enclosing class
x.#auditIncrement


// ✅ works
x.increment();

该功能与私有类的类静态块和人体工程学检查有关，我们将在接下来的内容中看到。

了解有关该提案的更多信息，https://github.com/tc39/proposal-class-fields

07、Class Static Block

作为新规范的一部分，我们现在可以在任何类中包含静态块，它们将只运行一次，并且是装饰或执行类静态端的某些字段初始化的好方法。

我们不限于使用一个块，我们可以拥有尽可能多的块。

// ✅ will output 'one two three'
class A {
  static {
      console.log('one');
  }
  static {
      console.log('two');
  }
  static {
      console.log('three');
  }
}

他们有一个不错的奖金，他们获得对私有字段的特权访问， 你可以用它们来做一些有趣的模式。

let getPrivateField;


class A {
  #privateField;
  constructor(x) {
    this.#privateField = x;
  }
  static {
    // ✅ it can access any private field
    getPrivateField = (a) => a.#privateField;
  }
}


const a = new A('foo');
// ✅ Works, foo is printed
console.log(getPrivateField(a));

如果我们尝试从实例对象的外部范围访问该私有变量，我们将得到无法从类未声明它的对象中读取私有成员#privateField。

了解有关该提案的更多信息，https://github.com/tc39/proposal-class-static-block

08、Private Fields

新的私有字段是一个很棒的功能，但是，在某些静态方法中检查字段是否为私有可能会变得很方便。

尝试在类范围之外调用它会导致我们之前看到的相同错误。

class Foo {
  #brand;


  static isFoo(obj) {
    return #brand in obj;
  }
}


const x = new Foo();


// ✅ works, it returns true
Foo.isFoo(x);


// ✅ works, it returns false
Foo.isFoo({})


// ❌ Uncaught SyntaxError: Private field '#brand' must be declared in an enclosing class
#brand in x

了解有关该提案的更多信息。https://github.com/tc39/proposal-private-fields-in-in

最后的想法

这是一个有趣的版本，它提供了许多小而有用的功能，例如 at、private fields和error cause。当然，error cause会给我们的日常错误跟踪任务带来很多清晰度。

一些高级功能，如top-level await，在使用它们之前需要很好地理解。它们可能在你的代码执行中产生不必要的副作用。

【相关推荐：javascript视频教程、编程视频】

위 내용은 JavaScript가 es로 업데이트되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!