1. 程式人生 > >ES6之解構賦值

ES6之解構賦值

1. ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 。 

   let  [a,b,c] = [1, 2 , 3]

2. 如果等號的右邊不是陣列(或者嚴格地說,不是可遍歷的結構,參見《Iterator》一章),那麼將會報錯。如下例 :

  let  [foo] =1

  let   [foo] = false

  let [foo] = NaN

  let [foo] = undefined

  let [foo] = null

  let [foo] ={}

3 .解構賦值允許指定預設值。

let [foo = 123] =[ ]     //  foo=123

注意,ES6 內部使用嚴格相等運算子(===),判斷一個位置是否有值。所以,只有當一個數組成員嚴格等於undefined,預設值才會生效。

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

let [x=1] = [null]    //x = null

4.物件的解構賦值 

let { aoo ,boo } ={aoo:123,boo:456}

// aoo=123, boo=456

說明 :物件的解構與陣列有一個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。

5 . 物件的解構也可以指定預設值。

var {x,y=5}={x:1}

// x=1 y=5

var {x:y=5}={ x:8}

// y=8

說明 : 預設值生效的條件是,物件的屬性值嚴格等於undefined

var {x:3}= {x: null}

6 解構賦值的用途 如下例 :

    let x=1;let x=2;

    [x,y] = [y, x]

1. 上面程式碼交換變數xy的值,這樣的寫法不僅簡潔,而且易讀,語義非常清晰。

2.提取JSON資料 如:

  let  jsonData={

    "id": 10,

    "code": 0,

   “returnResult” : [ 10,20 ]

}

let { id, code,returnResult: arr }= jsonData

console.log( id, code, arr)     //10  0   [10, 20]

3 .輸入模組的指定方法 

1 .載入模組時,往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

 const  { SourceMapConsumer, SourceNode  } = require( "source-map")

4 .遍歷map解構 。

(1)任何部署了 Iterator 介面的物件,都可以用for...of迴圈遍歷。Map 結構原生支援 Iterator 介面,配合變數的解構賦值,獲取鍵名和鍵值就非常方便。

 const map=new Map()

map.set('first' ,'hello' )

map.set(' second ', 'world')

for( let [ key,value ] of map) {

    console.log( key )

}