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
이 경우 JavaScript 엔진에서는 다음과 같은 오류가 발생합니다. 그러나 어떤 경우에는 값이 존재할 것이라는 것을 알기 때문에 값이 존재하는지 여부가 중요하지 않습니다. 따라서 선택적 연결 통화가 유용합니다! console.log(flower.species?.lily) // 输出 undefined
로그인 후 복사
물음표와 점으로 구성된 선택적 연결 연산자를 사용하여 오류가 발생하지 않아야 함을 나타낼 수 있습니다. 값이 없으면 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?.()) // 输出：undefinedlet number = 1 let myNumber = number || 7
let number = 0 let myNumber = number || 7
let number = 0 let myNumber = number ?? 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개인 필드
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"); // 正常运行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.allSettled 메소드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'}
})로그인 후 복사
// Alert.js
export default {
show() {
// 代码
}
}
// 使用 Alert.js 的文件
import('/components/Alert.js')
.then(Alert => {
Alert.show()
})// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
