首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6特性之:解构

ES6特性之:解构

作者头像
一斤代码
发布2018-08-21 10:40:38
2350
发布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 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档