ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年釋出的，所以又稱ECMAScript 2015。也就是說，ES6就是ES2015。雖然目前並不是所有瀏覽器都能相容ES6全部特性，但越來越多的程式設計師在實際專案當中已經開始使用ES6了。今天就來總結一下在工作中es6常用的屬性方法

1、let

ES6新增了let命令，用來生命變數。它的用法類似於var,但是所宣告的變數，只在let命令所在的程式碼塊內有效。

for (let i = 0; i < 10; i++) {
 
 }
    console.log(i) //ReferenceError: i is not defined<br><br>for(var i=0;i<10;i++){<br><br>}<br>console.log(i) //10<br>
 

上面程式碼中，計數器i只在for迴圈體內有效，在迴圈體外引用就會報錯。let具有塊級作用域的。var不存在塊級作用域問題，具有全域性變數提示的問題存在

2、const

const a = 10；
    a = 20；
console.log(a)  //TypeError: Assignment to constant variable.
上面程式碼表明改變常量的值會報錯。

const宣告的變數不得改變值，這意味著，const一旦宣告變數，就必須立即初始化，不能留到以後賦值。

const a;
    console.log(a)

上面程式碼表示，對於const來說，只宣告不賦值，就會報錯。

let與const

　1.都不能重複宣告

　2.都存在塊級作用域問題

3.只在宣告所在的塊級作用域內有效。

3、模板字串（反引號 ``）

模板字串就是一種字串的新的表現形式

let s1 = ` hello `
let s2 = ' hello '

(2) 字串換行

var box =`<div>
            <p>
              <span>123</span>
            </p>
            <p>${a1}</p>
         </div>`;

（3）模板中傳變數${變數}

    let obj = {
        name: 'jack',
        age: 20
    };
    console.log(`名稱：${obj.name},年齡：${obj.age}`);  //名稱：jack,年齡：20

4、for迴圈遍歷

　　let str = "hello";

    //1.for遍歷
    for (let i = 0; i < str.length; i++) {
        console.log(i, str[i]);     //i 索引    數值型別
    }
    
    //2.陣列->for->for in
    let arr = [1, 2, 3];
    for (let i in arr) {
        console.log(i, arr[i]);     //i 索引    字串型別
    }
    
    //3.for... of
    for(let i of str){
        console.log(i);     //資料
    }
    

5、箭頭函式

基本用法：

　　//匿名函式
    div.onclick=function(){
        console.log("你好")
    }
    //箭頭函式
    div.onclick=()=>{
        console.log("你好")
    }

有一個引數的箭頭函式

var fn=(a)=>{
    console.log("abc");
}
//等價於：
 var fn=a=>{
    console.log("abc");
 }

有2個及更多引數的箭頭函式

var f=(a,b,c)=>{
      console.log("abc")
}

6、Promise

Promise是非同步程式設計一種解決方案(回撥地獄)

在沒有promise都是這樣寫的回撥，一層一層的寫，$.get("/getUser",function(res){
        $.get("/getUserDetail",function(){
            $.get("/getCart",function(){
                $.get("/getBooks",function(){
                    //...
                })
            })
        })
    })

promise的基本用法

new Promise((resolve,reject) => {
    setTimeout(() => {
       resolve()
    },1000)
}).then(() => {
    console.log("hellow world");
})

promise實現多層回撥

new Promise((resolve,reject)=>{
        $.get("/getUser",res=>{
            resolve(res)
        })
    }).then(res=>{
        //使用者基本資訊
        return new Promise(resolve=>{
            $.get("/getUserDetail",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //使用者詳情
        return new Promise(resolve=>{
            $.get("/getCart",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //購物車資訊
    })

promise實現錯誤處理

new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    }.resError=>{
        //失敗的返回值
    })

待續。。。