解构赋值
传统的定义多个变量:
var a = 1;
var b = 2;
var c = 3;
Es6中为了简单问题简单化,出现了解构赋值这一方法,比如上边的变量可以这样定义:
var [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3
可以看到,把变量充当数组元素进行定义,一步到位的定义了多个变量。
- 左边变量的数组中支持空值占位
var [a, , b] = [1, 2, 3];
console.log(a, b); // 1 3
- 也支持指定默认值,下边b给了默认值2
var [a, b=2, c] = [1, , 5];
console.log(a, b, c); // 1 2 5
- 解构赋值可以进行嵌套
var [a, [b, c]] = [1, [2, 3]];
console.log(a, b, c); // 1 2 3
在数组中可以嵌套另一个数组进行赋值。
- 赋值不成功时,变量值为undefined
var [a, b, c] = [1, 2];
console.log(a, b, c); // 1 2 undefined
以上是数组的解构赋值,定义对象也可以使用解构赋值。
也可以通过对象进行解构赋值:
var {name, age} = {name:'zzq', age:12};
console.log(name, age); // zzq 12
其它特点也都和上边相同。
用途
- 第一个用处是在交换两个变量的值
通常交换变量值都是通过第三个暂时变量进行交换,有了解构赋值以后就变得简单多了。
var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1
- 第二个用途是简化了函数参数的默认值
以往我们为了保证传进函数的参数值不为空,都会在函数体内为参数设值:
function sum(a,b){
a = a || 0; //如果a没有传值,则为0
b = b || 0;
return a + b;
}
var res = sum();
console.log(res); // 0
有了解构赋值以后,也简化了很多:
function sum(a=0, b=0){
return a + b;
}
var res = sum(1);
console.log(res); // 1
当给参数传值时,则按照传的值计算,如果没有传值,则使用给定的默认值,是不是简单了很多呢?
最后,跟大家分享一下我的个人博客地址:http://javascript404.com
欢迎你的到来 ~ ~ ❤❤❤