陣列的解構賦值
基本用法
ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為結構。
在ES6之前想要為變數賦值，只能指定其值，如下：
let a = 1;
let b = 2
複製程式碼而在ES6中可以寫成這樣，如下：
let [a,b] = [1,2]
// a = 1, b = 2
複製程式碼值得注意的是，等式兩邊的值要對等，這樣左邊的變數才會被賦上右邊對應的值，如果不對等左邊的值將會出現undefined，如下寫法：
let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3
注意：只有左右兩邊的 格式一定要對等，數量可以不對等。
let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined
let [a,,c] = [1,2,3]
a = 1, c = 3
let [a, ...b] = [1,2,3]
a = 1, b = [2,3]
let [a] = []
let [b,a] = [1]
a = undefined
複製程式碼還有一種情況，等號左邊為陣列，但是等號右邊為其他值，將會報錯。如下：
let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};
以上都會報錯
複製程式碼但是如果左邊為陣列，右邊為字串，將會取字串的第一個下標的值
let [a] = '121321' a = '1'
let [a] = 'adgasg' a = 'a'
複製程式碼對於Set結構，同樣可以使用陣列的解構賦值。
let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3
複製程式碼預設值
解構賦值允許指定預設值
let [a = 3] = [] // a:3
let [a = 3,b] = [,4] // a:3 b:4
let [a = 3,b] = [5,4] // a:5 b:4
複製程式碼特殊
let [a = 3] = [undefined] // a:3
let [a = 3] = [null] // a:null
複製程式碼Tips: 在es6中使用嚴格相等運算子，在結構賦值中如果需要預設值生效，則應對等的值為undefined的時候才會採用預設值，否則還是使用賦值。上面中null 不嚴格等於undefined++
如果預設值的賦值為一個表示式，只有當等號右邊的賦值沒有值為undefined的時候，才會取表示式中的值，如下：
function demo(){
console.log('demo')
}
let [a = demo()] = [] // a: demo
let [a = demo()] = [1] // a : 1
複製程式碼物件的解構賦值
與陣列的不同點是，陣列的元素必須和賦值的元素要位置一致才能正確的賦值，而物件的解構賦值則是等號兩邊的變數和屬性同名即可取到正確的值。否則值為 undefined
let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}
// 上面兩個的值 都是 a: 23 b: 3
let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined
複製程式碼物件的解構賦值還有將某一個現有物件的方法賦值到一個新的變數，如下：
let {sin,cos} = Math
// Math 中的sin cos 方法將賦值給變數 sin cos
let {log} = console
// log(2) === console.log(2)
複製程式碼如果等號左邊的變數名不能和等號右邊的物件的屬性名一致，則必須寫成如下格式：
let {a:b} = {a:'ss'} // b：ss
//a是屬性名，b才是實際賦值的變數名
複製程式碼物件的解構賦值一樣是可以巢狀解構的，如下：
第一種：
let obj = {
p:[
'Hello',
{y:'world'}
]
}
let {p:[x,{y}]} = obj
// x: Hello, y: world
這邊的p只是屬性不是變數，如果p想賦值可以寫成：
let {p,:[x,{y}]} = obj
第二種：
const a = {
loc: {
t :1,
b :{
c:1,
d:2
}
}
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a
複製程式碼巢狀賦值
let o = {}, arr = []
({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]
複製程式碼如果解構模式 是巢狀的物件，如果子物件所在的父屬性不存在，則會報錯，如下：
let {foo:{bar}} = {baz:'baz'} //報錯
複製程式碼預設值
let {x = 3} = {}
// x: 3
let {x,y = 5} = {x : 1}
// x: 1, y: 5
let {x: y = 5} = {}
// y = 5
let {x: y = 5} = {x : 4}
// y = 4
let {x: y = 'hhhh'} = {}
//y = 'hhhh'
Tips:以上左邊 x為屬性名，y為變數
let {x = 5} = {x: undefined}
// x: 5
let {x = 4} = {x: null}
// x: null
同陣列一樣遵循 嚴格等於
只有右邊為undefined的時候預設值才會生效
複製程式碼注意點：
1）不能將已宣告的變數用於解構賦值，因為已經是一個程式碼塊。
字串的解構賦值
如果賦值的物件是陣列，字串將被分割為陣列的格式，一一對應賦值
let [a,b] = 'ha'
// a = h , b = a
同時可以獲得字串的長度：
let {length:len} = '12121'
// len = 5
複製程式碼數值和布林值的解構賦值
如果等號右邊是數字或者布林值 則轉換成物件或者說，除了是陣列和物件，其他值都將轉換成物件，null 和 undefined 除外。如下：
let {t:s} = 123
let {t: s} = true
複製程式碼函式引數的解構賦值
function add([x,y]){
return x+y
}
add([3,5]) // 8
[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13
function m({x=3, y=4} = {}){
return [x,y]
}
m({x:33,y:8}) // [33,8]
m({x:32}) // [32,4]
m({}) // [3,4]
m() // [3,4]
function m({x,y} = {x=0,y=0}){
return [x,y]
}
m({x:33,y:8}) // [33,8]
// 代替右邊的 x:0, y:0 所以是傳值 33 8
m({x:32}) // [32,undefined]
//因為傳值替代右邊的賦值，但是隻有x沒有y
//所以y是取 左邊y的預設值，因為你沒有賦值 為undefined
m({}) // [undefined,undefined]
// 取左邊x,y的預設值，因為沒有賦值 為undefined
m() // [0,0]
// 沒有傳值，使用本身的賦值 都是0
複製程式碼其他
不能使用圓括號的情況
- 變數宣告語句
- 函式引數
- 賦值語句的模式
可以使用圓括號的情況
- 賦值語句的非模式部分，可以使用圓括號
解構賦值的用途
- 交換變數的值
- 從函式返回多個值
- 函式引數的定義
- 提取JOSN資料
- 函式引數的預設值
- 遍歷Map結構
- 輸入模組的指定方法
歡迎關注 公眾號【小夭同學】
ES6入門系列