ES6經常使用語法總結

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

for(var i=0;i<10;i++){

}
console.log(i) //10

　上面代碼中，計數器i只在for循環體內有效，在循環體外引用就會報錯。let具備塊級做用域的。var不存在塊級做用域問題，具備全局變量提示的問題存在，

2.const

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.模板字符串

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

（1）基本用法

　　

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

（2）字符串和變量拼接

 

let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;  

 

(3)字符串換行

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

模板字符串的出現，極大的改變傳統字符串的拼接方法，減小代碼出現錯誤的概率。提升開發效率

4.解構賦值

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構

　　4.1:對象結構賦值

var obj ={ name:"abc",age:18 };
    //用解構賦值的方式獲取name、age

    let { name } = obj; //建立了一個變量name，值=obj.name
    console.log(name);  //"abc"

    let { age } =obj;
    console.log(age);  //18

　 4.1:函數參數結構賦值

function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等價於
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})

5.rest參數

ES6 引入 rest 參數（形式爲...變量名），用於獲取函數的多餘參數，這樣就不須要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

function fn(){
        //arguments是函數內部的一個局部變量，
        //arguments.length表示函數的實參的個數
        console.log(arguments.length);

        for(var i =0 ; i<arguments.length; i++){
            console.log(arguments[i]);
        }

    }
    fn(1,3,5)       //3
    // fn("a","b","c","d","e") //5

es6箭頭函數內部不能使用arguments，爲了彌補這個問題，rest參數應孕而生

 

//...args就是rest參數
    //-->產生了一個變量，這個變量是一個數組，數組裏麪包含了這個函數調用時傳遞的全部實參
    function q(...args){
        //驗證args是否是數組？
        console.log(args instanceof Array);//true
        console.log(Object.prototype.toString.call(args));//"[object Array]"
        console.log(Array.isArray(args));   //true es5中的新方法

        console.log(args);
    }
    q(1,3,5);
    q(2,3,4,5,6,7,8);

 

6.箭頭函數

ES6 容許使用「箭頭」（=>）定義函數。

 

場景：用於 替換匿名函數

基本用法

//匿名函數
    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")
    }

var p={
        age:18,
        //es6中對象方法的箭頭函數表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推薦使用的方式☆☆☆：es6中對象方法的簡寫形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say內部的延遲函數：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();

箭頭函數和普通匿名函數有哪些不一樣？

　　1.函數體內的this對象，就是定義所在的對象，而不是使用所在的對象

　　2.不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤

　　3.不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。

　　4.不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

 　  5.generator函數如今常常用async替代

 

7.對象的擴展

擴展運算符（spread）是三個點（...）。用於取出參數對象的全部可遍歷屬性，拷貝到當前對象中

　　7.1Object.assign：實現拷貝繼承

　　

//Object.assign 就是進行對象的淺拷貝
    var source={ age:18,height:170,className:"3年2班" }

    //克隆一個新對象出來
    var newObj=Object.assign({},source);
    console.log(newObj);

    var newObj2={};
    Object.assign(newObj2,source);
    console.log(newObj2);

上面能夠實現淺拷貝，可是代碼有點多，es6這個對象擴展，牛掰的一個方法，解決淺拷貝的問題，

var car={ brand:"BMW",price:"368000",length:"3米" }

    //克隆一個跟car徹底同樣的對象出來：
    var car2={ ...car }  
    console.log(car2); 

    //新車子，跟car的長度不一樣，其餘相同
    var car3={ ...car,length:"4米" }  
    console.log(car3);

    var car4={ ...car,type:"SUV"}
    console.log(car4);

    var car5={...car4,price:"69800",brand:"BYD"};
    console.log(car5);

對象擴展，簡單方便，代碼更加簡介，更少的代碼實現更強大的功能。

 

 8.Promise

Promise是異步編程一種解決方案(回調地獄)

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

promise的基本用法

var promise=new Promise((resolve,reject)=>{
        //b 把須要執行的異步操做放在這裏
        $.get("/getUser",res=>{
            //獲取數據的異步操做已經執行完畢了，等待下一步的執行，經過執行resolve函數，告訴外界你能夠執行下一步操做了
            //c、
            resolve(res)
            //而執行的下一步操做，其實就是寫在then的回調函數中的
        })
    })
    //a、
    promise.then(res=>{
        //d、執行後續的操做
        console.log(res);
    })

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=>{
        //失敗的返回值
    })