Sep15, 2017·4 분 읽

지만 ES6 사양은 신선도,내가 생각하는 많은 개발자들은 여전히 이동하지 잘 알고 있습니다., 주된 이유는 아마도 사양 출시 직후에 웹 브라우저에서 지원이 좋지 않기 때문일 것입니다. 현재 사양은 2 년이 넘었으며 많은 최신 웹 브라우저가 ES6 과 잘 작동합니다. 는 경우에도(또는 당신의 클라이언트)사용하지 않 가장 최근 버전의 웹 브라우저를 사용할 수 있습 transpilers 이(바벨)을 변 ES6 소스 ES5 소스 중에 빌드 프로세스의 응용 프로그램. 그것은 한 걸음 앞으로 나아가고 ES6 을 배울 때가되었음을 의미합니다.

이 기사에서는 간결한 방법으로 가장 유용한 기능을 소개하려고 노력할 것입니다., 튜토리얼이 끝나면 기본 기술을 보유하고 실제 프로젝트에 적용 할 수있게됩니다. 가이드 또는 문서로 취급하지 마십시오. 내 목표는 당신이 더 깊이 파고 ES6 에 익숙해 지도록 격려하는 것입니다.

const 및 let keywords

const 를 사용하면 상수를 정의 할 수 있습니다(마지막으로!). let 을 사용하면 변수를 정의 할 수 있습니다. 그건 훌륭하지만 이미 자바 스크립트에 변수가 없습니까? 예,사실이지만 var 에 의해 선언 된 변수는 함수 범위를 가지며 맨 위에 게양됩니다. 선언되기 전에 변수를 사용할 수 있음을 의미합니다., 변수와 상수는 블록 범위({}로 둘러싸여 있음)를 가지며 선언 전에 사용할 수 없습니다.

배열을 도우미 기능

새로운 도우미 기능이 등장하는 작업을 용이 JS 배열에서 가장 유용한 경우. 필터링,요소 또는 모든 요소가 조건을 충족하는지 확인 또는 요소 변환과 같은 논리를 몇 번 구현 했습니까? 아마 매우 자주. 지금 당신은 당신을 위해 일을 할 수있는 훌륭한 언어 기능을 가지고 있습니다., 여기에서,내 생각에는,가장 가치 있는 기능:

forEach

실행하고 제공된 기능에 대한 각각 배열의 요소를 전달,배열 요소입니다.

새로 생성 배열의 동일한 수를 포함하는 요소이지만,출력 요소는 생성에 의해 제공되는 기능입니다. 그것은 단지 각 배열 요소를 다른 것으로 변환합니다.,

필터

새로 생성 배열의 하위 집합을 포함하는 원래의 배열입니다. 결과에는 제공된 함수에 의해 구현 된 테스트를 통과하는 이러한 요소가 있으며 true 또는 false 를 반환해야합니다.

find

발견한 첫 번째 요소는 테스트를 통과 구현에 의해 제공되는 기능을 반환해야 참 또는 거짓입니다.,

을 확인하는 경우 모든 배열의 요소 테스트를 통과 구현에 의해 제공되는 기능을 반환해야 참 또는 거짓입니다.

일부

확인을 경우 배열의 요소 테스트를 통과 구현에 의해 제공되는 기능을 반환해야 참 또는 거짓입니다.,

을 줄

기능을 적용으로 전달되는 첫 번째 매개 변수에 대하여 어큐뮬레이터와 각 요소에 배열(왼쪽에서 오른쪽),따라서 그것을 감소하는 단일 값입니다. 누산기의 초기 값은 감소 함수의 두 번째 매개 변수로 제공되어야합니다.

화살표수

의 구현은 아주 간단한 함수(다음과 같은 상기 합계 또는 상품)에 필요한 많이 쓰고 보일러., 그 치료법이 있습니까? 예,화살표 기능을 사용해보십시오!

화살표수할 수 있도 인라인 요소입니다. 그것은 정말 단순화 코드:

화살표 기능은 더 복잡할 수도 있습고 많은 라인의 코드:

클래스가

는 Java developer 놓치지 않는 수업으로 전환할 때 JS 프로젝트가 있습니까?, 프로토 타입 상속을위한 마법 코드를 작성하는 대신 자바 언어 에서처럼 명시 적 상속을 좋아하지 않는 사람은 누구입니까? 일부 JS 개발자가 불만을 제기했지만 클래스는 ES6 에 도입되었습니다. 그들은 상속의 개념을 바꾸지 않습니다. 그것들은 프로토 타입 상속을위한 구문 론적 설탕 일뿐입니다.

강화체 리터럴

개체 리터럴 향상되었습니다., 이제 우리가 할 수 있습이 훨씬 더 쉽게:

  • 정의 필드를 가진 변수를 할당 같은 이름의
  • 함수를 정의
  • 동적 정의(계산) 속성

템플릿 문자열

사랑하는 쓰 큰 문자열 변수에 연결? 나는 우리 중 소수 민족을 믿는다. 누가 그것을 읽는 것을 싫어합니까? 나는 모두를 확신한다. 다행히도 ES6 은 변수에 대한 자리 표시 자가있는 매우 사용하기 쉬운 문자열 템플릿을 소개합니다.,

유의하시기 바랍니다,그 작성할 수 있습니다 multi-라인 텍스트입니다.

중요:아포스트로피 대신 백 스틱을 사용하여 텍스트를 줄 바꿈합니다.

기본 함수 인수

가능한 모든 함수 매개 변수를 제공하는 것이 마음에 들지 않습니까? 기본값을 사용합니다.

나머지 부분과 확산 연산자

할 수 있습의 추출 또는 배열체 내용으로 하나의 요소입니다.,

를 들어—얕은 복사의 배열

예 병합 배열:

고 싶으신 바인딩은 처음 몇 가지 기능 매개 변수를 변수,그리고 다른 사람을 하나의 변수로 배열? 이제 당신은 아주 쉽게 할 수있다.,

선언 및

배열

할 수 있습 추출의 요청에서 요소를 배열하고 할당하는 변수.

의 개체

수출의 속성에서 객체를 할당하여 그들의 변수를 동일한 이름 속성으로 표시됩니다.,

약속을

약속 약속(예,내가 그것을 알고 이상한 소리)가 당신을 얻을 것이 미래에 결과의 지연 또는 오래 실행되는 작업입니다. 약속에는 두 가지 채널이 있습니다:첫 번째는 결과에 대한 것이고 두 번째는 잠재적 인 오류에 대한 것입니다. 결과를 얻으려면 콜백 함수를’then’함수 매개 변수로 제공합니다. 오류를 처리하기 위해 콜백 함수를’catch’함수 매개 변수로 제공합니다.

랜덤 함수 호출 때문에 예제의 출력이 각 실행마다 다를 수 있음을 유의하십시오.,

요약

나는 당신이 문서를 즐길 바랍니다. 몇 가지 연습을 원한다면 학습 과정에 샌드 박스를 사용할 수 있습니다.https://es6console.com/. 자세한 정보가 필요하면 여기에서 찾을 수 있습니다.