ECMAScript 2020의 새로운 기능

JavaScript는 가장 인기 있는 프로그래밍 언어 중 하나이며 매년 새로운 기능이 추가됩니다. 이 문서에서는 ECMAScript 2020(ES11이라고도 함)에 추가된 새로운 기능을 소개합니다.

ECMAScript 2015(ES6라고도 함)가 도입되기 전에는 JavaScript가 매우 느리게 개발되었습니다. 하지만 2015년부터 매년 새로운 기능이 추가되었습니다. 최신 브라우저에서 모든 기능을 지원하는 것은 아니지만 JavaScript 컴파일러 Babel 덕분에 이미 새로운 기능을 사용할 수 있습니다. 이 기사에서는 ECMAScript 2020(ES11)의 최신 기능 중 일부를 소개합니다.

Optional Chaining Optional Chaining

---

대부분의 개발자가 다음 문제에 직면했습니다.

TypeError: Cannot read property 'x' of undefTypeError: Cannot read property ‘x’ of undefined

这个错误表示我们正在访问一个不属于对象的属性。

访问对象的属性

const flower = {
    colors: {
        red: true
    }
}
console.log(flower.colors.red) // 正常运行

console.log(flower.species.lily) // 抛出错误：TypeError: Cannot read property 'lily' of undefined

在这种情况下，JavaScript 引擎会像这样抛出错误。但是某些情况下值是否存在并不重要，因为我们知道它会存在。于是，可选链式调用就派上用场了！

我们可以使用由一个问号和一个点组成的可选链式操作符，去表示不应该引发错误。如果没有值，应该返回 undefined

이 오류는 우리가 그렇지 않은 속성에 액세스한다는 것을 의미합니다. 객체에 속합니다.

객체 속성 액세스

console.log(flower.species?.lily) // 输出 undefined

이 경우 JavaScript 엔진에서는 다음과 같은 오류가 발생합니다. 그러나 어떤 경우에는 값이 존재할 것이라는 것을 알기 때문에 값이 존재하는지 여부가 중요하지 않습니다. 따라서 선택적 연결 통화가 유용합니다!

물음표와 점으로 구성된 선택적 연결 연산자를 사용하여 오류가 발생하지 않아야 함을 나타낼 수 있습니다. 값이 없으면 undefine이 반환되어야 합니다.

let flowers =  ['lily', 'daisy', 'rose']

console.log(flowers[1]) // 输出：daisy

flowers = null

console.log(flowers[1]) // 抛出错误：TypeError: Cannot read property '1' of null
console.log(flowers?.[1]) // 输出：undefined

배열에 액세스하거나 함수를 호출할 때 선택적 연결 호출을 사용할 수도 있습니다.

배열 액세스

---

let plantFlowers = () => {
  return 'orchids'
}

console.log(plantFlowers()) // 输出：orchids

plantFlowers = null

console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function

console.log(plantFlowers?.()) // 输出：undefined

함수 호출

let number = 1
let myNumber = number || 7

Nullish Coalescing Null 값 coalescing

현재 변수에 대체 값을 제공하려면 논리 연산자 ||가 여전히 필요합니다. 많은 상황에 적합하지만 일부 특수한 시나리오에는 적용할 수 없습니다. 예를 들어 초기 값은 부울 값 또는 숫자입니다. 예를 들어 변수에 숫자를 할당하려고 하면 변수의 초기 값이 숫자가 아닌 경우 기본값은 7입니다.

let number = 0
let myNumber = number || 7

왼쪽(숫자)이 true이므로 변수 myNumber는 1과 같습니다. 값 1. 그런데 변수 번호가 1이 아닌 0이면 어떻게 될까요?

let number = 0
let myNumber = number ?? 7

---

0은 거짓값이므로 0이 숫자이더라도요. 변수 myNumber에는 오른쪽의 값 7이 할당됩니다. 그러나 결과는 우리가 원하는 것이 아니다. 다행스럽게도 두 개의 물음표인 ??로 구성된 결합 연산자는 추가 코드를 작성하지 않고도 변수 번호가 숫자인지 확인할 수 있습니다.

class Flower {
  #leaf_color = "green";
  constructor(name) {
    this.name = name;
  }

  get_color() {
    return this.#leaf_color;
  }
}

const orchid = new Flower("orchid");

console.log(orchid.get_color()); // 输出：green
console.log(orchid.#leaf_color) // 报错：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class

연산자의 오른쪽 값은 왼쪽 값이 null이거나 정의되지 않은 경우에만 유효합니다. 따라서 예제의 변수 myNumber는 이제 0과 같은 값을 갖습니다.

개인 필드

---

클래스가 있는 많은 프로그래밍 언어에서는 클래스를 공개, 보호 또는 개인 속성으로 정의할 수 있습니다. 공용 속성은 클래스 또는 하위 클래스 외부에서 액세스할 수 있고, 보호 속성은 하위 클래스에서만 액세스할 수 있으며, 전용 속성은 클래스 내에서만 액세스할 수 있습니다. JavaScript는 ES6부터 클래스 구문을 지원했지만 프라이빗 필드는 지금까지 도입되지 않았습니다. 개인 속성을 정의하려면 앞에 해시 기호(#)가 와야 합니다.

class Flower {
  add_leaves() {
    console.log("Adding leaves");
  }
}

const rose = new Flower();
rose.add_leaves();

Flower.add_leaves() // 抛出错误：TypeError: Flower.add_leaves is not a function

외부에서 클래스의 개인 속성에 접근하면 필연적으로 오류가 보고됩니다.

정적 필드

---

클래스 메서드를 사용하려면 먼저 아래와 같이 클래스를 인스턴스화해야 합니다.

class Flower {
  constructor(type) {
    this.type = type;
  }
  static create_flower(type) {
    return new Flower(type);
  }
}

const rose = Flower.create_flower("rose"); // 正常运行

인스턴스화되지 않은 Flower 클래스의 메서드에 액세스하려고 하면 오류가 발생합니다. 그러나 정적 필드로 인해 클래스 메서드는 static 키워드를 사용하여 선언한 다음 외부에서 호출할 수 있습니다.

const func = async () => {
    const response = await fetch(url)
}

Top Level Await Top Level Await

현재 Promise 함수의 결과를 얻기 위해 Await를 사용하는 경우, Async 키워드로 Await를 사용하는 함수를 정의해야 합니다.

(async () => {
    const response = await fetch(url)
})()

전역적인 범위에서 특정 결과를 기다리는 것은 기본적으로 불가능하다는 것이 골치 아픈 문제입니다. 즉시 호출되는 함수 표현식(IIFE)을 사용하지 않는 한.

const response = await fetch(url)

하지만 최상위 Await가 도입된 후에는 다음과 같이 코드를 비동기 함수로 래핑할 필요가 없습니다.

let Vue
try {
    Vue = await import('url_1_to_vue')
} catch {
    Vue = await import('url_2_to_vue)
}

이 기능은 모듈 종속성을 해결하거나 초기 소스를 사용할 수 없을 때 매우 유용합니다. 백업 소스가 필요합니다.

promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))

Promise.allSettled([promise_1, promise_2])
    .then(([promise_1_result, promise_2_result]) => {
        console.log(promise_1_result) // 输出：{status: 'fulfilled', value: 'hello'}
        console.log(promise_2_result) // 输出：{status: 'rejected', reason: 'problem'}
    })

Promise.allSettled 메소드

---

여러 Promise가 결과를 반환할 때까지 기다릴 때 Promise.all([promise_1, promise_2])을 사용할 수 있습니다. 그러나 문제는 요청 중 하나가 실패하면 오류가 발생한다는 것입니다. 그러나 요청이 실패한 후 다른 요청의 결과가 정상적으로 반환되기를 바라는 경우도 있습니다. 이러한 상황을 위해 ES11에서는 Promise.allSettled를 도입했습니다.

// Alert.js
export default {
    show() {
        // 代码
    }
}


// 使用 Alert.js 的文件
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
    })

성공한 Promise는 상태와 값이 포함된 객체를 반환하고, 실패한 Promise는 상태와 이유가 포함된 객체를 반환합니다. 🎜🎜🎜동적 가져오기 동적 가져오기🎜🎜🎜🎜웹팩의 모듈 바인딩에서 동적 가져오기를 사용했을 수도 있습니다. 하지만 이 기능에 대한 기본 지원이 이루어졌습니다: 🎜

// Alert.js
export default {
    show() {
        // 代码
    }
}


// 使用 Alert.js 的文件
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
    })

考虑到许多应用程序使用诸如 webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用。

MatchAll 匹配所有项

---

如果你想要查找字符串中所有正则表达式的匹配项和它们的位置，MatchAll 非常有用。

const regex = /\b(apple)+\b/;
const fruits = "pear, apple, banana, apple, orange, apple";


for (const match of fruits.match(regex)) {
  console.log(match); 
}
// 输出 
// 
// 'apple' 
// 'apple'

相比之下，matchAll 返回更多的信息，包括找到匹配项的索引。

for (const match of fruits.matchAll(regex)) {
  console.log(match);
}

// 输出
// 
// [
//   'apple',
//   'apple',
//   index: 6,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 21,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 36,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ]

globalThis 全局对象

---

JavaScript 可以在不同环境中运行，比如浏览器或者 Node.js。浏览器中可用的全局对象是变量 window，但在 Node.js 中是一个叫做 global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis 。

// 浏览器
window == globalThis // true

// node.js
global == globalThis // true

BigInt

---

JavaScript 中能够精确表达的最大数字是 2^53 - 1。而 BigInt 可以用来创建更大的数字

const theBiggerNumber = 9007199254740991n
const evenBiggerNumber = BigInt(9007199254740991)

结论

---

我希望这篇文章对您有用，并像我一样期待 JavaScript 即将到来的新特性。如果想了解更多，可以看看 tc39 委员会的官方Github仓库。

推荐教程：《JS教程》

위 내용은 ECMAScript 2020의 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!