정보실

웹학교

정보실

javascript JavaScript : ES2019의 새로운 기능

본문

가장 많이 사용되는 프로그래밍 언어 중 하나이며 웹 개발의 주요 요소 인 JavaScript는 지속적으로 발전하고 있으며 매번 반복 될 때마다 새로운 내부 변화가 발생합니다. ES2019의 새로운 제안 된 기능 중 일부를 곧 일상 코드에 적용 할 수 있는 방법을 살펴 보겠습니다.


https://blog.tildeloop.com/posts/javascript-what%E2%80%99s-new-in-es2019 


Array.flat() 


이제 중첩 된 배열을 지정된 깊이까지 재귀 적으로 평면화 할 수 있습니다. 기본값은 1이며 전체 깊이로 이동하려면 무한대를 사용하십시오. 이 방법은 원래 배열을 수정하지 않고 새 배열을 만듭니다.

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]


배열에 빈 슬롯이 있으면 제거됩니다.

const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]


Array.flatMap() 


기본 맵 함수를 결합한 다음 새로운 Array.flat() 메소드를 사용하여 결과를 깊이 1로 평평하게 하는 새로운 메소드 :

const arr1 = [1, 2, 3];

arr1.map(x => [x * 4]); // [[4], [8], [12]]
arr1.flatMap(x => [x * 4]); // [4, 8, 12]


더 유용한 또 다른 예 :

const sentence = ["This is a", "regular", "sentence"];

sentence.map(x => x.split(" ")); // [["This","is","a"],["regular"],["sentence"]]
sentence.flatMap(x => x.split(" ")); // ["This","is","a","regular", "sentence"]


String.trimStart() and String.trimEnd() 


문자열의 양쪽에서 공백을 제거하는 String.Trim() 외에도 각 측면에서 공백 만 제거하는 별도의 메소드가 있습니다.

const test = " hello ";

test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";


Object.fromEntries 


키-값 쌍 목록을 객체로 변환하는 새로운 방법. 이미 익숙한 기능인 Object.Entries의 반대를 수행합니다.이 기능은 객체를 보다 쉽게 ​​조작 할 수 있도록 배열로 변환 할 때 사용됩니다. 변환 후 배열이 남았지 만 이제 조작 된 배열을 다시 개체로 반환 할 수 있습니다. 모든 객체 속성의 값을 제곱 하려는 예제를 사용해 보겠습니다. 

const obj = { prop1: 2, prop2: 10, prop3: 15 };

let array = Object.entries(obj); // [["prop1", 2], ["prop2", 10], ["prop3", 15]]


간단한 map로 새로운 키-값 쌍 목록의 값을 제곱합시다.

array = array.map(([key, value]) => [key, Math.pow(value, 2)]); // [["prop1", 4], ["prop2", 100], ["prop3", 225]]


우리는 객체 값을 변형했지만 배열을 남겨두고 Object.fromEntries가 들어오는 곳으로 배열을 객체로 다시 변환합니다.

const newObj = Object.fromEntries(array); // {prop1: 4, prop2: 100, prop3: 225}


Optional Catch Binding 


새로운 제안은 catch() 매개 변수를 사용하지 않으려는 경우가 많으므로 완전히 생략 할 수 있습니다.

try {
  //...
} catch (er) {
  //handle error with parameter er
}

try {
  //...
} catch {
  //handle error without parameter
}

Symbol.description 


toString() 메서드를 사용하는 대신 Symbol의 description 속성에 액세스 할 수 있습니다.

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"


Function.toString() 


함수에서 toString()을 호출하면 공백과 주석을 포함하여 정의 된대로 정확하게 함수가 반환됩니다. 우리가 하기 전에 :

function /* foo comment */ foo() {}

foo.toString(); // "function foo() {}"


그리고 지금은 :

foo.toString(); // "function /* foo comment */ foo() {}"


JSON.parse() improvements 


줄 구분 기호 (\u2028)와 단락 구분 기호 (\u2029) 기호가 이제 구문 오류가 아닌 올바르게 구문 분석됩니다.






  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 3회 ]  작성일19-08-15 11:43

웹학교