解构赋值是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