(의) ES6 / ES2015 코어 마스터 30 분간

(이하 ES6라고 함) (6)는 ECMAScript를 차세대 표준 자바 스크립트 언어이다. ES6의 현재 버전은 2015 년에 발표 된 때문에 또한 ECMAScript를 2015 공지.

즉, ES6는 ES2015입니다.

하지 않지만 모든 브라우저 호환 ES6 모든 기능을하지만, 점점 더 많은 프로그래머는 실제 프로젝트에 ES6를 사용하기 시작했다. 당신이 ES6을 사용하려고하지만, 다른 사람의 문법 포인트를 이해하기 위해되지 않은 경우에도 그래서 당신은 또한의 ES6을 알아야 할 ...

우리가 ES6 문법을 설명하기 전에, 우리는 먼저 바벨을 이해해야합니다.
바벨

바벨 ES6 트랜스 코더 널리 이용되는 종래 환경에서 실행하는 코드 ES6 ES5 코드로 변환 할 수있다. 우리는 바벨을 사용하여 자신의 사용자 정의 도구는 특정 프로세스가 바벨의 공식 웹 사이트에서 직접 볼 수 있습니다 사용하도록 선택할 수 있습니다 :

가장 일반적인 특징 ES6

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
이들은 전세계에 우리가 할 수있는, 기본적으로 그 내용, 당신을 두려워 가장 일반적으로 사용되는 여러 ES6 문법되지 않습니다입니다! 나는 배우고, 이해하는 모습을 확인하기 위해, 그들을 설명하는 언어와 예제를 이해하는 가장 쉬운을 사용합니다.

하자, CONST

사용 모두 var비슷한는 변수를 선언하는 데 사용되지만, 실제 응용 프로그램에서 그들은 자신의 특별한 목적을 가지고있다.
다음의 예에서 첫번째보기 :

var name = 'zach'

while (true) {
    var name = 'obama' console.log(name) //obama break } console.log(name) //obama

사용 var ES5 세계 유일의 범위와 기능 범위 때문에, 블록 레벨없는 비이성적 인 장면을 많이 가져 범위를, 두 개의 출력은 오바마있다. 첫 번째 시나리오는 내부 덮개 변수 외부 변수를보고있는 것입니다. 그리고 let실제로 자바 스크립트 블록 레벨 범위를 추가했다. 그것으로 선언 된 변수는 오직 let블록 명령 내에서 유효한이 있습니다.

let name = 'zach'

while (true) {
    let name = 'obama' console.log(name) //obama break } console.log(name) //zach

또 var하게 합리적인 시나리오는 다음의 예를 참조 누설 전역 변수를 계수하는 루프 변수 :

var a = [];
for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10

위의 코드는, i 변수가 유효 세계적으로 VAR를 선언된다. 그래서 때마다주기, 최종 출력에 이르는, 난의 이전 값을 덮어 쓰게됩니다 새 값은 전 년대의 마지막 라운드의 값입니다. 사용은이 문제를 가지고 있지 보자.

var a = [];
for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 

당신은 그러나이 문제를 해결하는 방법 클로저, ES6에서 이해하지 않는 경우의는 좀 더 일반적인 예를 살펴 보자.

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){ clickBoxs[i].onclick = function(){ console.log(i) } }

좋아하는 것 우리는 다른 내가 보여, 다른 clickBox을 클릭하는 것입니다 만, 사실은 우리가 clickBox을 클릭 어떤 상관없이, 출력은 5 점이다. 여기에서 우리는 폐쇄 그것을 해결하는 방법을 확인합니다.

function iteratorFactory(i){
    var onclick = function(e){ console.log(i) } return onclick; } var clickBoxs = document.querySelectorAll('.clickBox') for (var i = 0; i < clickBoxs.length; i++){ clickBoxs[i].onclick = iteratorFactory(i) } 

const또한 변수를 선언하는 데 사용하지만, 문은 상수이다. 일단 선언, 상수의 값을 변경할 수 없습니다.

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

우리가 CONST 문 상수를 변경하려고하면, 브라우저는 오류를 줄 것이다.
좋은 시나리오가 CONST 우리는 당신이 변수 타사 라이브러리를 선언하고 실수 피하기 위해 미래를 선언 CONST를 사용하는 경우를 참조 할 때 이름을 변경하고 버그를 일으킬 것입니다 :

const monent = require('moment')

클래스, 확장, 슈퍼

이 세 가지 특성은 가장 골치 아픈의 여러 부분에 ES5 관련 : 프로토 타입 생성자, 상속 ... 당신은 여전히 ​​문법의 복잡한 있습니다를 그들이 걱정으로? 매우 그것을 얽힌 곳 당신은 여전히 ​​끝 지점에 포인터 있습니까?

ES6으로 우리는 더 이상 걱정하지!

ES6이 글을 쓰는 기존의 언어에 가까운 제공, 우리는 클래스 (클래스)의 개념을 소개합니다. 새로운 표현은 객체 지향 프로그래밍 구문, 그리고 더 많은 사용자 친화적 인처럼, 작문 클래스 객체의 프로토 타입을 명확하게 할 수 있습니다.

class Animal {
    constructor(){
        this.type = 'animal' } says(say){ console.log(this.type + ' says ' + say) } } let animal = new Animal() animal.says('hello') //animal says hello class Cat extends Animal { constructor(){ super() this.type = 'cat' } } let cat = new Cat() cat.says('hello') //cat says hello

첫째, 위의 코드를 사용하여 class는 "클래스"는이 볼 수있는 정의 constructor1, 생성자 인 방법을, this키워드는 개체 인스턴스를 나타냅니다. 간단히, constructor방법 및 개체의 자체 인스턴스의 속성의 정의 내에서 constructor메서드와 속성의 외부 정의를 공유 할 수있는 개체의 모든 인스턴스입니다.

클래스 수 사이에 의해 extends키워드 상속을 달성, ES5에 비해 프로토 타입 체인을 수정하여 상속을 취소하고 훨씬 쉽게합니다. 고양이 클래스의 위의 정의에 의해 extends키워드, 모든 속성과 메소드 동물 클래스를 상속합니다.

super상위 클래스 대신 인스턴스 (즉,이 개체의 부모 클래스)를 참조 키워드. 서브 클래스가 있어야합니다 constructor메서드 호출 super새로운 인스턴스를 생성 할 때, 그렇지 않으면 오류가 발생하지, 방법. 서브 클래스가 소유하고 있지 않기 때문입니다 this오브젝트를하지만, 부모 클래스의 상속 this후 처리를 개체를. 당신이 전화를하지 않으면 super방법, 서브 클래스는 않을 것이다 this오브젝트.

ES6 상속 메커니즘은, 본질은, (먼저 슈퍼 메서드를 호출해야합니다)이 부모 클래스의 객체 인스턴스를 생성 생성자 서브 클래스는이 수정 사용하는 것입니다.

당신이 반응을 작성하는 경우 PS, 그것은 이상의 세 가지 반응의 최신 버전에서 많이 나타나는 것을 발견했을 것이다. 각 구성 요소는 연속 만드는 것입니다 React.Component클래스를. 문서를 반응 참조

화살표 기능

이것은 아마도 새로운 기능이 가장 일반적으로 사용되는 ES6, 많은 명확의 원래 표현보다 간단 할 함수를 작성하는 데 사용할 :

function(i){ return i + 1; } //ES5 (i) => i + 1 //ES6

간단한 바로 ..., 단순히 터무니
방정식은 더 복잡하다면, 당신은 사용할 필요가 {}코드를 포장 :

function(x, y) { 
    x++;
    y--;
    return x + y; } (x, y) => {x++; y--; return x+y}

보다 간결 보는 또한, 화살표 기능은 슈퍼 무적 기능이 있습니다!
오랫동안의 자바 스크립트 언어 this객체가 애 태우게하는 문제가있다, 객체에서이 방법의 사용은 매우주의해야합니다. 예를 들면 :

class Animal {
    constructor(){
        this.type = 'animal' } says(say){ setTimeout(function(){ console.log(this.type + ' says ' + say) }, 1000) } } var animal = new Animal() animal.says('hi') //undefined says hi

때문에 위의 코드는 불평 실행 점은 전역 객체입니다. 따라서 제대로 실행할 수 있도록하기 위해, 두 개의 기존 솔루션이 있습니다 :setTimeoutthis

1. 첫 번째는 다음이 자기를 참조하는,이 자체를 전달하는 것입니다

      says(say){
          var self = this;
          setTimeout(function(){ console.log(self.type + ' says ' + say) }, 1000)

   2. 두 번째 방법이 사용된다 bind(this), 즉,

      says(say){
          setTimeout(function(){
              console.log(this.type + ' says ' + say) }.bind(this), 1000)

   하지만 지금 우리는 화살표 기능, 당신은 너무 많은 문제가 필요하지 않습니다 있습니다 :

class Animal {
    constructor(){
        this.type = 'animal' } says(say){ setTimeout( () => { console.log(this.type + ' says ' + say) }, 1000) } } var animal = new Animal() animal.says('hi') //animal says hi 

우리는 화살표 기능, 객체가시기를 정의하는 객체의 몸의 기능을 사용하면 사용하지 않을 경우에 동안.
이 기능 화살표 결합하는 내부기구가 있기 때문에하지 실제 원인이 소유하지 않은 화살표의 함수이고, 그것은이 외부 상속 그래서이 외부 코드 블록의 내부이다.

템플릿 문자열

우리는 문서의 큰 부분을 HTML 콘텐츠를 삽입 할 때이 점은 매우 유용 우리가 일반적으로 콧수염로 등 일부 템플릿 도구 라이브러리를 인용 전에, 그래서 기존의 표현은 매우 골칫거리입니다.

당신은 다음 코드 조각을 볼 수 있습니다 :

$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale + "</em> are on sale!" ); 

우리는 변수 텍스트를 연결하고 ES6``템플릿 문자열의 새로운 기능을 사용하기 위해 '+'기호의 무리를 사용, 그래서 우리는 직접 작성할 수 있습니다 :

$("#result").append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

안티 인용 부호로 （\) $ 来标识起始，用{}`변수를 참조하고, 모든 공간과 들여 쓰기 출력 존재에 보존되어, 아주 멋진 아닌가요? !

ES6은 또한 예로서 신택스를 사용하여 시작 버전 1.0.3에서 라우터 반응 :

<Link to={`/taco/${taco.name}`}>{taco.name}</Link> 

라우터 반응

destructuring

ES6 특정 패턴에 따라시키고, 개체가 해체 (Destructuring)이라한다 치의 배열 변수 할당로부터 추출된다.

아래의 예를 참조 :

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog} console.log(zoo) //Object {cat: "ken", dog: "lili"}

그것은 완전히 ES6와 같이 쓸 수있다 :

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog} console.log(zoo) //Object {cat: "ken", dog: "lili"}

차례로, 쓸 수있다 :

let dog = {type: 'animal', many: 2}
let { type, many} = dog console.log(type, many) //animal 2 

기본적으로, 나머지

기본값은 기본값을 의미하는 매우 간단합니다. 우리는 부르심, 아래의 예에서 볼 수 animal()매개 변수 메소드를 전달 잊고, 전통적인 접근 방식이 하나 추가하는 type = type || 'cat' 기본값을 지정할 수 있습니다.

function animal(type){
    type = type || 'cat' console.log(type) } animal()

우리는 ES6 직접 쓰기를 사용하는 경우 :

function animal(type = 'cat'){
    console.log(type) } animal() 

마지막으로 나머지 문법은 예를 들어 매우 간단하고 직접 모습입니다 :

function animals(...types){ console.log(types) } animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

즉 ES6하지 않은 경우, 우리는 다음 ES5를 사용해야합니다 arguments.

개요

다음은 가장 일반적으로 사용되는 ES6 문법의 일부입니다, 우리는 문법의 20 %, 매일 사용 ES6의 80 %를 차지 말할 수 있습니다 ...

 

30분가 ES6 / ES2015 코어 마스터 (저급)