什么是es6?

• es ECMA Script ,javascript的語(yǔ)言標(biāo)準(zhǔn)，第6個(gè)大版本（2015年發(fā)布，也成為es2015）
• 提升JS編寫(xiě)大型的復(fù)雜應(yīng)用程序的能力
• babel: es6 --> es5的轉(zhuǎn)換器

let,const

• let 定義變量，const定義常量
• 不能重復(fù)定義
• 塊級(jí)作用域內(nèi)生效（var是在函數(shù)作用域）
• 不存在變量提升

箭頭函數(shù)

• 參數(shù) => 表達(dá)式 / 語(yǔ)句

// 箭頭函數(shù)
let value = 2;
let double = x => x * 2;
let treble = x => {
    return x * 3;
}
console.log("double:"+double(value)); // double:4
console.log("treble:"+treble(value)); // treble:6

• 沒(méi)有自己的this 指針，繼承外層作用域

var obj = {
    commonFn: function () {
        console.log(this);
    },
    arrowFn: () => {
        console.log(this);
    }
}
console.log(obj.commonFn()); // this 指向是他的調(diào)用者 obj
console.log(obj.arrowFn()); //  arrowFn 和 obj 共享一個(gè)作用域 ,this 指向了obj所在的作用域window

• 不能用作構(gòu)造函數(shù) （ 不能用new）

let Animal = function (){

}
let anmial = new Animal()

let Animal = function (){

}
let anmial = new Animal()

• 沒(méi)有prototype屬性

模板字符串

• 反引號(hào)標(biāo)識(shí) ``
• 支持多行字符串
• 支持變量和表達(dá)式

// 
let name = "hello";
let getName = ()=>{
    return 'dsfderek';
}
let nums = [1,2,3,4,5];
let str = `
<div>
    <h1 class="h1">${name} - ${getName()}</h1>
</div>
<ul>
    ${
        nums.map(n=>`<li>數(shù)字 ${n}</li>`).join('')
    }
</ul>
`;
document.querySelector('body').innerHTML = str;

Promise

• promise 對(duì)象
• resolve,reject,then

new Promise((resolve,reject)=>{
    // 異步函數(shù)
    $.ajax({
        url:'',
        type:'post',
        succes(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    })
}).then((res)=>{
    console.log(res);
},(err)=>{
    console.log(err);
});

// 鏈?zhǔn)讲僮?let promiseFn1 = new Promise((resolve,reject)=>{
    // 異步函數(shù)
    $.ajax({
        url:'',
        type:'post',
        succes(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    })
})
let promiseFn2 = new Promise(()=>{
    // 異步函數(shù)
    $.ajax({
        url:'',
        type:'post',
        succes(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    })
})

promiseFn1.then(()=>{ // promiseFn1的then
    return promiseFn2;
}).then(()=>{  // promiseFn2的then
    // promiseFn2的返回
})

面向?qū)ο? 類(lèi)

• class
• 語(yǔ)法糖，對(duì)應(yīng) function
• 構(gòu)造函數(shù)，constructor 初始化該類(lèi)的對(duì)象

class Animal{
    constructor(name){
        this.name = name

    }
    getName(){
        return this.name;
    }
}
// 實(shí)例
let animal = new Animal("dsfderek");
console.log(animal.getName());

面向?qū)ο?類(lèi)的繼承

• extends 類(lèi)的繼承
• super 調(diào)用父類(lèi)的構(gòu)造函數(shù) ，子類(lèi)是沒(méi)有this的，想在子類(lèi)里調(diào)用父類(lèi)的方法，調(diào)用super方法，把父類(lèi)的this對(duì)象繼承過(guò)來(lái)，在子類(lèi)通過(guò)this操作父類(lèi)的屬性和方法

// 類(lèi)的繼承
class Animal{
    constructor(){
        this.name = "dsfderek"

    }
    getName(){
        return this.name;
    }
}
class Cat extends Animal{
    constructor(){
        super();
        this.name = "cat"
    }
}
let animal = new Animal();
let cat = new Cat();
console.log(animal.getName());
console.log(cat.getName());

面向?qū)ο?對(duì)象

• 對(duì)象里屬性的簡(jiǎn)寫(xiě)
• 對(duì)象里方法的簡(jiǎn)寫(xiě)
• 屬性名可以為表達(dá)式

let name = "dsfderek",
    age = 18;

let obj = {
    // 變量名可以直接用作對(duì)象的屬性名
    name,
    age,
    // 對(duì)象里的方法可以簡(jiǎn)寫(xiě)
    getName(){
        return this.name;
    },
    // 表達(dá)式作為屬性名或方法名
    ['get' + 'Age'](){
        return this.age;
    }
}

Object 擴(kuò)展

Object.keys(obj) // 一個(gè)對(duì)象里所有的屬性名，結(jié)果是一個(gè)數(shù)組
Object.assign({a:1},{b:2}); //合并對(duì)象，后面的覆蓋前面的

ES6 模塊化

• 解決一個(gè)復(fù)雜問(wèn)題時(shí)自頂向下逐層把系統(tǒng)劃分成若干模塊的過(guò)程
• CommonJs,AMD,CMD
• export,import

let str = 'string';
let obj = {
    name : 'dsfderek'
}
let fn = ()=>{
    console.log('module test');
}

export {
    str,
    obj,
    fn
}

export default {a:1};

import {str as string,obj,fn} from './module.js'
import foo from './module.js'
console.log('name:',obj.name);
// console.log('str:',str);
console.log('string:',string);
console.log('fn:',fn);


console.log(foo);

·