ECMAScript 6 튜 토리 얼(1)

본 논문 의 저작권 은 작가 와 블 로그 원 에 있 습 니 다.전 재 를 환영 합 니 다.그러나 작가 의 동의 없 이 이 성명 을 보류 하고 글 페이지 의 뚜렷 한 위치 에서 원문 연결 을 해 야 합 니 다.블 로그 주 소 는?http://www.cnblogs.com/jasonnode/ 。이 시리즈 과정 은 종합 지능 망 이다. 정리  http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/
 
ES6 가 뭐 예요?
ECMAScript 6(이하 ES6)는 자 바스 크 립 트 언어의 차세 대 기준 으로 2015 년 6 월 공식 발표 됐다.모 질 라 는 이 기준 을 바탕 으로 자 바스 크 립 트 2.0 을 출시 할 것 이다.
ECMAScript 와 JavaScript 는 도대체 어떤 관계 입 니까?많은 초보 자 들 이 곤 혹 스 러 워 할 것 이다.쉽게 말 하면 ECMAScript 는 JavaScript 언어의 국제 표준 이 고 JavaScript 는 ECMAScript 의 실현 이다.
1996 년 11 월 에 자 바스 크 립 트 의 창조 자 넷 스 케 이 프 는 자 바스 크 립 트 를 국제 표준화 기구 인 ECMA 에 제출 하기 로 결정 했다.이런 언어 가 국제 표준 이 되 기 를 바란다.이듬해 ECMA 는 262 호 표준 파일(ECMA-262)의 1 면 을 발표 해 브 라 우 저 스 크 립 트 언어의 표준 을 규정 하고 이 를 ECMAScript 라 고 불 렀 다.이 버 전이 바로 ECMAScript 1.0 버 전이 다.
ES6 의 목 표 는 자 바스 크 립 트 언어 가 대형 복잡 한 응용 프로그램 을 작성 하여 기업 급 개발 언어 가 되도록 하 는 것 이다.
차세 대 표준 ES6 는 우리 에 게 많은 반 가운 기능 특성 을 가 져 다 줄 것 입 니 다.본 과정 은 ES6 의 풍 채 를 음미 하 는 데 중심 을 두 고 있 기 때문에 본 과정 을 배우 기 전에 자 바스 크 립 트 의 기초 지식 을 갖 춰 야 합 니 다.자 바스 크 립 트 가 무엇 인지 모 르 면 자 바스 크 립 트 의 입문 과정 을 먼저 배 워 보 세 요.
지지 하 다.
비록 ES6 가 이미 차세 대 표준 으로 발표 되 었 지만,각 브 라 우 저가 새로운 기능 을 지원 하 는 데 는 아직 시간 이 필요 하 다.그러면 우 리 는 자신 이 사용 하 는 브 라 우 저가 ES6 의 상응하는 기능 을 지원 하 는 지 어떻게 알 수 있 겠 는가?
긴장 하지 마 세 요.ES6 에 대한 지원 은 kangax.github.io/es5-compat-table/es6/를 볼 수 있 습 니 다.여기 서 서로 다른 버 전의 브 라 우 저가 ES6 기능 에 대한 지원 상황 을 뚜렷하게 알 수 있 습 니 다.시간 이 지 날수 록 지지 도가 높 아 지면 서 ES6 의 대부분 특성 이 실현 됐다.
지금 브 라 우 저 에서 ES6 의 특성 을 사용 하고 싶다 면 호 환 가방 을 참조 하 는 방식 으로 미리 맛 을 볼 수도 있다https://github.com/paulmillr/es6-shim
환경 지원
웹 페이지 직접 삽입
Traceur 는 ES6 코드 를 웹 페이지 에 직접 삽입 할 수 있 습 니 다.우선 웹 페이지 머리 에 Traceur 라 이브 러 리 파일 을 불 러 와 야 합 니 다.

<!--   Traceur    -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
<!--  Traceur        -->
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script>
<!--       ，              -->
<script>
　　traceur.options.experimental = true;
</script>
 
<script type="module">
　　class Calc {
　　　　constructor(){
　　　　　　console.log('Calc constructor');
　　　　}
　　　　add(a, b){
　　　　　　return a + b;
　　　　}
　　}
 
　　var c = new Calc();
　　console.log(c.add(4,5));
</script>

script 태그 의 type 속성의 값 은 text/javascript 이 아 닌 module(또는 traceur)입 니 다.이것 은 Traceur 컴 파일 러 가 ES6 코드 를 식별 하 는 표지 로 컴 파일 러 는 모든 type=module 의 코드 를 ES5 로 자동 으로 컴 파일 한 다음 브 라 우 저 에 맡 겨 실행 합 니 다.
let
let 는 ES6 에 추 가 된 키워드 입 니 다.
그것 의 역할 은 var 와 유사 하여 변 수 를 설명 하 는 데 사용 되 지만,설 명 된 변 수 는 let 명령 이 있 는 코드 블록 에서 만 유효 합 니 다.

if(true){
    var a = 1;
l    et b = 2;
}
document.write(a);
document.write(b); //   ：ReferenceError: b is not defined

let 와 var 의 역할 영역 범 위 를 체험 합 니 다:

function f1() {
    var a = 8;
    let n = 5;
    if (true) {
        let n = 10;
        var a = 20
    }
    document.write(n); // 5
    document.write(a); // 20
}
f1();

let 응용
for 순환 계수 기 는 let 명령 을 사용 하기에 적합 합 니 다.

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

const 명령
const 성명 은 상수 이 며,일단 성명 하면 값 은 변 할 수 없 을 것 이다.

const PI = 3.1415;
PI // 3.1415
 
PI = 3;
PI // 3.1415
 
const PI = 3.1;
PI // 3.1415

const 블록 급 역할 영역 도 있 습 니 다.

if (true) {
    const max = 5;
}
document.write(max); // ReferenceError   MAX      

const 변 수 를 올 릴 수 없습니다(먼저 설명 하고 사용 해 야 합 니 다)

if (true) {
    document.write(MAX); // ReferenceError
    const MAX = 5;
}

const 중복 성명 불가

var message = "Hello!";
let age = 25;
 
//         
const message = "Goodbye!";
const age = 30;

const 명령 은 변수 가 있 는 주 소 를 가리 키 기 때문에 이 변 수 를 속성 설정 하 는 것 이 가능 합 니 다(변수 주 소 를 바 꾸 지 않 음).변경 할 수 없 는(속성 포함)변 수 를 사용 하려 면 동결 을 사용 할 수 있 습 니 다.

const C1 = {};
C1.a = 1;
document.write(C1.a); // 1
C1 = {}; //        ，    
 
//    ，       const      
const C2 = Object.freeze({});
C2.a = 1; //Error,      
document.write(C2.a);

문자열 세 가지 새로운 방법 을 포함 할 지 여부
전통 적 으로 자 바스 크 립 트 는 indexOf 방법 은 문자열 이 다른 문자열 에 포함 되 어 있 는 지 확인 하 는 데 사용 할 수 있 습 니 다.ES6 는 또 세 가지 새로운 방법 을 제공 했다.

includes():불 값 을 되 돌려 매개 변수 문자열 을 찾 았 는 지 여 부 를 표시 합 니 다

starts With():불 값 을 되 돌려 줍 니 다.매개 변수 문자열 이 원본 문자열 의 머리 에 있 는 지 여 부 를 표시 합 니 다

ends With():불 값 을 되 돌려 줍 니 다.매개 변수 문자열 이 원본 문자열 의 끝 에 있 는 지 여 부 를 표시 합 니 다

var str = "Hello world!";
 
str.startsWith("Hello") // true
str.endsWith("!") // true
str.includes("o") // true

이 세 가지 방법 은 모두 두 번 째 인 자 를 지원 하여 검색 을 시작 하 는 위 치 를 표시 합 니 다.

var str = "Hello world!";
 
str.startsWith("world", 6) // true
str.endsWith("Hello", 5) // true
str.includes("Hello", 6) // false

위의 코드 는 두 번 째 인자 n 을 사용 할 때 ends With 를 표시 합 니 다. 의 행 위 는 다른 두 가지 방법 과 다르다.이것 은 앞의 n 자 를 겨냥 하고,다른 두 가지 방법 은 n 번 째 위치 에서 문자열 이 끝 날 때 까지 겨냥 합 니 다.
repeat()원본 문자열 반복
repeat()는 원래 문자열 을 n 회 반복 하 는 새로운 문자열 을 되 돌려 줍 니 다.

var str = "x";
str.repeat(3) // "xxx"
 
var str1 = "hello";
str1.repeat(2) // "hellohello"

템 플 릿 문자열
템 플 릿 문자열 은 세 가지 재 미 있 는 기능 을 제공 합 니 다.
템 플 릿 문자 중 문자열 삽입 값 지원:

let first = 'hubwiz';
let last = '   ';
document.write(`Hello ${first} ${last}!`);
// Hello hubwiz    !

템 플 릿 문자열 은 여러 줄 을 포함 할 수 있 습 니 다:

let multiLine = '
　　　　This is
　　　　a string
　　　　with multiple
　　　　lines';
document.write(multiLine);

라벨 템 플 릿
라벨 템 플 릿

var a = 5;
var b = 10;
 
tag`Hello ${ a + b } world ${ a * b }`;

위의 코드 에서 템 플 릿 문자열 앞 에 태그 라 는 표지 가 있 습 니 다.함수 입 니 다.전체 표현 식 의 반환 값 은 tag 함수 가 템 플 릿 문자열 을 처리 한 후의 반환 값 입 니 다.
tag 함수 의 모든 매개 변수의 실제 값 은 다음 과 같 습 니 다.

첫 번 째 매개 변수:['Hello','World']

두 번 째 매개 변수:15세 번 째 매개 변수:50즉,tag 함 수 는 실제로 아래 형식 으로 호출 된다.

tag(['Hello ', ' world '], 15, 50)

다음은 tag 함수 의 쓰기 및 실행 결과 입 니 다.

var a = 5;
var b = 10;
 
function tag(s, v1, v2) {
document.write(s[0]);
document.write(s[1]);
document.write(v1);
document.write(v2);
 
return "OK";
}
 
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// 15
// 50
// "OK"

String.raw()
템 플 릿 문자열 은 원본 일 수 있 습 니 다:
ES6 는 또 원생 의 String 대상 에 게 raw 방법 을 제공 했다.
String.raw 를 사용 하면 템 플 릿 문자열 의 접두사 로 서 템 플 릿 문자열 은 원본일 수 있 습 니 다.역 사선 도 더 이상 특수 문자 가 아 닙 니 다. 줄 바 꿈 문자 로 해석 되 지 않 습 니 다:

let raw = String.raw`Not a newline: 
`;
document.write(raw === 'Not a newline: \
'); // true