ES6之解构赋值

解构赋值

传统的定义多个变量：

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
欢迎你的到来 ~ ~ ❤❤❤