ES 11 에 추 가 된 이 9 가지 새로운 특성 을 당신 은 모두 파악 하 였 습 니까?

ECMAScript 2020 은 ECMAScript 언어 규범 의 11 판이 다.1997 년 1 판 출판 이후 ECMAScript 는 세계 에서 가장 광범 위 하 게 사용 되 는 유 니 버 설 프로 그래 밍 언어 중 하나 로 발전 했다.
ES 2020(ES 11)은 다음 과 같은 새로운 특성 을 도입 했다.

String 의 matchAll 방법

동적 도입 문 import()

import.meta

export * as ns from 'module'

Promise.allSettled

새로운 데이터 형식:BigInt

GlobalThis

Nullish coalescing Operator

Optional Chaining

matchAll
matchAll()방법 은 정규 표현 식 과 일치 하 는 모든 결 과 를 포함 하 는 교체 기 를 되 돌려 줍 니 다.for...of 를 사용 하거나 연산 자 를 사용 하여...Array.from 을 배열 로 변환 합 니 다.

const reg = /[0-3]/g;
const data = '2020'; 
console.log(data.matchAll(reg));//data.matchAll           
console.log([...data.matchAll(reg)]);
/**
 * 0: ["2", index: 0, input: "2020", groups: undefined]
 * 1: ["0", index: 1, input: "2020", groups: undefined]
 * 2: ["2", index: 2, input: "2020", groups: undefined]
 * 3: ["0", index: 3, input: "2020", groups: undefined]
 */

Dynamic import
표준 용법 의 import 가 져 온 모듈 은 정적 입 니 다.가 져 온 모든 모듈 을 불 러 올 때 컴 파일 됩 니 다.일부 장면 에 서 는 조건 에 따라 모듈 을 가 져 오 거나 필요 에 따라 모듈 을 가 져 오 기 를 원할 수도 있 습 니 다.이 때 정적 가 져 오기 대신 동적 가 져 오 기 를 사용 할 수 있 습 니 다.
import()전에 조건 에 따라 모듈 을 가 져 와 야 할 때 require()를 사용 해 야 합 니 다.
예:

if(XXX) {
 const menu = require('./menu');
}

현재 바 꿀 수 있 는 것 은:

if(XXX) {
 const menu = import('./menu');
}

@babel/preset-env 에는@babel/plugin-syntax-dynamic-import 가 포함 되 어 있 으 므 로 import()문법 을 사용 하려 면@babel/preset-env 만 설정 하면 됩 니 다.
알림:동적 가 져 오기(필요 한 경우 에 만 사용)를 남용 하지 마 십시오.정적 프레임 워 크 는 의존 도 를 초기 화 할 수 있 고 정적 분석 도구 와 tree shaking 이 역할 을 발휘 하 는 데 유리 합 니 다.
또한 import()는 promise 대상 을 되 돌려 줍 니 다.예 를 들 면:

//menu.js
export default {
 menu: 'menu'
}

//index.js
if(true) {
 let menu = import('./menu');
 console.log(menu); //Promise {<pending>
 menu.then(data => console.log(data));//Module {default: {menu: "menu"}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}
} else {

}

import.meta
import.meta 는 대상 을 되 돌려 줍 니 다.url 속성 이 있 습 니 다.현재 모듈 의 url 경 로 를 되 돌려 주 고 모듈 내부 에서 만 사용 할 수 있 습 니 다.

<script src='./main.js' type="module"></script>

//main.js
console.log(import.meta); //{url: "http://localhost:8080/main.js"} PS：    http-server   

import.meta 는 모듈 내부 에서 사용 해 야 하기 때문에 type="module"을 추가 하지 않 으 면 콘 솔 에서 오류 가 발생 합 니 다.Cannot use'import.meta'outside a module.
처음에 테스트 를 시 작 했 을 때 저 는 React 프로젝트 에서 테스트 를 했 습 니 다.@babel/preset-env 와@babel/preset-react 설정 만 설 정 했 습 니 다.import.meta 를 사용 할 때 다음 과 같이 오 류 를 보고 할 수 있 습 니 다.

@open-wc/webpack-import-meta-loader 를 설치 하고 webpack 설정 을 수정 하면 정상적으로 실행 할 수 있 습 니 다.

module: {
 rules: [
  {
   test: /\.js$/,
   use: [
    require.resolve('@open-wc/webpack-import-meta-loader'),
    {
     loader: 'babel-loader',
     options: {
      presets: [
       "@babel/preset-env",
       "@babel/preset-react"
      ]
     },
    }
   ]
  }
 ]
}

효 과 는 다음 과 같 습 니 다:

//src/index.js
import React from 'react';
console.log(import.meta);//{index.js:38 {url: "http://127.0.0.1:3000/src/index.js"}}

export * as ns from 'module'
ES 2020 에 export*as XX from'module',import*as XX from'module'이 추가 되 었 습 니 다.

//menu.js
export * as ns from './info';

다음 두 문장 을 한 문장 으로 합 친 것 으로 이해 할 수 있다.

import * as ns from './info';
export { ns };

그러나 주의해 야 할 것 은 export*as ns from'./info'가 모듈 을 가 져 올 수 없 기 때문에 이 모듈(menu.js)에서 ns 를 가 져 올 수 없습니다.
Promise.allSettled
Promise.all 이나 Promise.race 는 때때로 우리 의 요 구 를 만족 시 키 지 못 한다.예 를 들 어 우 리 는 모든 promise 가 끝 날 때 조작 을 해 야 한다.성공 이 든 실패 든 상관 하지 않 는 다.Promise.allSettled 가 없 기 전에 우 리 는 스스로 실현 을 써 야 한다.
Promise.allSettled()방법 은 주어진 promise 가 fulfilled 또는 rejected 된 promise 를 되 돌려 주 고 대상 배열 을 가지 고 있 으 며 대상 마다 해당 하 는 promise 결 과 를 표시 합 니 다.

const promise1 = Promise.resolve(100);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'info'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'name'))

Promise.allSettled([promise1, promise2, promise3]).
 then((results) => console.log(result));
/* 
 [
  { status: 'fulfilled', value: 100 },
  { status: 'rejected', reason: 'info' },
  { status: 'fulfilled', value: 'name' }
 ]
*/

Promise.allSettled()의 성공 적 인 결 과 는 하나의 배열 입 니 다.이 배열 의 모든 항목 은 하나의 대상 입 니 다.모든 대상 은 하나의 status 속성 을 가지 고 있 습 니 다.값 은 fulfilled 또는 rejected 입 니 다.status 의 값 이 fulfilled 라면 이 대상 은 하나의 value 속성 이 있 습 니 다.그 속성 값 은 대응 하 는 promise 성공 의 결과 입 니 다.status 의 값 이 rejected 라면 이 대상 은 reason 속성 이 있 습 니 다.그 속성 값 은 대응 하 는 promise 가 실패 한 원인 입 니 다.
BigInt
BigInt 는 임의의 정밀도 형식의 정 수 를 나 타 낼 수 있 는 디지털 형식의 데이터 입 니 다.이에 앞서 JS 에서 가장 안전 한 숫자 는 9009199254740991,즉 2^53-1 로 콘 솔 에 Number.MAX 를 입력 했다.SAFE_INTEGER 에서 확인 할 수 있 습 니 다.이 값 을 초과 하면 JS 는 정확하게 표시 할 방법 이 없다.또 2 보다 크 거나 같은 1024 제곱 의 수 치 는 JS 가 표시 할 수 없 으 며 인 피 니 티 로 되 돌아 갑 니 다.
빅 인 트 는 바로 이 두 문 제 를 해결 했다.빅 인 트 는 정수 만 표시 하고 자리수 의 제한 이 없 으 며 그 어떠한 자리수 의 정수 도 정확하게 표시 할 수 있다.Number 형식 과 구분 하기 위해 서 는 BigInt 형식의 데이터 에 접미사 n 을 추가 해 야 합 니 다.

//Number     9009199254740991 ，         
const num1 = 90091992547409910;
console.log(num1 + 1); //90091992547409900

//BigInt       
const num2 = 90091992547409910n;
console.log(num2 + 1n); //90091992547409911n

//Number          2   1024      
let num3 = 9999;
for(let i = 0; i < 10; i++) {
 num3 = num3 * num3;
}
console.log(num3); //Infinity

//BigInt              
let num4 = 9999n;
for(let i = 0n; i < 10n; i++) {
 num4 = num4 * num4;
}
console.log(num4); //        ，      

BigInt 대상 을 사용 하여 BigInt 인 스 턴 스 를 초기 화 할 수 있 습 니 다.

console.log(BigInt(999)); // 999n   ：   new    ！！！

설명 이 필요 한 것 은 BigInt 과 Number 는 두 가지 데이터 형식 으로 사 칙 연산 을 직접 할 수 는 없 지만 비교 조작 을 할 수 있다 는 것 이다.

console.log(99n == 99); //true
console.log(99n === 99); //false 
console.log(99n + 1);//TypeError: Cannot mix BigInt and other types, use explicit conversionss

GlobalThis
JS 에는 꼭대기 층 대상 이 존재 하지만 꼭대기 층 대상 은 여러 가지 실현 에서 일치 하지 않 는 다.
서로 다른 자 바스 크 립 트 환경 에서 전역 대상 을 가 져 오 려 면 서로 다른 문구 가 필요 합 니 다.웹 에 서 는 window,self 를 통 해 전체 대상 을 찾 을 수 있 지만 웹 Workers 에 서 는 self 만 가능 합 니 다.Node.js 에 서 는 가 져 올 수 없습니다.global 을 사용 해 야 합 니 다.
globalThis 이전에 우 리 는 이렇게 전체 대상 을 가 져 옵 니 다.

var getGlobal = function () {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};

ES 2020 에 globalThis 를 꼭대기 층 대상 으로 도입 하면 어떠한 환경 에서 도 간단하게 globalThis 를 통 해 꼭대기 층 대상 을 받 을 수 있다.
Nullish coalescing Operator
ES 2020 에 연산 자 를 새로 추 가 했 습 니 다.왼쪽 의 조작 수가 null 또는 undefined 일 때 오른쪽 조작 수 를 되 돌려 줍 니 다.그렇지 않 으 면 왼쪽 조작 수 를 되 돌려 줍 니 다.
||연산 자 를 사용 합 니 다.왼쪽 에 있 는 동작 수가 0,null,undefined,NaN,false,'일 때 오른쪽 동작 수 를 사용 합 니 다.일부 변수 에 기본 값 을 설정 하려 면||을 사용 하면 예상 치 못 한 행동 을 할 수 있 습 니 다.
예 를 들 면:

const defaultValue = 100;
let value = someValue || defaultValue;
//  someValue    boolean    false  ，value      defaultValue

someValue 의 값 이 0 일 때,우 리 는 사실 value 값 이 0 이 기 를 기대 하지만,그것 은 100 으로 잘못 분배 되 었 다.
?? 조작 부 호 는 상기 문 제 를 피 할 수 있 습 니 다.왼쪽 조작 수가 null 또는 undefined 일 때 만 오른쪽 조작 수 를 되 돌려 줍 니 다.

const defaultValue = 100;
let value = someValue ?? defaultValue;//someValue   0 ，value     0

Optional Chaining
체인 연산 자 를 선택 할 수 있 습 니까?연결 대상 체인 의 깊 은 곳 에 있 는 속성의 값 을 읽 을 수 있 습 니 다.체인 의 모든 인용 이 유효한 지 명확 하 게 검증 할 필요 가 없습니다.?연산 자의 기능 은.체인 연산 자 와 유사 합 니 다.다른 점 은 빈(nullish,즉 null 또는 undefined)으로 인 용 된 경우 오류 가 발생 하지 않 습 니 다.이 표현 식 단락 반환 값 은 undefined 입 니 다.
예 를 들 어,우 리 는 info 대상 의 animal reptile 의 tortoise 를 방문 해 야 합 니 다.그러나 우 리 는 동물,reptile 이 존재 하 는 지 확실 하지 않 기 때문에 이렇게 써 야 한다.

const tortoise = info.animal && info.animal.reptile && info.animal.reptile.tortoise;

null.reptile 또는  undefined.reptile 은 오 류 를 던 집 니 다:TypeError:Cannot read property'reptile'of undefined 또는 TypeError:Cannot read property'reptile'of null,오 류 를 피하 기 위해 서 우리 가 방문 해 야 할 속성 이 더 깊 으 면 이 코드 는 점점 길 어 집 니 다.
선택 가능 한 체인 조작 부호 가 생 겼 다 고요?..reptile 에 접근 하기 전에 info.animal 의 값 을 검사 할 필요 가 없습니다.마찬가지 로 info.animal.reptile.tortoise 에 접근 하기 전에 info.animal.reptile 의 값 을 검사 할 필요 가 없습니다.
위의 코드 는 다음 과 같이 간소화 합 니 다.

const tortoise = info.animal?.reptile?.tortoise;

JS 는 info.animal.reptile 에 접근 하기 전에 info.animal 의 값 이 null 또는 undefined 가 아 닌 지 암시 적 으로 검사 하고 확인 합 니 다.값 이 null 또는 undefined 라면 표현 식 단락 계산 은 undefined 로 직접 돌아 갑 니 다.
선택 가능 한 체인 연산 자 를 볼 수 있 습 니까?빈 자리 통합 연산 자 와 마찬가지 로 null 과 undefined 두 값 을 대상 으로 합 니 다.
이로써 ES 2020 의 새로운 특성 을 모두 소 개 했 으 니,어쨌든 새로 추 가 된 내용 이 많 지 않 아 커피 한 잔 의 시간 이 대략적인 것 을 파악 할 수 있 지만,자주 돌 이 켜 봐 야 한다.그렇지 않 으 면 쉽게 잊 혀 질 것 이다.
참고 자료
ecma-262
A Super Hacky Alternative to import.meta.url
import
export 와 import 의 복합 쓰기
BigInt 데이터 형식
globalThis
globalThis 대상
ES 11 에 추 가 된 9 가지 새로운 기능 에 대해 알 고 계 신 가요?