분류 javascript

모든 새로운 ES2019 팁 및 요령

컨텐츠 정보

  • 조회 216 (작성일 )

본문

ES2019에 새로운 기능이 추가되어 ECMAScript 표준이 다시 업데이트 되었습니다. 

이제 노드, Chrome, Firefox 및 Safari에서 공식적으로 사용할 수 있으며 이전 브라우저를 지원해야 하는 경우 Babel을 사용하여 이러한 기능을 다른 버전의 JavaScript로 컴파일 할 수도 있습니다.


https://css-tricks.com/all-the-new-es2019-tips-and-tricks/ 


# Object.fromEntries 


ES2017에서는 Object.entries를 소개했습니다. 이것은 객체를 배열 표현으로 변환하는 함수였습니다. 이 같은:


let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } Object.entries(students) // [ // [ 'amelia', 20 ], // [ 'beatrice', 22 ], // [ 'cece', 20 ], // [ 'deirdre', 19 ], // [ 'eloise', 21 ] // ] 


이것은 객체가 Array 프로토 타입에 내장 된 수 많은 기능을 사용할 수 있게 해주는 훌륭한 추가 기능이었습니다. 

map, filter, reduce 등과 같은 것들 불행히도, 결과를 다시 객체로 바꾸려면 다소 수동적인 프로세스가 필요했습니다.


let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } // convert to array in order to make use of .filter() function let overTwentyOne = Object.entries(students).filter(([name, age]) => { return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] // turn multidimensional array back into an object let DrinkingAgeStudents = {} for (let [name, age] of overTwentyOne) { DrinkingAgeStudents[name] = age; } // { beatrice: 22, eloise: 21 } 


Object.fromEntries는 해당 루프를 제거하도록 설계되었습니다! 객체에서 배열 프로토 타입 메소드를 사용하도록 초대하는 훨씬 간결한 코드를 제공합니다.


let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } // convert to array in order to make use of .filter() function let overTwentyOne = Object.entries(students).filter(([name, age]) => { return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] // turn multidimensional array back into an object let DrinkingAgeStudents = Object.fromEntries(overTwentyOne); // { beatrice: 22, eloise: 21 } 


배열과 객체는 이유로 다른 데이터 구조라는 점에 유의해야 합니다. 둘 사이의 전환으로 인해 데이터가 손실 되는 경우가 있습니다. 중복 객체 키가 되는 배열 요소의 아래 예는 그 중 하나입니다.


let students = [ [ 'amelia', 22 ], [ 'beatrice', 22 ], [ 'eloise', 21], [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students); // { amelia: 22, beatrice: 20, eloise: 21 } // dropped first beatrice! 


이 기능을 사용할 때는 잠재적 부작용에주의하십시오.


Support for Object.fromEntries

ChromeFirefoxSafariEdge
756712.1No

your 우리는 당신의 도움을 사용할 수 있습니다. 모바일 브라우저에서 이러한 기능 및 기타 기능을 테스트 할 수 있습니까? 결과와 함께 의견을 남겨주세요. 결과를 확인하고 기사에 포함 시킵니다.


#Array.prototype.flat 


다차원 배열은 특히 데이터를 검색 할 때 자주 사용되는 데이터 구조입니다. 평평하게 하는 능력이 필요합니다. 항상 가능했지만 정확히 예쁘지는 않았습니다.


지도에서 평면화하려는 다차원 배열을 제공하는 다음 예를 살펴 보겠습니다.


let courses = [ { subject: "math", numberOfStudents: 3, waitlistStudents: 2, students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']] }, { subject: "english", numberOfStudents: 2, students: ['Wilson', 'Taylor'] }, { subject: "history", numberOfStudents: 4, students: ['Edith', 'Jacob', 'Peter', 'Betty'] } ] let courseStudents = courses.map(course => course.students) // [ // [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], // [ 'Wilson', 'Taylor' ], // [ 'Edith', 'Jacob', 'Peter', 'Betty' ] // ] [].concat.apply([], courseStudents) // we're stuck doing something like this 


In Array.prototype.flat이 제공됩니다. 선택적인 깊이 인수가 필요합니다.


let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel) // [ // 'Janet', // 'Martha', // 'Bob', // [ 'Phil', 'Candace' ], // 'Wilson', // 'Taylor', // 'Edith', // 'Jacob', // 'Peter', // 'Betty' // ] let flattenTwoLevels = courseStudents.flat(2) console.log(flattenTwoLevels) // [ // 'Janet', 'Martha', // 'Bob', 'Phil', // 'Candace', 'Wilson', // 'Taylor', 'Edith', // 'Jacob', 'Peter', // 'Betty' // ] 


인수가 제공되지 않으면 기본 깊이는 1입니다. 이 예에서는 배열을 완전히 평평하게 하지 않기 때문에 이것은 매우 중요합니다.


let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened) // [ // 'Janet', // 'Martha', // 'Bob', // [ 'Phil', 'Candace' ], // 'Wilson', // 'Taylor', // 'Edith', // 'Jacob', // 'Peter', // 'Betty' // ] 


이 결정의 정당성은 기본적으로 함수가 욕심이 없으며 그와 같이 작동하기 위해 명확한 지시가 필요하다는 것입니다. 배열을 완전히 평탄화 하려는 의도로 알려지지 않은 깊이에 대해서는 Infinity 인수를 사용할 수 있습니다.


let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened) // [ // 'Janet', 'Martha', // 'Bob', 'Phil', // 'Candace', 'Wilson', // 'Taylor', 'Edith', // 'Jacob', 'Peter', // 'Betty' // ] 


항상 그렇듯이 탐욕스러운 작업은 신중하게 사용해야 하며 어레이의 깊이를 알 수 없는 경우에는 적합하지 않습니다.


Support for Array.prototype.flat

ChromeFirefoxSafariEdge
756712No
Chrome AndroidFirefox AndroidiOS SafariIE MobileSamsung InternetAndroid Webview
756712.1NoNo67


# Array.prototype.flatMap 


flat을 추가하면 Array.prototype.flatMap의 결합 함수도 얻었습니다. 우리는 실제로 이것이 위에서 유용 할 수 있는 예를 이미 보았지만 다른 것을 보도록 하겠습니다.


배열에 요소를 삽입하려는 상황은 어떻습니까? ES2019를 추가하기 전에 어떻게 보일까요?


let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7]) // [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ] let flatMapped = [].concat.apply([], curved) // now flatten, could use flat but that didn't exist before either // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 


이제 Array.prototype.flat이 있으므로 이 예제를 약간 개선 할 수 있습니다.


let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat() // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 


그러나 여전히 이것은 특히 함수형 프로그래밍에서 비교적 인기 있는 패턴입니다. 따라서 배열 프로토 타입에 내장 된 것이 좋습니다. flatMap을 사용하면 다음과 같이 할 수 있습니다. 


let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]); // [ // 78, 85, 62, 69, // 80, 87, 64, 71 // ] 


이제 Array.prototype.flat의 기본 인수는 1입니다. flatMap은 combing map과 동일하며 인수가 없는 flat입니다. 따라서 flatMap은 한 레벨 만 평탄화 합니다.


let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]); // [ // 78, [ 85 ], // 62, [ 69 ], // 80, [ 87 ], // 64, [ 71 ] // ] 


Array.prototype.flatMap 지원 


ChromeFirefoxSafariEdge
756712No
Chrome AndroidFirefox AndroidiOS SafariIE MobileSamsung InternetAndroid Webview
756712.1NoNo67

# String.trimStart 및 String.trimEnd 


ES2019의 또 다른 멋진 기능은 일부 문자열 함수 이름을 보다 명확하게 만드는 별칭입니다. 이전에는 String.trimRight 및 String.trimLeft를 사용할 수 있었습니다.


let message = " Welcome to CS 101 " message.trimRight() // ' Welcome to CS 101' message.trimLeft() // 'Welcome to CS 101 ' message.trimRight().trimLeft() // 'Welcome to CS 101' 


이것들은 훌륭한 기능이지만, 목적에 더 잘 맞는 이름을 부여하는 것도 유익했습니다. 시작 공간과 끝 공간을 제거합니다.


let message = " Welcome to CS 101 " message.trimEnd() // ' Welcome to CS 101' message.trimStart() // 'Welcome to CS 101 ' message.trimEnd().trimStart() // 'Welcome to CS 101' 


String.trimStart 및 String.trimEnd 지원

ChromeFirefoxSafariEdge
756712No


# 옵션 캐치 바인딩 


ES2019의 또 다른 멋진 기능은 try-catch 블록의 인수를 선택적으로 만드는 것입니다. 이전에는 모든 catch 블록이 예외로 매개 변수로 전달되었습니다. 그것은 catch 블록 내부의 코드가 그것을 무시했을 때조차도 있음을 의미했습니다.


try { let parsed = JSON.parse(obj) } catch(e) { // ignore e, or use console.log(obj) } 


이것은 더 이상 사실이 아닙니다. catch 블록에 예외가 사용되지 않으면 아무것도 전달할 필요가 없습니다.


try { let parsed = JSON.parse(obj) } catch { console.log(obj) } 


오류가 무엇인지 이미 알고 오류가 발생한 데이터를 찾고 있는 경우 이 옵션이 유용합니다.


Support for Optional Catch Binding

ChromeFirefoxSafariEdge
756712No

# Function.toString() 변경 


ES2019는 또한 Function.toString() 작동 방식을 변경했습니다. 이전에는 공백을 완전히 제거했습니다.


function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString() //'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n}' 



이제는 소스 코드에서 함수의 실제 표현을 반영합니다.


function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString() // 'function greeting() {\n' + // " const name = 'CSS Tricks'\n" + // ' console.log(`hello from ${name}`)\n' + // '}' 


이것은 대부분 내부적 인 변화이지만 도움이 될 수는 없지만 블로거의 삶을 편하게 할 수 있다고 생각합니다.


Support for Function.toString

ChromeFirefoxSafariEdge
756012 - Partial17 - Partial

그리고 당신은 그것을 가지고 있습니다! ES2019에 추가 된 주요 기능.


탐색하고 싶은 다른 추가 기능도 있습니다. 여기에는 다음이 포함됩니다.