分享變量解構分2部分

1. ES變量的聲明
2. 變量的解構概念，用法，註意事項（數組解構，對象解構）
3. 可能在項目遇到的應用場景

第一部分變量的聲明

ES6之前

大家都了解JavaScript 中變量作用域的基本單元一直是 function，就是函數作用域，
如果創建塊級作用域的話就是要聲明立即調用函數

// 全局作用域
var a = 2

// 塊級作用域，
（function (){
   
    var a = 3
    console.log(a)

 })()

 console.log(a)

let 聲明

es新增2個聲明變量 let ，const方式， 只要在任意塊裏用這2個聲明方式聲明的都市塊級作用域變量，

 var a = 2;

{

  let a = 3
  console.log( a );        // 3

}

console.log( a );          // 2

const 聲明

用於創建常量。塊級變量聲明,這個變量的值在聲明時設定之後就不允許改變。 const 聲明必須要有顯式的初始化。如果需要一個值為 undefined 的常量，就要聲明 const a = undefined 。

{
   const a = 2;
   console.log( a );     // 2
   a = 3;                     // TypeError!
}
 

塊作用域函數

從 ES6 開始，塊內聲明的函數，其作用域在這個塊內

{
   foo();         // 可以這麽做!
   function foo() {
    // ..
   }
}

foo();          // ReferenceError

舉個列子

a = 1， 每隔1秒輸出a+1的值， 並賦值給a以此累加到值5為止

// 錯誤的
// 錯誤原因是 異步執行時去找 i變量，此時i的值為 
for (var i = 1; i<=5;i++) {

    setTimeout(function(){
      console.log('i=>', i)
    }, i*1000)

}

// 利用之前的塊級作用域
for (var i = 1; i<=5;i++) {

      （function (i){
             //  原因相當於每次聲明一個i 來實現塊級
           setTimeout(function(){
               console.log('i=>', i)
           }, i*1000)
           
        })(i)

}

// 利用ES6的塊級申明
for (let i = 1;i<=5;i++) {
   // 相當於每次聲明 i 在塊內
   setTimeout(function(){
        console.log('i=>', i)
    }, i*1000)
}
 

let,var,const註意事項

let,var 聲明且未賦值時默認值undefined，const必須顯示聲明 不會默認undefined

let  name = '張三',age 
var _name = '李四',_age
const __name = '王五', __age  // 報錯

連續聲明賦值可采用數組解構

變量解構

ES6變量解構賦值