모든 새로운 ES2019 팁과 요령

ES2019는 ECMAScript 표준에 몇 가지 새로운 기능을 제공합니다. 이러한 기능은 공식적으로 Node.js, Chrome, Firefox 및 Safari에서 제공됩니다. 이전 브라우저를 지원하기 위해 Babel을 사용하여 이러한 기능을 다른 버전의 JavaScript로 컴파일 할 수도 있습니다.

어떤 새로운 기능을 사용할 수 있는지 봅시다!

Object.fromEntries 방법

ES2017은 객체를 배열 표현으로 변환하는 Object.entries 메소드를 소개합니다. 예를 들어:

 학생들에게 = {
  아멜리아 : 20,
  베아트리체 : 22,
  CECE : 20,
  Deirdre : 19,
  엘로이즈 : 21
}

Object.entries (학생) 
// [
// [ 'Amelia', 20],
// [ 'Beatrice', 22],
// [ 'Cece', 20],
// [ 'deirdre', 19],
// [ '엘로이즈', 21]
//]

이는 객체가 map , filter , reduce 등과 같은 배열 프로토 타입에 내장 된 여러 기능을 사용할 수 있기 때문에 매우 유용합니다. 그러나 결과를 객체로 다시 변환하려면 비교적 지루한 프로세스가 필요합니다.

 학생들에게 = {
  아멜리아 : 20,
  베아트리체 : 22,
  CECE : 20,
  Deirdre : 19,
  엘로이즈 : 21
}

// .filter () 함수를 사용하기 위해 배열로 변환합니다.
  반환 연령> = 21
}) // [[ 'Beatrice', 22], [ 'Eloise', 21]]

// 다차원 배열을 물체로 변환하여 DiskingAgestudents = {}
(오버로 네의 이름, 나이] {
    DrinkingAgestudents [name] = Age;
}
// {Beatrice : 22, Eloise : 21}

Object.fromEntries 방법은이 루프를 제거하도록 설계되었습니다! 객체에서 배열 프로토 타입 메소드를 사용하도록 촉진 할 수 있도록 클리너 코드를 제공합니다.

 학생들에게 = {
  아멜리아 : 20,
  베아트리체 : 22,
  CECE : 20,
  Deirdre : 19,
  엘로이즈 : 21
}

// .filter () 함수를 사용하기 위해 배열로 변환합니다.
  반환 연령> = 21
}) // [[ 'Beatrice', 22], [ 'Eloise', 21]]

// 다차원 배열을 물체로 변환하여 DiskingAgestudents = Object.Fromentries (Overtwentyone); 
// {Beatrice : 22, Eloise : 21}

배열과 객체는 데이터 구조가 다르고 둘 사이를 변환하면 데이터 손실이 발생할 수 있습니다. 다음 예제는 배열 요소가 중복 객체 키가되는 방법을 보여줍니다.

 학생들 = [
  [ '아멜리아', 22], 
  [ 'Beatrice', 22], 
  [ '엘로이즈', 21], 
  [ 'Beatrice', 20]
]]

windentobj = Object.Fromentries (학생); 
// {Amelia : 22, Beatrice : 20, Eloise : 21}
// 첫 번째 베아트리체가 버려졌습니다!

이러한 기능을 사용할 때 잠재적 인 부작용을 알고 있어야합니다.

Object.fromEntries 방법 지원 상황

크롬	파이어 폭스	원정 여행	가장자리
75	67	12.1	지원되지 않습니다

Array.prototype.flat 메소드

다차원 배열은 특히 데이터를 검색 할 때 매우 일반적인 데이터 구조입니다. 다차원 배열을 평평하게하는 능력이 필요합니다. 이전에 수행 할 수 있었지만이 방법은 우아하지 않습니다.

map 함수가 평평 해야하는 다차원 배열을 반환하는 예를 살펴 보겠습니다.

 코스 = [
  {
    제목 : "수학",
    수분 : 3,
    대기자 장거리 : 2,
    학생 : [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace']]]]]
  },
  {
    제목 : "영어",
    숫자 : 2,
    학생 : [ '윌슨', '테일러']
  },
  {
    제목 : "역사",
    숫자 : 4,
    학생 : [ 'Edith', 'Jacob', 'Peter', 'Betty']]]
  }
]]

CourSestudents = courses.map (course => course.students)
// [
// [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace'],
// [ '윌슨', '테일러'],
// [ 'Edith', 'Jacob', 'Peter', 'Betty']]]
//]

[] .concat.apply ([], Coursestudents) //이 메소드를 사용해야합니다

Array.prototype.flat 메소드가 생겨났습니다. 선택적 깊이 매개 변수를 허용합니다.

 CourSestudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace']],
  [ '윌슨', '테일러'],
  [ 'Edith', 'Jacob', 'Peter', 'Betty']]]
]]

flattenonelevel = coursestudents.flat (1)
Console.log (flattenonelevel)
// [
// 'Janet',
// 'Martha',
// '밥',
// [ 'Phil', 'Candace'],
// '윌슨',
// '테일러',
// 'edith',
// '야곱',
// '피터',
// '베티'
//]

flattentwolevels = coursestudents.flat (2)
Console.log (FlattentWolevels)
// [
// 'Janet', 'Martha',
// '밥', '필',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// '야곱', '피터',
// '베티'
//]

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

 CourSestudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace']],
  [ '윌슨', '테일러'],
  [ 'Edith', 'Jacob', 'Peter', 'Betty']]]
]]

defaultflattened = coursestudents.flat ()하자
console.log (defaultFlattened)
// [
// 'Janet',
// 'Martha',
// '밥',
// [ 'Phil', 'Candace'],
// '윌슨',
// '테일러',
// 'edith',
// '야곱',
// '피터',
// '베티'
//]

이 설계의 이유는 기능이 기본적으로 탐욕스럽지 않으며 이러한 방식으로 실행하려면 명시적인 지침이 필요하기 때문입니다. Infinity 깊이가 알려지지 않은 경우 매개 변수로 사용될 수 있고 배열을 완전히 평평하게하는 의도입니다.

 CourSestudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace']],
  [ '윌슨', '테일러'],
  [ 'Edith', 'Jacob', 'Peter', 'Betty']]]
]]

Alwaysflattened = coursestudents.flat (Infinity)
Console.log (항상 플랫 트립)
// [
// 'Janet', 'Martha',
// '밥', '필',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// '야곱', '피터',
// '베티'
//]

항상 그렇듯이 욕심 많은 작업은주의해서 사용해야하며 배열의 깊이가 실제로 알려지지 않은 경우 욕심 많은 작업이 좋은 선택이 아닐 수 있습니다.

Array.prototype.flat 메소드 지원 상황

크롬	파이어 폭스	원정 여행	가장자리
75	67	12	지원되지 않습니다

크롬 안드로이드	Firefox Android	iOS 사파리	즉, 모바일	삼성 인터넷	안드로이드 웹 뷰
75	67	12.1	지원되지 않습니다	지원되지 않습니다	67

Array.prototype.flatMap 메서드

flat 방법을 추가하면 결합 된 함수 Array.prototype.flatMap 도 얻습니다. 우리는 실제로 위의 예에서 작동하는 것을 보았지만 하나 더 보자.

요소를 배열에 삽입하려면 ES2019가 이러한 기능을 추가하기 전에 어떻게 생겼습니까?

 등급 = [78, 62, 80, 64]

곡선 = grades.map (grade => [grade, grade 7])
// [[78, 85], [62, 69], [80, 87], [64, 71]]

flatmapped = [] .concat.apply ([], 곡선) // 이제 평평하고 플랫을 사용할 수 있지만 // 이전에 존재하지 않았습니다.
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

이제 Array.prototype.flat 갖기 때문에이 예제를 조금 개선 할 수 있습니다.

 등급 = [78, 62, 80, 64]

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

그러나 이것은 여전히 ​​기능적 프로그래밍에서 여전히 비교적 인기있는 패턴입니다. 배열 프로토 타입에 내장하는 것이 좋습니다. flatMap 사용하여 다음을 수행 할 수 있습니다.

 등급 = [78, 62, 80, 64]

flatmapped = grades.flatmap (grade => [grade, grade 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Array.prototype.flat 의 기본 매개 변수는 1입니다. flatMap 매개 변수없이 map 과 flat 결합하는 것과 같습니다. 따라서 flatMap 하나의 층 만 평평하게됩니다.

 등급 = [78, 62, 80, 64]

flatmapped = grades.flatmap (grade => [grade, [grade 7]]);
// [
// 78, [85],
// 62, [69],
// 80, [87],
// 64, [71]
//]

Array.prototype.flatMap 메소드 지원 상황

크롬	파이어 폭스	원정 여행	가장자리
75	67	12	지원되지 않습니다

크롬 안드로이드	Firefox Android	iOS 사파리	즉, 모바일	삼성 인터넷	안드로이드 웹 뷰
75	67	12.1	지원되지 않습니다	지원되지 않습니다	67

String.trimStart 및 String.trimEnd 메서드

ES2019에 대한 또 다른 좋은 추가 기능은 별명으로 일부 문자열 기능 이름을보다 명확하게 만듭니다. 이전에는 String.trimRight 및 String.trimLeft 사용할 수있었습니다.

 메시지 = "CS 101에 오신 것을 환영합니다"
message.trimright ()
// 'CS 101에 오신 것을 환영합니다'
message.trimleft ()
// 'CS 101에 오신 것을 환영합니다'
message.trimright (). trimleft ()
// 'CS 101에 오신 것을 환영합니다'

이것들은 훌륭한 기능이지만, 그들의 목적에 더 적합한 이름을주는 것이 도움이됩니다. 시작 및 끝 공간을 삭제하십시오.

 메시지 = "CS 101에 오신 것을 환영합니다"
message.trimend ()
// 'CS 101에 오신 것을 환영합니다'
message.trimstart ()
// 'CS 101에 오신 것을 환영합니다'
message.trimend (). trimstart ()
// 'CS 101에 오신 것을 환영합니다'

String.trimStart 및 String.trimEnd 메소드 지원 상황

크롬	파이어 폭스	원정 여행	가장자리
75	67	12	지원되지 않습니다

선택적 catch 바인딩

ES2019의 또 다른 좋은 특징은 try-catch 블록 옵션에서 매개 변수를 만드는 것입니다. 이전에는 모든 catch 블록이 매개 변수로 예외를 전달했습니다. 이것은 catch 블록의 코드가 무시하더라도 여전히 존재한다는 것을 의미합니다.

 노력하다 {
  parsed = json.parse (obj)
} catch (e) {
  // E를 무시하거나 Console.Log (OBJ)를 사용합니다.
}

더 이상 그렇지 않습니다. catch 블록에서 예외가 사용되지 않으면 전혀 필요한 것이 없습니다.

 노력하다 {
  parsed = json.parse (obj)
} 잡다 {
  Console.log (OBJ)
}

오류가 무엇인지 이미 알고 있고 트리거하는 데이터를 찾고 있다면 이것은 좋은 옵션입니다.

옵션 catch 결합에 대한 지원

크롬	파이어 폭스	원정 여행	가장자리
75	67	12	지원되지 않습니다

Function.toString() 메소드 변경

ES2019는 또한 Function.toString() 메소드가 실행되는 방식을 변경했습니다. 이전에는 공간이 완전히 제거되었습니다.

 함수 인사말 () {
  const name = 'css tricks'
  console.log (`hello from $ {name}`)
}

greeting.tostring ()
// 'function greeting () {\ nconst name = \'css tricks \ '\ nconsole.log (`hello from $ {name} //`) \ n}'

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

 함수 인사말 () {
  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'  
// '}' '

이것은 주로 내부 변화이지만, 이것이 블로거의 삶을 앞으로 또는 2 개보다 쉽게 ​​만들 수 있다고 생각할 수는 없습니다.

Function.toString() 메소드의 지원

크롬	파이어 폭스	원정 여행	가장자리
75	60	12 - 부분 지원	17 - 부분 지원

이것은 ES2019의 주요 새로운 기능입니다!

다음을 포함한 다른 새로운 기능을 탐색 할 수도 있습니다.

• 기호 설명
• 정렬 안정성
• JSON의 슈퍼 세트로서의 ECMAScript
• JSON.stringify

행복한 JavaScript 프로그래밍을하십시오!

위 내용은 모든 새로운 ES2019 팁과 요령의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!