여기에 새로운 모든 예제 2016,2017 및 2018

라자 라오 드브

자바스크립트(자바스크립트)의 새로운 내용을 추적하는 것은 어렵다. 그리고 유용한 코드 예제를 찾는 것이 더 어렵습니다.

그래서 이 문서에서 나는 모든 18 기능에 나와 있는 TC39 의 완성되는 제안에 추가되었 ES2016,ES2017 및 ES2018(최종본)및 그들에게 보여 유용한 예이다.

이것은 꽤 긴 게시물이지만 쉽게 읽을 수 있어야합니다. 넷플릭스 파티 읽기”로이 생각.”이 말까지,난 당신이 모든 기능에 대한 지식의 톤을해야합니다 것을 약속드립니다.

좋아,이 하나 하나를 통해 가자.

배열.프로토 타입.포함

includes은 배열의 간단한 인스턴스 메서드이며 항목이 배열에 있는지 쉽게 찾을 수 있습니다(indexOf과 달리NaN포함).

ECMAScript2016 또는 ES7—배열입니다.프로토 타입.포함()

하찮은 일:자바 스크립트 사양 사람들은 그것을contains이라고 부르기를 원했지만,이것은 분명히 이미 무 툴스에 의해 사용 되었기 때문에includes을 사용했습니다.

지수 infix operator

덧셈과 뺄셈과 같은 수학 연산에는 각각+-과 같은 중위 연산자가 있습니다. 이와 마찬가지로**중위 연산자는 일반적으로 지수 연산에 사용됩니다. 이 경우Math.pow대신** 이 도입되었습니다.

ECMAScript2016 또는 ES7—**수 연산자 중위

체입니다.값()

Object.values() Object.keys()과 비슷하지만 프로토 타입 체인의 모든 값을 제외한 객체 자체 속성의 모든 값을 반환하는 새로운 함수입니다.

ECMAScript2017(ES8)—개체입니다.값()

개체.항목()

Object.entries() Object.keys과 관련이 있지만 키만 반환하는 대신 배열 방식으로 키와 값을 모두 반환합니다. 이를 통해 루프에서 객체를 사용하거나 객체를 맵으로 변환하는 등의 작업을 매우 간단하게 수행 할 수 있습니다.

예 1:

ECMAScript2017(ES8)—를 사용하여 개체입니다.항목()루프에서

예 2:

ECMAScript2017(ES8)—를 사용하여 개체입니다.개체를 맵으로 변환하는 항목()

문자열 패딩

빈 문자열이나 다른 문자열을 원래 문자열의 시작 또는 끝에 추가하거나 앞에 추가 할 수있는 두 가지 인스턴스 메서드가 문자열—String.prototype.padStart String.prototype.padEnd에 추가되었습니다.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

이것은 우리가 예쁜 인쇄 디스플레이 또는 터미널 인쇄와 같은 시나리오에서 일을 정렬 할 때 유용합니다.

3.1 패드 시작 예:

아래 예제에서는 다양한 길이의 숫자 목록이 있습니다. 표시 목적으로 모든 항목의 길이가 같은 10 자리가되도록”0″을 앞에 추가하려고합니다. 우리는 쉽게 이것을 달성하기 위해padStart(10, '0')를 사용할 수 있습니다.

ECMAScript2017—padStart 예

3.2 padEnd 예:

padEnd 이 정말 편리할 때 우리는 인쇄하는 여러 항목이의 다양한 길이와 오른쪽으로 맞춥니다.

아래의 예는padEnd,padStartObject.entries이 모두 함께 모여 아름다운 출력을 생성하는 방법에 대한 좋은 현실적인 예입니다.

ECMAScript2017—padEnd,padStart 과 개체입니다.항목 예

3.3 ⚠️ 이모티콘 및 기타 더블바이트 문자

에 대한 패드 시작 및 패드 끝 그림 이모티콘 및 기타 더블바이트 문자는 여러 바이트의 유니코드를 사용하여 표시됩니다. 그래서 패드 스타트와 패드 엔드가 예상대로 작동하지 않을 수 있습니다!예를 들면:의 우리가 패드 문자열heart에 도달하려고한다고 가정 해 봅시다10문자 이모티콘과 함께. 결과는 아래와 같이 표시됩니다:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

이것은 2 코드 포인트 길이('\u2764\uFE0F')이기 때문입니다! heart라는 단어 자체는 5 자이므로 패드에 총 5 자만 남아 있습니다. 그래서 어떤 일이 일어나는지는'\u2764\uFE0F'를 사용하여 두 개의 하트를 패딩하고 그 하트를 생성한다는 것입니다. 마지막 하나는 단순히 심장의 첫 번째 바이트를 사용합니다\u2764이는 생성한다.

그래서 우리는 결국: ❤️❤️❤heart

추신:이 링크를 사용하여 유니 코드 문자 변환을 확인할 수 있습니다.

객체.이 메서드는 주어진 개체의 모든 속성에 대한 모든 세부 정보(게터get및 세터set메서드 포함)를 반환합니다. 이를 추가하는 주요 동기는Object.assign와 달리 게터 및 세터 기능을 복사하는 다른 객체로 객체를 얕은 복사/복제 할 수 있도록하는 것입니다.

객체.얕은 복사본에게 원래 소스 객체의 게터와 세터 기능을 제외한 모든 세부 사항을 할당.

아래 예제에서는Object.assignObject.getOwnPropertyDescriptors의 차이점과Object.defineProperties을 보여 원본 개체Car을 새 개체ElectricCar에 복사합니다. 당신은Object.getOwnPropertyDescriptors를 사용하여,discount게터 및 세터 함수도 대상 객체에 복사되는 것을 볼 수 있습니다.

이전…

개체를 사용하기 전에.할당

후…

2017—객체.함수 매개 변수에 후행 쉼표 추가

이것은 마지막 함수 매개 변수 뒤에 후행 쉼표를 가질 수있는 사소한 업데이트입니다. 왜? 새로운 개발자 만 비난받을 수 있도록 힘내 비난과 같은 도구를 돕기 위해.

아래 예제는 문제와 해결책을 보여줍니다.참고:후행 쉼표로 함수를 호출할 수도 있습니다!

비동기/대기

이,지금까지,당신이 저를 요구하는 경우에 가장 중요하고 가장 유용한 기능입니다. 비동기 함수를 사용하면 콜백 지옥을 처리하지 않고 전체 코드를 단순하게 만들 수 있습니다.

async키워드는 자바 스크립트 컴파일러에 함수를 다르게 처리하도록 지시합니다. 컴파일러는 해당 함수 내에서await키워드에 도달할 때마다 일시 중지됩니다. await이후의 표현식은 약속을 반환하고 약속이 해결되거나 거부 될 때까지 더 이상 이동하기 전에 대기한다고 가정합니다.

아래 예에서getAmount함수는 두 개의 비동기 함수getUsergetBankBalance을 호출합니다. 우리는 이것을 약속으로 할 수 있지만async await를 사용하는 것이 더 우아하고 간단합니다.

ECMAScript2017(ES8)비동기 기다리고 있는 기본적인 예제

6.1 비동기 기능에 자신을 돌아 약속입니다.

비동기 함수의 결과를 기다리는 경우 약속의then구문을 사용하여 결과를 캡처해야 합니다.

다음 예제에서는console.log을 사용하여 결과를 기록하지만 이중 및 추가에는 기록하지 않습니다. 그래서 우리는 대기하고then구문을 사용하여 결과를console.log에 전달하려고합니다.이 스크립트는 다음과 같이 작동합니다.

6.2 호출 비동기/병렬로 대기

이전 예에서 우리는 두 번 기다리고 호출하지만,때마다 우리는 1 초(총 2 초)를 기다리고 있습니다. 대신abPromise.all를 사용하여 서로 의존하지 않기 때문에 병렬 처리 할 수 있습니다.

ECMAScript2017(ES8)—를 사용하여 약속입니다.모두 비동기 병렬 처리/대기

6.3 오류 처리 비동기/대기 함수

비동기 대기를 사용할 때 오류를 처리하는 다양한 방법이 있습니다.

옵션 1—함수 내에서 캐치 시도 사용

비동기/대기 함수 내에서 캐치 시도 사용

옵션 2—모든 기다리고 있습니다 식을 잡아

모든await식이 약속을 반환하므로 아래 그림과 같이 각 줄의 오류를 잡을 수 있습니다.

옵션 3—전체 비동기 잡기—대기 함수

현재 최종 초안에 있으며 2018 년 6 월 또는 7 월에 출시될 예정입니다. 아래에서 다루는 모든 기능은 4 단계에 있으며 2018 에 포함될 것입니다.

1. 공유 메모리 및 원자학

이것은 거대하고 꽤 고급 기능이며 제이에스 엔진의 핵심 향상 기능입니다.

주요 아이디어는 자바 스크립트에 멀티 스레딩 기능의 일종을 가지고하는 것입니다.

이 작업은 기본적으로 공유 메모리 공간에 데이터를 저장하는 셰어다레이버퍼라는 새로운 유형의 전역 객체에 의해 수행됩니다. 따라서이 데이터는 주 스레드와 웹 작업자 스레드간에 공유 될 수 있습니다.

지금까지 주 스레드와 웹 작업자 간에 데이터를 공유하려면postMessage을 사용하여 데이터를 복사하여 다른 스레드로 보내야 했습니다. 더 이상!

주 스레드와 여러 웹 작업자 스레드에서 데이터에 즉시 액세스할 수 있습니다.

하지만 스레드 간에 메모리를 공유하면 경쟁 조건이 발생할 수 있습니다. 경쟁 조건을 피하기 위해”원자학”글로벌 객체가 도입됩니다. 아토믹스는 스레드가 데이터를 사용할 때 공유 메모리를 잠그는 다양한 방법을 제공합니다. 또한 해당 공유 메모리에서 이러한 데이터를 안전하게 업데이트하는 방법을 제공합니다.

권장 사항은 일부 라이브러리를 통해이 기능을 사용하는 것입니다,하지만 지금은이 기능의 상단에 내장 된 라이브러리가 없습니다.

당신이 관심이 있다면,나는 읽는 것이 좋습니다:

  1. 노동자에서 공유 메모리로—루카스프코스타
  2. 공유다레이버퍼 만화 소개-린 클라크
  3. 공유 메모리와 원자학-악셀 라우슈마이어 박사

2. 태그가 지정된 템플릿 리터럴 제한 제거

첫째,이 기능을 더 잘 이해할 수 있도록”태그가 지정된 템플릿 리터럴”이 무엇인지 명확히해야합니다.

2015+에서는 개발자가 문자열 보간 방법을 사용자 정의 할 수있는 태그가 지정된 템플릿 리터럴이라는 기능이 있습니다. 예를 들어,표준 방식으로 문자열은 아래와 같이 보간됩니다…

태그가 지정된 리터럴에서 문자열 리터럴의 하드코딩된 부분(예:)과 대체 변수(예:)를 매개 변수로 사용자 지정 함수(예:greet)에 수신하는 함수를 작성하고 해당 사용자 지정 함수에서 원하는 것을 반환할 수 있습니다.

아래의 예는 우리의 사용자 정의”태그”기능greet“좋은 아침!””안녕하세요”등 문자열 리터럴에 하루의 시간에 따라 사용자 정의 문자열을 반환합니다.

사용자 지정 문자열 보간을 보여주는 태그 함수 예

이제 우리는”태그가 지정된”함수가 무엇인지 논의 했으므로 많은 사람들이 다른 도메인에서이 기능을 사용하려고합니다.따라서 내부적으로 다른 도메인의 규칙(예:터미널 규칙)을 사용하는 태그가 지정된 함수가 있으면 구문 오류가 발생할 수 있습니다.

2018 에서 규칙은 태그가 지정된 함수가”조리 된”속성(잘못된 문자가”정의되지 않음”인 경우)을 가진 개체의 값을 반환 한 다음”원시”속성(원하는대로 포함)을 반환하는 한 유효하지 않은 이스케이프 문자를 허용하도록 완화됩니다.

정규 표현식에 대한”점”플래그

현재 정규식에 있지만 점(“.”)는 단일 문자와 일치해야하며\n \r \f etc과 같은 새 줄 문자와 일치하지 않습니다.

예:

//Before/first.second/.test('first\nsecond'); //false

이 향상 기능을 사용하면 도트 연산자가 단일 문자를 일치시킬 수 있습니다. 이 작업을 위해 우리가 정규식을 만들 때 아무것도 중단하지 않도록하기 위해,우리는\s플래그를 사용해야합니다.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

제안서 문서의 전체 내용은 다음과 같습니다:

이 경우 정규 표현식을 사용할 수 없습니다.”비아/에스 플래그

정규 표현식 명명 된 그룹 캡처?

이 향상은 파이썬,자바 등과 같은 다른 언어에서 유용한 정규 표현식 기능을 제공합니다.”이 기능을 통해 정규 표현식을 작성하는 개발자는 정규 표현식에서 그룹의 다른 부분에 대해(?<name>...)형식의 이름(식별자)을 제공 할 수 있습니다. 그런 다음 그 이름을 사용하여 필요한 그룹을 쉽게 잡을 수 있습니다.

4.1 기본 명명된 그룹 예제

4.2 정규식 자체 내에서 명명 된 그룹을 사용하여

\k<group name>형식을 사용하여 정규식 자체 내에서 그룹을 다시 참조 할 수 있습니다. 다음 예제에서는 작동 방식을 보여 줍니다.그룹 이름을 다시 참조하는 정규식 그룹입니다.>

4.3 문자열에 명명 된 그룹 사용.프로토 타입.바꾸기

명명된 그룹 기능이 이제 문자열의replace인스턴스 메서드로 구워집니다. 그래서 우리는 문자열에서 단어를 쉽게 바꿀 수 있습니다.

예를 들어”이름,성”을”성,이름”으로 변경합니다.개체

나머지 연산자...(세 개의 점)에 대 한 속성을 추출할 수 있습니다.

5.1 나머지를 사용하여 원하는 속성 만 추출 할 수 있습니다.

5.2 더 나은,당신은 원치 않는 항목을 제거 할 수 있습니다! ??

개체에 대한 확산 속성

확산 속성도...세 개의 점이 있는 나머지 속성처럼 보이지만 차이점은 스프레드를 사용하여 새 개체를 생성(재구성)한다는 것입니다.

팁:스프레드 연산자는 등호 오른쪽에 사용됩니다. 나머지는 등호 왼쪽에 사용됩니다.

이것은 우리가 어떤 문자열이 바로*앞에*어떤 다른 문자열이 존재하는지 확인할 수 있게 해주는 정규식에 대한 개선이다.

이제 그룹(?<=…) (물음표,보다 작음,같음)을 사용하여 긍정적 인 어설션을 볼 수 있습니다.

긍정적 인 주장:의 우리가#기호 단어winning앞에 존재하는지 확인하려는 가정 해 봅시다(즉:#winning)및 정규식은 문자열”승리”를 반환 할 수 있습니다. 여기 너가 그것을 쓸텐데 까 라고 있는다.

2018 — (?<=…) for positive assertion

음수 어설션:우리가 그 숫자 앞에$기호가 아닌 0 기호가있는 줄에서 숫자를 추출하고 싶다고 가정 해 봅시다.

<!…)음수 어설션

정규 표현식 유니 코드 속성 이스케이프

다양한 유니 코드 문자와 일치하도록 정규 표현식을 작성하는 것은 쉽지 않았습니다. 같은 것들\w , \W , \d 등 영어 문자와 숫자 만 일치시킵니다. 그러나 힌디어,그리스어 등과 같은 다른 언어의 숫자는 어떻습니까?

는 유니 코드 속성 이스케이프가 들어오는 곳입니다. 유니 코드는 각 기호(문자)에 대한 메타 데이터 속성을 추가하고이를 사용하여 다양한 기호를 그룹화하거나 특성화합니다.

예를 들어,유니코드 데이터베이스는Script이라는 속성에서Devanagari값을 가진 속성과Script_Extensions라는 다른 속성에서Devanagari값을 가진 모든 힌디어 문자(100)를 그룹화합니다. 그래서 우리는Script=Devanagari을 검색하고 모든 힌디어 문자를 얻을 수 있습니다.

데바 나가리 등 마라타어,힌디어,산스크리트어와 같은 다양한 인도 언어에 사용할 수 있습니다.

\p를 사용하여 이스케이프 문자와{Script=Devanagari}을 사용하여 모든 인도 문자를 일치시킬 수 있습니다. 즉,정규식에서\p{Script=Devanagari}을 사용하여 모든 데바 나가리 문자를 일치시킬 수 있습니다.2018 년 10 월 15 일에 확인함.

//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

마찬가지로 유니 코드 데이터베이스는Script_Extensions(및Script)속성 아래의 모든 그리스 문자를Greek값으로 그룹화합니다. 따라서Script_Extensions=Greek또는Script=Greek을 사용하여 모든 그리스 문자를 검색 할 수 있습니다.

즉,정규식에서\p{Script=Greek}를 사용하여 모든 그리스 문자를 일치시킬 수 있습니다.2018 년 10 월 15 일에 확인함.

//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

또한 유니코드 데이터베이스는 부울 속성 아래에 다양한 유형의 이모티콘을 저장합니다Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, 속성 값이`참`인Emoji_Modifier_Base입니다. 그래서 우리는 단순히 선택하여 모든 이모티콘을 검색 할 수 있습니다Emoji사실로.

즉,\p{Emoji},\Emoji_Modifier등을 사용하여 다양한 종류의 이모티콘을 일치시킬 수 있습니다.

다음 예제는 모든 것을 명확하게 만듭니다.1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년 10 월 15 일,1999 년2018 제안

약속.프로토 타입.마지막으로()

finally() 약속에 추가된 새 인스턴스 메서드입니다. 주요 아이디어는resolve또는reject후에 콜백을 실행하여 정리하는 데 도움이되는 것입니다. finally콜백은 아무 값도 없이 호출되며,어떤 경우에도 항상 실행됩니다.

의 다양한 경우를 살펴 보자.이 문제를 해결하려면 다음 단계를 수행하십시오.

거부 사례에서 마지막으로()
약속 사례에서 오류가 발생했습니다.
비동기 반복

이것은*매우*유용한 기능입니다. 기본적으로 비동기 코드 루프를 쉽게 만들 수 있습니다!

이 기능은 루프에서 약속(또는 약속이 많은 배열)을 반환하는 비동기 함수를 호출 할 수있는 새로운”대기 중”루프를 추가합니다. 멋진 점은 루프가 다음 루프로 수행하기 전에 각 약속이 해결 될 때까지 대기한다는 것입니다.그 결과,이 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기 중 하나 인 두 개의 반복기

이 유용한 경우,박수를 클릭하십시오? 당신의 지원을 보여주기 위해 몇 번 아래 버튼을 아래로! ⬇⬇⬇ ??

내의 다른 글

    인 이러한 유용한 ECMAScript2015(ES6)팁과 트릭5JavaScript””나쁜 부품에 고정되어 있 ES6는”Class”에 ES6New”Bad”부분입니까?

답글 남기기

이메일 주소는 공개되지 않습니다.