ES6 특성 일람

ECMAScript 6 (이하 ES6) 는 자 바스 크 립 트 언어의 차세 대 표준 이다.현재 버 전의 ES6 는 2015 년 에 발 표 된 것 이기 때문에 ECMAScript 2015 라 고도 부른다.
ES6 가 ES 2015 인 셈 이다.
현재 모든 브 라 우 저가 ES6 의 모든 기능 을 호 환 할 수 있 는 것 은 아니 지만, 점점 더 많은 프로그래머 들 이 실제 프로젝트 에서 ES6 를 사용 하기 시작 했다.그래서 지금 ES6 를 사용 하지 않 더 라 도 남 의 것 을 알 아 보기 위해 서 는 ES6 문법 을 좀 알 아야 하 는데...
우리 가 정식으로 ES6 문법 을 설명 하기 전에, 우 리 는 먼저 바벨 을 이해 해 야 한다.Babel
바벨 은 ES6 코드 를 ES5 코드 로 변환 해 기 존 환경 에서 실행 할 수 있 는 광범 위 하 게 사용 되 는 ES6 디코더 다.여러분 은 자신의 습관 적 인 도 구 를 선택 하여 Babel 을 사용 할 수 있 습 니 다. 구체 적 인 과정 은 Babel 홈 페이지 에서 직접 볼 수 있 습 니 다.
가장 자주 사용 하 는 ES6 특성 let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 은 ES6 에서 가장 자주 사용 하 는 몇 가지 문법 입 니 다. 기본적으로 그들 을 배우 면 우 리 는 세상 을 돌아 다 니 면서 도 두 렵 지 않 을 수 있 습 니 다!나 는 가장 통속 적 이 고 알 기 쉬 운 언어 와 예 를 들 어 그것들 을 설명 할 것 이 며, 한 번 보면 곧 알 게 될 것 이 라 고 보장 할 것 이다.
let, const
이 두 가지 용 도 는 var 와 유사 하여 모두 변 수 를 설명 하 는 데 쓰 이지 만 실제 운용 에서 그들 둘 은 모두 각자 의 특수 한 용 도 를 가지 고 있다.먼저 아래 의 이 예 를 살 펴 보 자.

var name = 'zach'

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

console.log(name)  //obama

var 를 사용 하여 두 번 의 출력 은 모두 obama 입 니 다. 이것 은 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 에서 설명 한 것 으로 전체 범위 에서 유효 합 니 다.그래서 매번 순환 할 때마다 새로운 i 값 은 오래된 값 을 덮어 쓰 고 마지막 출력 은 마지막 라운드 의 i 값 입 니 다.let 를 사용 하면 이 문제 가 발생 하지 않 습 니 다.

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)
    }
}

우 리 는 원래 서로 다른 클릭 박스 를 클릭 하여 서로 다른 i 를 표시 하 기 를 원 했 지만, 사실은 우리 가 어떤 클릭 박스 를 클릭 하 든 출력 하 는 것 은 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 는 좋 은 응용 장면 이 있 습 니 다. 바로 우리 가 제3자 라 이브 러 리 를 인용 할 때 설명 하 는 변 수 를 const 로 설명 하면 미래 에 부주의 로 이름 을 바 꾸 어 bug 가 발생 하 는 것 을 피 할 수 있 습 니 다.

const monent = require('moment')

class, extends, super
이 세 가지 특성 은 ES5 에서 가장 골 치 아 픈 몇 가지 부분 과 관련된다. 원형, 구조 함수, 계승... 당신 은 아직도 그들의 복잡 하고 어 려 운 문법 때문에 고민 하고 있 습 니까?너 는 아직도 지침 이 어디 를 가리 키 는 지 매우 고민 하고 있 니?
ES6 가 있 으 면 더 이상 고민 하지 않 겠 습 니 다!
class
ES6 는 전통 언어 에 더 가 까 운 문법 을 제공 하고 Class (클래스) 라 는 개념 을 도입 했다.새로운 class 표기 법 은 대상 의 원형 을 더욱 명확 하 게 하고 대상 을 대상 으로 프로 그래 밍 하 는 문법 과 같 으 며 더욱 통속 적 이 고 이해 하기 쉽다.

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 로 '클래스' 를 정 의 했 는데 그 안에 constructor 방법 이 있 는 것 을 볼 수 있다. 이것 이 바로 구조 방법 이 고 this 키 워드 는 인 스 턴 스 대상 을 대표 한다.쉽게 말 하면 constructor 내 에서 정 의 된 방법 과 속성 은 인 스 턴 스 대상 자체 의 것 이 고 constructor 외부 에서 정 의 된 방법 과 속성 은 모든 인 스 턴 스 대상 이 공유 할 수 있다.
extends Class 간 에 extends 키 워드 를 통 해 계승 할 수 있 는데 이것 은 ES5 의 원형 체인 수정 을 통 해 계승 하 는 것 보다 훨씬 뚜렷 하고 편리 하 다.위 에서 하나의 Cat 클래스 를 정 의 했 는데 이 클래스 는 extends 키 워드 를 통 해 Animal 클래스 의 모든 속성 과 방법 을 계승 했다.
super super 키 워드 는 대부 류 의 인 스 턴 스 (즉, 아버지 류 의 this 대상 을 가리킨다.하위 클래스 는 constructor 방법 에서 super 방법 을 호출 해 야 합 니 다. 그렇지 않 으 면 새 인 스 턴 스 를 만 들 때 오류 가 발생 할 수 있 습 니 다.자 류 는 자신의 this 대상 이 아 닌 부계 의 this 대상 을 물 려 받 아 가공 하기 때문이다.super 방법 을 호출 하지 않 으 면 하위 클래스 this 대상 을 얻 지 못 한다.
ES6 의 계승 체 제 는 실질 적 으로 부모 류 의 인 스 턴 스 대상 this 을 먼저 만 든 다음 에 하위 클래스 의 구조 함수 로 this 를 수정 해 야 한다.
P. S react 를 쓰 면 이 세 가지 가 최신 판 React 에 많이 등장 하 는 것 을 발견 할 수 있 습 니 다.만 든 모든 component 은 React. Component 를 계승 하 는 클래스 입 니 다.자세 한 내용 은 react 문서 참조
arrow function
이것 은 아마도 ES6 에서 가장 자주 사용 하 는 새로운 특성 일 것 입 니 다. 그것 으로 function 를 쓰 는 것 은 원래 의 쓰기 보다 훨씬 간결 하고 뚜렷 합 니 다.

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}\

더 간결 해 보 이 는 것 외 에 도 arrow function 슈퍼 무적 기능 이 있 습 니 다!오랫동안 자 바스 크 립 트 언어의 this 대상 은 골 치 아 픈 문제 로 대상 방법 에서 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

위의 코드 를 실행 하면 오류 가 발생 합 니 다. 이것 은 setTimeout 의 this 이 전체 대상 을 가리 키 기 때 문 입 니 다.그래서 그것 이 정확하게 운행 할 수 있 도록 전통 적 인 해결 방법 은 두 가지 가 있다.
첫 번 째 는 this 을 self 에 게 전달 하고 self 로 대체 하 는 것 이다 this.

   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

우리 가 화살표 함 수 를 사용 할 때 함수 체 내의 this 대상 은 사용 할 때 있 는 대상 이 아니 라 정의 할 때 있 는 대상 이다.화살표 함수 내부 에 바 인 딩 this 메커니즘 이 있 기 때 문 이 아니 라 실제 원인 은 화살표 함수 가 자신의 this 가 없 기 때문이다. 그의 this 은 바깥 을 계승 하 는 것 이기 때문에 내부 this 는 바로 외부 코드 블록 this 이다.
template string
이 물건 도 매우 유용 하 다. 우리 가 큰 html 내용 을 문서 에 삽입 하려 고 할 때 전통 적 인 쓰기 가 매우 번 거 로 웠 기 때문에 이전에 우 리 는 보통 템 플 릿 도구 라 이브 러 리, 예 를 들 어 mustache 등 을 인용 했다.
여러분 은 먼저 다음 코드 를 볼 수 있 습 니 다.

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

텍스트 와 변 수 를 연결 하려 면 '+' 번호 로 연결 해 야 합 니 다. ES6 의 새로운 기능 템 플 릿 문자열 '을 사용 한 후에 우 리 는 직접 이렇게 쓸 수 있 습 니 다.

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

반 따옴표 （\） 로 시작 을 표시 하고 ${} 로 변 수 를 인용 하 며 모든 빈 칸 과 들 여 쓰기 가 출력 에 남아 있 습 니 다. 매우 시원 하지 않 습 니까?!React Router 1.0.3 판 부터 ES6 문법 을 사 용 했 습 니 다. 예 를 들 어 이 예 를 들 어:

{taco.name}
React Router

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

default, rest
default 는 간단 합 니 다. 기본 값 이라는 뜻 입 니 다.아래 의 예 를 들 어 animal () 방법 을 호출 할 때 인 자 를 전달 하 는 것 을 잊 어 버 렸 습 니 다. 전통 적 인 방법 은 이 문장 type = type || 'cat' 을 더 해서 기본 값 을 지정 하 는 것 입 니 다.

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

ES6 로 우 리 는 그냥 이렇게 쓰 는 거 야.

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

마지막 rest 문법 도 간단 합 니 다. 예 를 직접 보 세 요.

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

ES6 를 사용 하지 않 으 면 ES5 arguments 를 사용 해 야 한다.
이상 은 바로 ES6 에서 가장 자주 사용 하 는 문법 입 니 다. 이 20% 의 문법 은 ES6 의 일상적인 사용 에서 80% 를 차지 했다 고 할 수 있 습 니 다.
import export
이 두 녀석 이 대응 하 는 것 은 에 스 6 자신의 module 기능 이다.
우리 가 이전에 쓴 자 바스 크 립 트 는 모듈 화 된 체계 가 없어 서 방대 한 js 프로젝트 를 하나의 기능 이 상대 적 으로 독립 되 지만 서로 의존 하 는 작은 프로젝트 로 나 눌 수 없고 간단 한 방법 으로 이 작은 프로젝트 들 을 연결 할 수 없다.
이것 은 두 가지 문 제 를 야기 할 수 있다.

한편 으로 는 js 코드 가 비대 해 져 유지 하기 어렵다

다른 한편, 우 리 는 모든 script 태그 가 html 에 있 는 위 치 를 주의해 야 합 니 다. 그들 은 보통 의존 관계 가 있 기 때문에 순서 가 틀 리 면 bug

가 나 올 수 있 습 니 다.
es6 이전에 위 에서 언급 한 문 제 를 해결 하기 위해 우 리 는 제3자 가 제공 한 방안 을 이용 해 야 한다. 주로 두 가지 CommonJS (서버 엔 드) AMD (브 라 우 저 엔 드, 예 를 들 어 require.js 가 있다.
더 알 고 싶다 면 AMD, 특히 require.js 이 튜 토리 얼 을 참조 하 세 요.
현재 저 희 는 es6 module 기능 을 가지 고 있 습 니 다. 이 는 매우 간단 하고 서버 와 브 라 우 저 에서 통용 되 는 모듈 솔 루 션 이 될 수 있 습 니 다.
ES6 모듈 의 디자인 사상 은 가능 한 한 정태 화 되 어 컴 파일 할 때 모듈 의 의존 관계 와 입 출력 변 수 를 확정 할 수 있 도록 하 는 것 이다.CommonJS 과 AMD 모듈 은 모두 운행 할 때 만 이 물건 들 을 확인 할 수 있다.위의 디자인 사상 을 이해 하지 못 하 더 라 도 괜 찮 습 니 다. 우 리 는 먼저 어떻게 사용 하 는 지 배 워 야 합 니 다. 나중에 많이 사용 하고 숙련 된 후에 그 뒤의 디자인 사상 을 연구 하 는 것 도 늦 지 않 습 니 다!자, 그럼 코드 를...
전통 적 인 서법 은 우선 우리 가 require.js 의 서법 을 되 돌아 본다.만약 에 우리 가 두 개의 js 파일 이 있다 고 가정 하면 index.js 과 content.js 지금 우 리 는 index.js 에서 content.js 되 돌아 온 결 과 를 사용 하고 싶 습 니 다. 우 리 는 어떻게 해 야 합 니까?
우선 정의:

//content.js
define('content.js', function(){
    return 'A cat';
})

그리고 require:

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

그럼 CommonJS 는 어떻게 썼 나 요?

//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

ES6 의 표기 법

//index.js
import animal from './content'

//content.js
export default 'A cat'

이상 은 내 가 세 가 지 를 모두 열 거 했 으 니 엄 마 는 더 이상 내 가 헷 갈 릴 까 봐 걱정 하지 마 세 요.
ES6 module 의 기타 고급 용법

//content.js

export default 'A cat'    
export function say(){
    return 'Hello!'
}    
export const type = 'dog'

위 에서 알 수 있 듯 이 export 명령 은 출력 변 수 를 제외 하고 함수 도 출력 할 수 있 고 심지어 클래스 (react 의 모듈 은 기본적으로 출력 클래스) 도 출력 할 수 있다.

//index.js

import { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says}`)  //The dog says Hello

여기에 입력 할 때 주의해 야 할 것 은 대괄호 안의 변수 이름 은 가 져 온 모듈 (content. js) 대외 인터페이스의 이름과 같 아야 합 니 다.
content. js 에서 출력 하 는 기본 값 (default) 을 입력 하려 면 괄호 밖 에 쓸 수 있 습 니 다.

//index.js

import animal, { say, type } from './content'  
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)  
//The dog says Hello to A cat

변수 이름 변경
이때 우 리 는 type 이라는 변수 이름 을 좋아 하지 않 습 니 다. 이름 을 바 꿀 수 있 기 때문에 변수 이름 을 수정 해 야 합 니 다.에 스 6 에 서 는 as 원 키 로 이름 을 바 꿀 수 있다.

//index.js

import animal, { say, type as animalType } from './content'  
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)  
//The dog says Hello to A cat

모듈 의 전체 로드
출력 값 을 불 러 오 는 것 외 에 도 전체 로 딩 을 사용 할 수 있 습 니 다. 즉, 별표 (*) 로 대상 을 지정 하고 모든 출력 값 을 이 대상 에 불 러 옵 니 다.

//index.js

import animal, * as content from './content'  
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)  
//The dog says Hello to A cat
    *  as        。

30 분

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ES6 특성 일람

좋은 웹페이지 즐겨찾기