12 가지 간단한 예에서 12 가지 ES10 기능
본문
ES10은 2019 년에 해당하는 ECMAScript 버전입니다.이 버전에는 ES6 (2015)에 나타난 것만 큼 많은 새로운 기능이 포함되어 있지 않습니다. 그러나 몇 가지 유용한 기능이 통합되었습니다.
https://dev.to/carlillo/12-es10-features-in-12-simple-examples-2cbn
이 기사에서는 쉬운 코드 예제에서 ES10이 제공하는 기능을 소개합니다. 이러한 방식으로 복잡한 설명 없이도 새로운 기능을 빠르게 이해할 수 있습니다.
물론, 가장 잘 소개 된 JavaScript를 완전히 이해하려면 JavaScript에 대한 기본 지식이 필요합니다.
ES2019의 새로운 #JavaScript 기능은 다음과 같습니다.
➡️ Array#{flat,flatMap}
➡️ Object.fromEntries
➡️ String#{trimStart,trimEnd}
➡️ Symbol#description
➡️ try { } catch {} // optional binding
➡️ JSON ⊂ ECMAScript
➡️ well-formed JSON.stringify
➡️ stable Array#sort
➡️ revised Function#toString
➡️ BigInt primitive type (stage 3).
➡️ Dynamic import (stage 3).
➡️ Standardized globalThis object (stage 3).
Array.flat() && Array.flatMap
두 가지 새로운 Array 메소드가 있습니다.
- Array.flat() 메서드는 모든 하위 배열 요소를 지정된 깊이까지 재귀적으로 연결하여 새 배열을 만듭니다.
- Array.flatMap() 메서드는 먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 병합합니다. 깊이 1의 flat() 다음에 오는 map()과 동일하지만, flatMap()은 종종 하나의 메소드로 병합하는 것이 약간 더 효율적이므로 매우 유용합니다.
Object.fromEntries()
키 및 값 쌍의 목록을 객체로 변환합니다.
String.protype.matchAll
matchAll() 메소드는 그룹 캡처를 포함하여 정규 표현식에 대해 문자열과 일치하는 모든 결과의 반복자를 리턴합니다.
String.trimStart() & String.trimEnd()
문자열에서 공백을 제거하는 두 가지 새로운 String 메소드가 있습니다.
- trimStart() 메서드는 문자열의 시작 부분에서 공백을 제거합니다.
- trimEnd() 메서드는 문자열 끝에서 공백을 제거합니다.
Symbol.Description
새로운 Symbol 설명 접근자가 있습니다. Symbol을 만들 때 설명으로 문자열을 제공 할 수 있습니다. ES10에는 이 속성에 대한 접근자가 있습니다.
Optional Catch Binding
try / catch 문의 과거 catch 절에는 변수가 필요했습니다. 이제 개발자는 사용하지 않는 바인딩을 만들지 않고 try / catch를 사용할 수 있습니다.
JSON⊂ECMAScript
ES10 이전 버전에서는 이스케이프 처리되지 않은 줄 구분 기호 U + 2028 및 단락 구분 기호 U + 2029 문자를 사용할 수 없습니다.
- U+2028 is the paragraph separator.
- U+2029 is the line separator.
Well-formed JSON.stringify()
JSON.stringify()는 U + D800과 U + DFFF 사이의 문자를 동등한 UTF-8 문자가 없는 값으로 리턴 할 수 있습니다. 그러나 JSON 형식에는 UTF-8 인코딩이 필요합니다. 제안 된 솔루션은 짝을 이루지 않은 대리 코드 포인트를 단일 UTF-16 코드 단위로 반환하지 않고 JSON 이스케이프 시퀀스로 표시하는 것입니다.
Stable Array.prototype.sort()
V8의 이전 구현에서는 10 개가 넘는 항목을 포함하는 배열에 불안정한 빠른 정렬 알고리즘을 사용했습니다.
안정적인 정렬 알고리즘은 동일한 키를 가진 두 개의 객체가 정렬되지 않은 입력에 나타나는 것과 동일한 순서로 정렬 된 출력에 나타나는 경우입니다.
새로운 Function.toString()
toString() 메소드는 함수의 소스 코드를 나타내는 문자열을 리턴합니다. ES6에서 함수에서 toString을 호출하면 ECMAScript 엔진에 따라 해당 함수의 문자열 표현이 반환됩니다. 가능하면 소스 코드를 반환하고 그렇지 않으면 표준화 된 자리 표시 자입니다.
BigInt — Arbitrary precision integers
BigInt는 7 번째 기본 유형이며 임의 정밀도 정수입니다. 변수는 이제 9007199254740992에서 최대 값이 아닌 ²⁵³ 숫자를 나타낼 수 있습니다.
Dynamic import
Dynamic import()는 요청 된 모듈의 모듈 네임 스페이스 객체에 대한 약속을 반환합니다. 따라서 이제 async / await를 사용하여 가져 오기를 변수에 할당 할 수 있습니다.
Standardized globalThis object
global this는 ES10 이전에는 표준화 되지 않았습니다. 프로덕션 코드에서는 this monstrosity을 작성하여 여러 플랫폼에서 이를 "표준화"합니다.
결론
JavaScript는 라이브 언어이며 웹 개발에 매우 건강합니다. 2015 년에 ES6이 등장한 이후로 우리는 언어의 역동적인 진화를 경험하고 있습니다. 이 글에서는 ES10 (2019)에서 발생하는 기능을 검토하고 상태 3에 있기 때문에 ES11 (2020)에서 안정적이고 일부 개정판에 대해 표준화 될 예정인 기능을 소개했습니다.
이러한 기능 중 많은 기능이 웹 응용 프로그램 개발에 반드시 필요한 것은 아니지만 트릭이나 세부 정보를 사용하여 이전에 달성 할 수 있는 가능성을 제공합니다.
- 이전글2019 년 8 월과 9 월에 가장 인기 있는 GitHub JS 리포지토리 33 + 26 개 19.10.02
- 다음글완벽한 반응형 메뉴 (2019) 19.10.02