ES6---變量解構賦值

1.數組的解構賦值

  1.1 基本用法

解構賦值：在ES6中 ，按照必定模式從數組和對象中提取值，而後對變量進行賦值，這被稱爲解構賦值。
本質：這種寫法屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

let [foo,[bar],baz]=[1,[2],3]
foo // 1
bar // 2
baz // 3

 

若是j解構不成功，變量的值就爲undefined

let [x,y,...z]=['a']
x // 'a'
y // undefined
z // []

 

 1.2 默認值

解構賦值容許指定默認值

let [foo=true]=[];
foo // true

 

ES6內部使用嚴格相等於運算符（===）來判斷一個位置是否有值，若是數組的成員不嚴格等於undefined，默認值就不會生效。即，一個位置的值不是undefined，那麼即便設置了默認值，也不會有效。

let [x=1]=[undefined]
x // 1

let [x=1] =[null]

x // null

 

2.對象的解構賦值

let {foo,bar}={foo:'abc',bar:'xyz'}

foo // 'abc'
bar // 'xyz'

 

2.1 當變量名和屬性名相同時

let {foo,bar}={foo:'abc',bar:'xyz'}
foo // 'abc'
bar // 'xyz'
上述代碼的實質應該是：
let {foo:foo,bar:bar}={foo:'abc',bar:'xyz'}
// 當變量名和屬性名同樣時，能夠簡寫 {foo,bar}來代替{foo:foo,bar:bar}

 

對象解構賦值的內部機制：是先找到同名屬性，而後再賦值給對應的變量。真正賦值的是後者，而不是前者

2.2 當變量名與屬性名不一樣時：

let {foo:hello,bar:world}={foo:'abc',bar:'xyz'}
hello // 'abc'
world // 'xyz'
foo // error: foo is not defined

 

foo是匹配的模式，hello纔是整正的變量

數組解構賦值與對象結構賦值的差別：

數組的元素是按次序排列的，變量的取值由位置決定；而對象沒有次序，變量名必須與屬性名相同，才能取到正確的值。

3.字符串的解構賦值

字符串結構賦值的時候，字符串被轉換成了一個相似數組的對象

const [a,b,c,d,e]='hello'
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'

 

 //這種類數組的對象，有length屬性，所以也能夠對length屬性進行解構賦值

let {length:len}='hello'
len // 5

 

4.數值和布爾值的解構賦值

數值和布爾值進行解構賦值的時候，會先轉換爲對象

let {toString:s} = 123
s // Number.prototype.toString

let {toString:s} = true

s // Boolean.prototype.toString

//數值對象和布爾值的包裝對象都有toString屬性，由於變量s能夠取到值

 

解構賦值的規則：只要等號右邊的值不是數組或者對象，就先將其轉化爲對象，因爲null和undefined沒法轉化爲對象，因此對他們解構賦值會報錯

let {proxy:x}=undefined;
x // TypeError

let {proxy:y} = null;
y // TypeError

 

5.函數參數的解構賦值

function add ([x,y]){
    return x+y;
}

add([1,2])  // 3

 

6.用途

 6.1 交換變量的值

沒有解構賦值的狀況下，交換兩個變量須要一個臨時變量

let x=1;
let y=2;
[x,y] = [y,x]
x // 2
y // 1

 

 6.2 從函數中返回多個值

從一個函數返回一個數組是十分常見的狀況
可是函數只能返回一個值，若是須要返回多個值，只能將他放在數組或者對象裏返回，有告終構賦值，取出這些值就很是方便

// 返回數組
function example(){
    return [1,2,3]
}

let [a,b,c]=example()
a // 1
b // 2
c // 3

// 返回對象
function example(){
    return {
    foo:1,
    bar:2
    }
}

let [foo,bar]=example()
foo // 1
bar // 2

 

6.3 函數參數的定義

解構賦值，能夠很方便的將一組參數與變量名對應起來

6.4 提取JSON數據

解構賦值在提取JSON數據尤其有用

let jsonData = {
    id:42,
   status:"OK",
   data:[23,45]   
}

let {id,status,data}=jsonData

console.log(id,status,data)
// 42,"OK",[23,45]

 

6.5 定義函數參數的默認值

避免在函數體內部再寫 var foo = config.foo || "default foo"這樣的語句

   jQuery.ajax= function(url,{
      asyc=true,
      beforeSend=function(){},
      cache=true,
      complete=function(){},
      crossDomain=false,
      global = true,
      //  .... more config
    }){
      // ... do stuff
    }

 

6.6 遍歷Map結構

任何部署了Iterator接口的對象均可以使用for...of循環遍歷
Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值都很是方便

    var map = new Map()
    map.set("first",'hello')
    map.set("second",'world')

    for (const [key,value] of map) {
      console.log(key + "is" +value)
    }

    // first is hello
    // second is world
    
    // 只想獲取鍵名
     for (const [key] of map) {
      //
    }
     // 只想獲取鍵值
     for (const [,value] of map) {
      //
    }

 

6.7 引入模塊中的某些方法

cosnt {sourceMapConsumer,SourceNode} = require('source-map')

 注：該筆記僅爲學習參考地址：阮一峯《ES6標準入門》(http://es6.ruanyifeng.com/#docs/destructuring)