ES6特性之：解构

最新推荐：《Vue3.0抢先学》系列学习教程

解构(destructuring assignment), 也称解构赋值，这种语法可以方便的将数组元素或对象属性赋成新的变量。

我们假设一个代码场景，我们用一个数组或对象包含2个元素，来代表一个坐标轴的坐标值：

//使用数组
var coords1 = [10, 20]; // x轴10, y轴20

//使用对象
var coords2 = {x: 50, y: 100}; // x轴50, y轴100

然后，我们要将这两个坐标值单独拿出来赋值成2个变量，通常会这么做：

var x1 = coords1[0];
var y1 = coords2[1];

var x2 = coords2.x;
var y2 = coords2.y;

是的，以前我们就是这么做的！而现在有了解构赋值语法，我们可以更加简单一些了，下面的示例代码和上面的效果是完全等价的：

var [x1, y1] = coords1;
var {x2, y2} = coords2;

在解构赋值的时候，也可以给变量设置默认值：

var [x=100, y=100] = [10];
//x=10, y=100

在解构数组的时候，有些值不想要，可以这样做：

var [x,,y]=[10, "hello", 20];

也可以在解构赋值的时候，使用Rest语法：

var [a, ...b] = [1, 2, 3, 4, 5];
//a=1
//b=[2, 3, 4, 5]

在解构对象的时候，你想赋成和对象属性名不一样的变量名，你可以这么做：

var {a:x, b:y} = { a: 1, b: 2 }
//x=1
//y=2

解构赋值也可以用在函数参数列表上：

function test({x, y}) {
  return x + y;
}

var obj = {x: 1, y: 5};
test(obj)