解構賦值是ES6很大的一個提升,為我們帶來了很多方便,但用不好,會使程式的可讀性變差,所以用時要注意,儘量保持程式的易讀性。
陣列解構賦值
在JS沒有支援解構賦值之前,我們宣告幾個變數並賦值通常都是像下面這樣:
1 var a=0; 2 var b=0; 3 var c=0;
有了解構賦值就可以寫成這樣了
1 var [a,b,c]=[0,0,0]
確實簡單了許多,左邊與右邊能一 一對應的這種用解構賦值是既簡單又易讀。我之前為啥說用不好會使程式的可讀性變差呢,因為解構在不是一對一對時候也會成功,下面舉一些栗子:
1 let [ , , third] = ["foo", "bar", "baz"]; //前邊兩個跳過,直接用第三個元素給 third賦值,third:"baz" 2 let [x, , y] = [1, 2, 3]; //中間的跳過,用1給X賦值,3給Y賦值 x:1 y:3 3 let [x, y] = [1, 2, 3]; //用1給X賦值,2給y賦值,3沒啥用處, x:1 y:2
雖然這些方式也會賦值成功,但可讀性差很多,實際應用中儘量還是少用或不用。
解構賦值時的預設值
解析賦值允許指定預設值,如下面的栗子:
1 let [x, y = 'b'] = ['a']; // x='a', y='b',沒有給y賦值,所以y使用了預設值 2 let [x, y = 'b'] = ['a', undefined]; //x='a', y='b', undefined相當於沒人給y賦值,所以y使用了預設值 3 let [x, y = 'b'] = ['a', 'c']; //x='a',y='c' 用'c'給y賦值了,所以y變成了'c',沒有使用預設值
ES6 內部使用嚴格相等運算子(===
),判斷一個位置是否有值。所以,只有當一個陣列成員嚴格等於undefined
,預設值才會生效。
1 let [x = 1] = [null]; // x = null null不是undefined,所以x沒有使用預設值
一個很好用,也很有意思的程式碼,交換兩個變數的值:
1 let [a,b]=[1,2]; 2 console.log(a); //1 3 console.log(b); //2 4 5 [a,b]=[b,a] 6 7 console.log(a); //2 8 console.log(b); //1