ES6中的let和const和解構賦值

什么是ES6?

ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發(fā)版。



為什么要使用ES6?

每一次標準的誕生都意味著語言的完善，功能的加強。js語言本身也有一些令人不滿的地方



1.變量提升特性增加了程序運行的不可預測性 。



變量提升可以簡單看以下代碼了解下:



console.log(a);

var a=1;

//console.log(a)會輸出undefined



這段代碼也可以這樣表示



var a;

console.log(a);

a=10;

//依舊輸出undefined



這就是變量提升!



2.語法過于松散，實現(xiàn)相同的功能，不同的人可以會寫出不同的代碼，閱讀性較低。



所以：ES6 ,目標是使JavaScript語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言。我們沒有理由不去學習ES6。



let關鍵字

ES6中新增的用于聲明變量的關鍵字。主要是替代var。



特征：1.let聲明的變量只在所處的塊級有效，具有塊級作用域！ 在ES6之前JS只有全局作用域和局部作用域。



塊級作用域：通俗來講就是在一對大括號中產(chǎn)生的作用域，塊級作用域中的變量只能在大括號中訪問，在大括號外面是訪問不到的。



可以看以下代碼：



                if(true){

                let a=10;

                console.log(a);//輸出10

                }

                console.log(a);//報錯提示a沒有定義



                {

                    let b=10;

                    console.log(b);//輸出10

                }

                console.log(b);//報錯提示b沒有定義



              if(true){

              let c=20;

              console.log(c)//輸出20

              if(true){

                 let d=30;

                 console.log(c)//輸出 20

              }

              console.log(d);//報錯d沒有定義

            }



在for循環(huán)中也起到作用，根據(jù)不同的需求選擇let和var！

例如：



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

                   console.log(i) //輸出10

for(let j=0;j<10;j++){}

                   console.log(j) //報錯 j沒有定義



好處：在業(yè)務邏輯比較復雜的時候，可以放在內層變量覆蓋外層變量！



2.存在let 一開始就會形成封閉的作用域 使用let命名聲明變量前 ，變量不可用，必須先聲明后使用，不存在變量提升

例如:



               if(true){

                console.log(temp);//報錯

                let temp=1;

               }`



3.let 不允許重復聲明 在一個作用域內。



例如：



                if(true){

                let temp;

                console.log(temp);//報錯Identifier 'temp' has already been declared

                let temp=1;

                }



               if(true){

                var temp=10;

                let temp=5;

                console.log(temp);//報錯 錯誤和上面一致

               }



但是不在一個作用域內可以 例如：



              {

                let x=10;

                console.log(x);//輸出10

            }



            {

                let x=5;

                console.log(5);//輸出5

            }



const關鍵字

const一般用來聲明常量，聲明一個只讀的常量。



特征：1.一旦聲明其值不能改變必須立即初始化

例如：



 const a; //這樣什聲明會直接報錯！??！

1

這樣聲明沒有初始化會直接報錯！



2.對于對象：存的不是對象的本身， 而是對象的引用， 引用地址 ，地址不變， 對象可拓展！

例如：



           const foo={y:10};

           foo.x=100;

           console.log(foo.x);//輸出100

1

2

3

對象可以擴展



但是對象不能改變

例如：foo={n:1000}; 會報錯！



作用域：



  var v1=100;

    function f1(){

        console.log(v1,v2); //undefined   no defined 

        var v1=110;

        let v2=200;

        function f2(){

            let v3=300;

            console.log(v1,v2,v3);//110 200 300

        }

        f2();

        console.log(v1,v2,v3);// 110 200 no defined 

    }

    f1();

    console.log(v1,v2,v3);// 100 no defined no defined



可以向外面作用域找 不可以向里面作用域找 內層變量可能會覆蓋外層變量



let和var的本質區(qū)別：瀏覽器的頂層對象為window Node的為global，var定義的變量會關聯(lián)到頂層對象中，let和const不會！

例如：



         var a =100;

        console.log(window.a); // 100

         let b=100;

        console.log(window.b); //undefined

1

2

3

4

如何選擇const和let:數(shù)據(jù)需要變化用let 數(shù)據(jù)不需要變化用const



解構賦值：ES6中允許從數(shù)組中提值，按照對應位置，對變量賦值，對象也可以實現(xiàn)解構！

例如：

 {
    let a,b,c;
    [a,b]=[1,2];
    console.log(a,b,c); //輸出 1 2 undefined
}

{
    let a,b,c;
    [a,b,...c]=[1,2,3,4,5,6];
    console.log(a);//輸出1
    console.log(b);//輸出2
    console.log(c);//輸出[3,4,5,6]
}
{
    let a,b,c;
    [a,b,c=3]=[1,2];
    console.log(a,b,c);//輸出1 2 3
}
{
    let a,b;
    [a,b]=[1,2];
    [a,b]=[b,a]
    console.log(a,b);//輸出 2 1
}
{
    let a,b;
    ({a,b}={a:1,b:2})
    console.log(a,b);//輸出 1  2
}
{
    function fun(){
        return [1,2,3,4,5,6]
    };
    let a,b;
    [a,,,,b]=fun();
    console.log(a,b);//輸出1 5
}
{
    let o={p:42,q:true};
    let {p,q}=o;
    console.log(p,q);//輸出 42 true
}
{
    let {a=10,b=5}={a:3};
    console.log(a,b);//輸出 3 5
}

{
    let metaData={
        title:'abc',
        test:[{
            title:'test',
            desc:'description'
        }]
    }
    let {title:esTitle,test:[{title:cnTitle}]}=metaData;
    console.log(esTitle,cnTitle);//輸出abc test
}

解構賦值表達式右邊的部分表示解構的源；解構表達式左邊的部分表示解構的目標，如果左右兩邊對比成功就返回右邊的值，如果沒有對比成功就會undefined返回原來的值

除此之外還可以返回一些函數(shù)和方法

轉自：csdn 作者：勤快的基佬

藍藍設計( www.payeee.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務