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. 上面程式碼交換變數x
和y
的值,這樣的寫法不僅簡潔,而且易讀,語義非常清晰。
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 )
}