[ES6] 상용 ES6 빠르게 파악 (1)

이 시 리 즈 는 ES6 입문 문법 을 신속하게 습득 하 는 데 적합 합 니 다. ES6 를 깊이 공부 하고 싶 은 파트너 는 완 일 봉 선생님 의 을 보고 20% 의 지식 을 배 워 80% 의 일 을 완성 할 수 있 습 니 다.
ES6
ES6 소개 좀 해 주세요.

ES2015 = ES6

ES6 는 ES 2015, ES 2016, ES 2017 등 을 가리 키 며 자 바스 크 립 트 의 차세 대 기준

현대 브 라 우 저 는 대부분의 (90% +) 원생 ES6 를 지원 하지만, 기 존 버 전의 브 라 우 저 를 호 환 하기 위해 보통 Babel 을 사용 해 ES6 코드 를 ES5 코드 로 변환 한다.

상수 변수 let and const
상수 와 변수의 개념 부터 말 해 보 세 요.
상수 란 한 번 의 할당 을 한 후에 변경 되 지 않 는 값 을 말한다. 예 를 들 어 게임 계 정의 ID, 변 수 는 할당 후에 변경 할 필요 가 있다 는 것 이다. 예 를 들 어 게임 이름, 게임 비밀번호 등 이다.
이전 자 바스 크 립 트 에 서 는 상수 와 변 수 를 구분 하지 않 고 모두 var 를 사용 하여 전역 변 수 를 정의 합 니 다.

var userId = 666;
var userPassword = "mimabunengshuo";

현재 ES6 에 서 는 let 를 사용 하여 부분 변 수 를 정의 하고 const 는 부분 상수 를 정의 합 니 다.

const userId = 666;
let userPassword = "wobuzidao";

왜 부분 변수 와 상수 를 사용 해 야 합 니까?

//        0   9 ，  10 
//   var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//   let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//         0   9
letI();//    

굳이 var 를 사용 하여 이 수 요 를 완성 하려 면 폐쇄 를 사용 할 수 있 습 니 다.

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//    

구조 할당

좌우 양쪽 은 똑 같은 데이터 형식 이 어야 하거나 변 경 된 후에 똑 같은 유형 이 어야 한다.

등호 오른쪽 값 은 배열 이나 대상 이 어야 하 며 대상 이나 배열 이 아니면 먼저 대상 으로 전환 해 야 한다.

정의 와 할당 이 동기 화 되 어야 합 니 다

예 를 들 어 선언 변수

let a = 1;
let b = 2;
let c = 3;

ES6 는 아래 와 같이 쓸 수 있 습 니 다.

let [a, b, c] = [1, 2, 3];

상용 실례 1. 변수의 값 교환

let x = 1;
let y = 2;

[x, y] = [y, x];  

2. JSON 데이터 재 구성 할당 을 추출 하 는 것 은 JSON 대상 의 데 이 터 를 추출 하 는 데 특히 유용 합 니 다.

let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

화살표 함수
ES6 이전에 함 수 를 정의 하 는 것 은 이렇게 쓰 는 것 입 니 다.

var f = function (i){
    return  i + 5;
}

화살표 함수 가 있 으 면 이렇게 쓸 수 있 습 니 다.

let f = (i) => {
    return  i + 5;
}

크게 다 르 지 않 은 것 같은 데?

화살표 함수 가 하나의 매개 변수 만 있 을 때 '()' 를 생략 하고 매개 변수 만 쓸 수 있 습 니 다.반환 문 이 하나 밖 에 없 을 때 '{}' 과 return 문 구 를 생략 할 수 있 습 니 다

.
위 에 거 이렇게 써 도 돼 요.

let f = i => return  i + 5;

화살표 함수 의 this 는 고정 적 으로 변 하지 않 습 니 다. 정의 할 때 있 는 대상 을 가리 키 는 것 이지 사용 할 때 있 는 대상 을 가리 키 는 것 이 아 닙 니 다.
ES6 의 화살표 함 수 를 ES5 의 일반 함수 로 변환 하면 화살표 함수 의 this 는 외층 의 this 를 참조 하 는 것 을 볼 수 있 습 니 다.

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

문자열 템 플 릿

문자열 템 플 릿 은 변수 와 문자열 이 혼 합 된 상황 을 처리 하 는 데 사 용 됩 니 다

문자열 은 문자열 을 반 따옴표 (` 문자열 `) 로 감 싸 고, $문자 로 괄호 (\ ${JavaScript}) 를 늘 려 임의의 JavaScript 표현 식

을 감 싸 줍 니 다.

문자열 템 플 릿 에서 리 턴

을 사용 할 수 있 습 니 다.
예 를 들 어 자 바스 크 립 트 로 HTML 요 소 를 생 성 합 니 다. 요소 의 텍스트 는 자신의 자 바스 크 립 트 를 사용 하여 연산 한 결과 ES5 에서 비교적 번 거 롭 습 니 다.

$('#dom').append(
  '
      ：' + userName + '
 ' +
  '       ' + oNumber +' 
'
);

ES6 에서 상대 적 으로 간단 합 니 다.

$('#dom').append(
  `
      ：${userName}
      ${oNumber} 
`
);

대상 을 향 하 다

class 는 클래스 를 정의 하 는 데 사 용 됩 니 다

extends 는 어떤 종 류 를 계승 하 는 지 나타 낸다

constructor 구조 함 수 는 개인 적 인 방법 과 속성 을 정의 할 수 있 습 니 다. 이 함수 외 에 공 유 된 것

슈퍼 () 는 constructor 에서 이 방법 으로 부모 클래스 의 this 대상 을 계승 합 니 다

코드 예제

class user {
    constructor() {
        this.name = '  1';
    }
    sayHello(say) {
        console.log(`${this.name}，     ：${say}`);
    }
}

let user1 = new user();
user1.sayHello('  '); //  1，     ：  

class xiaoming extends user {
    constructor() {
        super();
        this.name = '  ';
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello('  '); //  ，     ：  
let user2 = new user();
user2.sayHello('  ')//  1，     ：  

[ES6] 상용 ES6 빠르게 파악 (1) [ES6] 상용 ES6 빠르게 파악 (2)