ES6特性之：解构

一斤代码

发布于 2018-08-21 10:40:38

2610

发布于 2018-08-21 10:40:38

文章被收录于专栏：大前端开发

解构(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)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.01.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度