ES6學習-4 解構賦值(1)陣列的解構賦值

郭郭老師發表於2021-05-23

解構賦值是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

相關文章