说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏(六):解构赋值

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第六篇,带你了解ES6的解构赋值。

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供大家学习借鉴。本文为该系列的第六篇。 

什么是解构赋值?

解构赋值可将数组的元素或对象的属性赋予给另一个变量,该变量的定义语法与数组字面量或对象字面量很相似。此语法非常简洁,相比于传统的属性访问方式,更加直观清晰。

在不使用解构赋值的情况下,通常我们这样访问数组中的元素:

var first = someArray[0];var second = someArray[1];var third = someArray[2];

使用解构赋值后,代码得到了极大的简化,同时可读性也更强:

var [first, second, third] = someArray;

除了个别特性,解构赋值的大部分特性在SpiderMonkey(Firefox的JavaScript引擎)中都已得到支持,详见 bug 694100。

解构数组与其可迭代性

上面的例子为我们展示了解构赋值在数组中的运用,其基本语法形式为:

[ variable1, variable2, ..., variableN ] = array;

这只是将变量1到变量N分配到数组相应的元素中。当然,如果想在同一时间对变量进行声明,可以在赋值前增加相应的关键字:var,let或const:

var [ variable1, variable2, ..., variableN ] = array;let [ variable1, variable2, ..., variableN ] = array;const [ variable1, variable2, ..., variableN ] = array;

事实上,变量一词用的并不准确,因为解构赋值同样可以用于数组嵌套的情况(注意:左右两侧的格式应保持一致):

var [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo);// 1console.log(bar);// 2console.log(baz);// 3

此外,左侧的变量列表还可以一种包含连续逗号的形式跳过右侧对应的值:

var [,,third] = ["foo", "bar", "baz"];console.log(third);// "baz"

ES6中,提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法——“rest“模式:

var [head, ...tail] = [1, 2, 3, 4];console.log(tail);// [2, 3, 4]

无论是访问数组外还是数组中不存在的元素,都会得到相同的结果:undifined:

console.log([][0]);// undefinedvar [missing] = [];console.log(missing);// undefined

注意,数组赋值模式的解构赋值,同样也可迭代:

function* fibs() {  var a = 0;  var b = 1;  while (true) {    yield a;    [a, b] = [b, a + b];  }}var [first, second, third, fourth, fifth, sixth] = fibs();console.log(sixth);// 5

解构对象

在对象中使用解构赋值,允许你为对象的不同属性绑定变量名。这种情况下,解构赋值的左侧部分类似一个对象字面量,对象中是一个名值对的列表,属性名称位于名值对内冒号左侧,变量名称位于名值对内冒号右侧,每一个属性都会去右侧对象中查找相应的赋值,每一个值都会赋值给它对应的变量:

var robotA = { name: "Bender" };var robotB = { name: "Flexo" };var { name: nameA } = robotA;var { name: nameB } = robotB;console.log(nameA);// "Bender"console.log(nameB);// "Flexo"

当属性名称和变量名称相同时,可如下简写:

var { foo, bar } = { foo: "lorem", bar: "ipsum" };console.log(foo);// "lorem"console.log(bar);// "ipsum"

就像嵌套数组可用于解构赋值一样,嵌套对象也可用于解构赋值,并且两种语法还可以结合在一起使用:

var complicatedObj = {  arrayProp: [    "Zapp",    { second: "Brannigan" }  ]};var { arrayProp: [first, { second }] } = complicatedObj;console.log(first);// "Zapp"console.log(second);// "Brannigan"

使用解构赋值访问对象中未定义的属性,将会得到undifined:

var { missing } = {};console.log(missing);// undefined

为对象的属性命名,但未对其声明(缺少var、const或let关键字),会抛出一个语法错误:

{ blowUp } = { blowUp: 10 };// Syntax error

这是因为,JavaScript的语法规定引擎对语句进行解析,需以块语句为开头(例如,{console}便是一个有效的块语句)。解决的办法是将整个表达式包裹在一对括号中:

({ safe } = {});// No errors

非对象、数组、迭代的解构类型

当我们尝试对null或undefined使用解构赋值时,将会抛出一个类型错误:

var {blowUp} = null;// TypeError: null has no properties

但是,对于其他原始类型如:布尔量,数字或字符串等则可以运用解构赋值,并得到undifined:

var {wtf} = NaN;console.log(wtf);// undefined

对于这种情况,你可能会感到很意外。但原因其实很简单,这是因为使用对象赋值模式时,被解构的值必需能够转换成一个对象(object)。大多数的类型都可以转换为一个对象,但null和undefined却并不能被转换。当使用数组赋值模式时,其值必须有一个迭代器。

默认值

对于值和属性未定义的数组与对象,你仍可以运用解构赋值的方式为其设定默认值:

var [missing = true] = [];console.log(missing);// truevar { message: msg = "Something went wrong" } = {};console.log(msg);// "Something went wrong"var { x = 3 } = {};console.log(x);// 3

(编者注:此功能在Firefox上目前只实现了前两种情况,而第三种并未实现。见bug932080。)

解构的实际应用

函数参数定义

作为开发人员,我们经常把一个对象用作函数的参数。这个对象具有很多的属性,以便暴露出更多便于我们使用的API,从而无需迫使我们的开发者去记住大量独立参数的顺序。我们对参数对象使用解构赋值,这样,在访问对象属性时,便可以避免重复调用这一参数对象,示例代码如下:

function removeBreakpoint({ url, line, column }) {  // ...}

这是来自Firefox开发工具JavaScript调试器(在JavaScript中执行)中的代码简化片断。我们发现这种模式是极好的。

配置对象参数

对前面的例子进行扩展,若我们正在对对象的属性进行解构赋值,那么我们仍旧可以为其赋予默认值。这是十分有用的,尤其是当我们打算配置对象或是对象的属性已经有了合理的默认值。例如,jQuery中的AJAX函数需要一个配置对象作为其第二参数,可以改写如下:

jQuery.ajax = function (url, {  async = true,  beforeSend = noop,  cache = true,  complete = noop,  crossDomain = false,  global = true,  // ... more config}) {  // ... do stuff};

这样就避免了为配置对象中的每个属性重复:var foo = config.foo || theDefaultFoo(编者注:不幸的是,在Firefox中,对象简写语法中的默认值仍旧不可使用,详情见bug932080的最新更新。)

ES6迭代协议

ECMAScript6中还定义了一项迭代的协议,在这个系列的前面我们已经谈到过。当你遍历 Maps(一个ES6非标准库),会得到一系列的[key,value]。我们可以对这些[key,value]运用解构的方式,从而方便地访问它们:

var map = new Map();map.set(window, "the global");map.set(document, "the document");for (var [key, value] of map) {  console.log(key + " is " + value);}// "[object Window] is the global"// "[object HTMLDocument] is the document"

只遍历key:

for (var [key] of map) {  // ...}

或只遍历value:

for (var [,value] of map) {  // ...}

多返回值

你可以通过数组的形式返回多个值,并对其解构赋值:

function returnMultipleValues() {  return [1, 2];}var [foo, bar] = returnMultipleValues();

或者,返回的值为一个对象,用解构赋值的方式对其进行命名:

function returnMultipleValues() {  return {    foo: 1,    bar: 2  };}var { foo, bar } = returnMultipleValues();

与上面两种模式相比,下面这种模式就显得过于繁琐:

function returnMultipleValues() {  return {    foo: 1,    bar: 2  };}var temp = returnMultipleValues();var foo = temp.foo;var bar = temp.bar;

或着使用连续风格的传递(continuation passing style):

function returnMultipleValues(k) {  k(1, 2);}returnMultipleValues((foo, bar) => ...);

从CommonJS的模块中导入接口名

不使用ES6模块了吗?仍使用CommonJS的模块?没问题!当导入一些CommonJS的模块时,非常常见的情况是模块的接口功能比你实际需求的多许多。通过解构的方式,你可以明确你需要的那部分,并且可以防止多余的接口名污染你的命名空间:

const { SourceMapConsumer, SourceNode } = require("source-map");

(如果你使用ES6模块,你应当知道类似的语法可用于声明导入。)

结语

所以,就如你所看到的那样,在很多独立细小的方面,解构赋值都非常有用。在Mozilla,关于它的使用我们积累了大量的经验。十年前Lars Hansen将JS的解构赋值模式引入Opera,随后Brendan Eich将他引入Firefox。并在Firefox2中得以应用。

之前,我们说ES6将会改变你写JavaScript的方式。将这些新的特性和微小的改进结合起来,它终将会影响你工作中的每一个项目。这是一场以进化的方式发起的革命。

当然,这是团队努力取得的成果。在这里,特别感谢Tooru Fujisawa (arai)和Arpad Borsos (Swatinem)作出的杰出贡献。关于浏览器的支持方面,Chrome对解构的支持正在开发中,无疑其他浏览器会及时支持。至于现在,如果你想在Web上使用解构,则需要使用 Babel或 Traceur。

原文链接:ES6 In Depth: Rest parameters and defaults

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏(一):ES6简介

【探秘ES6】系列专栏(二):迭代器和for-of循环

【探秘ES6】系列专栏(三):生成器

【探秘ES6】系列专栏(四):模版字符串

【探秘ES6】系列专栏(五):剩余参数和默认参数

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

依然很强大:微软第一财季净利润同比增17% MDCC 2013垂直行业应用与O2O专题论坛透露劲爆话题 专访豌豆荚产品设计团队:Design Hackathon是绞尽脑汁之后的海阔天空 首日报名爆满超300 向C++大师Lippman提问征集 做华为合伙人:华为开发者联盟沙龙(北京站)即将开幕 Windows XP发行12周年 我仍年轻而你已垂暮 2013浏览器市场份额:Chrome领衔,Firefox、IE相去甚远 人人网陈弢:从RecSys2013看大数据和移动给推荐系统带来的挑战 继续紧逼Oracle:在占领谷歌等公司之后,MariaDB迈向企业端 移动周报:十款最实用的Android UI设计工具 阿里巴巴CTO王坚:开发者精神是云计算与移动互联网的“信仰” 黑客老鹰:安全软件同样需要用户体验 六届中国大数据技术大会PPT精粹(二) 专访百度蒋凡:从RecSys2013大会看推荐系统发展新趋势 Hike副总裁杜中强:携手阿里云OS,拥抱云时代 玩蟹科技CEO叶凯:手游和云计算的合作相得益彰 倒计时20天!金玩奖各大奖项花落谁家由你主宰 宅男程序员福利:来自纽约的28位智慧与美貌并存的IT女神 创季度记录:苹果发布第四季财报 iPhone仍是苹果商业心脏 在破晓中行走:一位盲人开发的盲人应用 腾讯云俱乐部成都站——云时代手游开发:用数据说话 首届微App峰会将在MDCC2013上举行 微信易信百度新浪等平台开发商云集 TUP Masters第七期:C++大师Lippman论编程新范式Hugo OpenCL用于13个微型计算机领域的经典案例 从测试数据来看Node.js和Java EE的性能区别 工作效率低下?业内人士建议你切勿追求完美 Mozilla发布可视化在线跟踪工具Lightbeam 望向海外:十大移动应用开发外包公司 Facebook支撑万亿Post搜索背后的技术窥探 云OS:共创智能化生态圈 云计算,让游戏世界更加精彩 救命啊!2k中了W32.HLLW.Lovgate.G@mm病毒啦 如何使用asp。net? 我怎么在一个页面里做了操作后,同时打开的另一个窗口也同时就这个操作的影响 如何,用jndi连接oracle数据库呢?? 如何访问其他进程的内存? 38部《真实自拍影片》,精彩! 中秋节 散分贴三连发 第二贴 寻找压缩控件! 一个简单的SQL语句! 關於框架 请版主帮忙(怎样将asp中的动态数据填充到有一定格式的EXCEL模板文件中) 一个简单的问题,急! 为大家吐血献上:余世维《成功人士讲座》录像 Tomact设置问题 很简单的“异常”问题 linux vi的绝对路径是什么? 为我即将离开PB和IT行业,散分! 今天是中秋节,还是单身的水友进来坐坐。 哪有Crysrept下载?? Session为什么掉了??急切等待!!! struts中一个页面如何显示多个FormBean? 过节了,散分,祝大家中秋快乐!!!!!! 請問TForm中相當於MFC中OnIdle()的event是什麼 数据库问题,急!!急!急!急!急! CISCO2600的ISDN拔号不会自动断线,怎么办? 谁知道怎么验证一个用户名和一个密码是不是在WINDOWS2000中添加过的?而且正确? 。。。谁能给我发一个“智能狂拼2”的下载连接地址 请求--网页评比规则? 在visual.net上无法调试存储过程。急。求救 asp加密程序 我用SQL server+DElphi中的ADO做数据应用程序,数据库备份后,怎样实现数据库的恢复? 贴子太多了,看不过来了,大力liuri出来讲讲 sqlserver 用 jdbc出错 ,Microsoft][SQLServer 2000 Driver for JDBC]Error setting up static cursor cache 如何在C#中用代码控制本地FTP服务打开和关闭?99分,中秋快乐. 关于dll的问题,在线求教 昨晚,我抱了我MM一下!开心呀!散分! 有什么软件可以使上网不受防火墙的限制? 一个C的图形函数,请问怎样用的? 数据库查询语句执行错误 web页面的activex控件怎么调用服务器上的动态连接库?? 中秋散分 【泰坦】祝大家中秋节快乐!(1) 纯jsp聊天室的页面刷新问题 这个MSDN是不是常说的那个MSDN资料库? 一句sql语句问题 【泰坦】祝大家中秋节快乐!(2) 我的触发器为什么没有响应啊。在线等啊 pb9.0+sql server 2000,怎样制作程序发布? pb给dll传递结构数组的问题。急!!! pb9.0+sql server 2000,怎样制作程序发布? 为什么关闭MSDEV的时候,会导致它占用90%以上的CPU时间??? 教教我写一篇关于祖母生日的英语作文内容要点:1、祖母生日.2、买礼物.3、乘车去祖母家.4、见面.5、送生日礼物.6、准备午餐.7、午餐.8、告别.大家快点帮我想办法阿. 一道长方形的题一个长方形周长130厘米,如果宽增加1/5,长减少1/3,就得到一个相同周长的新长方形,问,原长方形的面积是( )平方厘米? 求助一道矩形题在矩形ABCD中,AB=3,AD=4,以AD为直径作半圆,M为BC上一动点,可与B,C重合,AM交半圆于N,设AM=x,DN=y,求出y关于自变量x的函数关系式,并求出自变量x的取值范围 我的笔记本电脑阅读题答案!我的笔记本电脑 我家有一台联想笔记本电脑,长约30厘米,厚约24厘米,和一本大笔记本差不多.它虽然个子不大,可功能却一点不少. 笔记本电脑通体漆黑,面板上 关于矩形的一道题,若矩形的两条对角线相交所成的角中,有一个角等于60°,且两条对角线的和是20cm,则这个矩形的周长为 cm .额 ,怎么用 对角线求周长吧~3Q了 一个矩形的对角线长6厘米,对角线与一边的夹角是45度,求矩形的长与宽. ps这张图右半部分增加几栋楼房,可以复制左边的,但别和左边的一模一样看清这张图,右半边是空的,看清长度 矩形ABCD中,AC,BD相交于O,AE平分角BAD交BC于E,角CAE等于15°,求证:角BOE的度数 关于矩形的一道题,3Q啦,就今天哦,已知等边△ABC中,D·E分别为AC,BC的中点,连接BD,以BD为边做等腰三角形BDF,求证四边形AFBE为矩形 u银盾的作用是什么 怎么用落叶纷飞造句 美国洛杉矶机场枪击案嫌犯面临终身监禁河北遭遇持续大雾笼罩 大面积高速关闭外交人员故事三则:阅尽人生博弈 领教外交官的家庭生活:丈夫常年在外 都是中国发展 世界受益——专访法国参议院地沟油\"变废为宝\"曲折路:海南生专访:中国与葡语国家经贸关系将再上新揭秘中国外交官是怎样炼成的:缺乏写作洛杉矶国际机场枪击案嫌疑人面临谋杀控浙江商品房销售面积和销售额增幅“双降境外媒体:中俄痛批美沉迷“偷窥世界”暴雨天气开车知多点米兰世博会中国馆设计亮相做细“里子工程”社区基金会培育发展启动中央纪委将完善派驻统一管理路边停车收费6月起试行共同打造中欧和平、增长、 改革、文明理论成果源于深圳改革创新实践广东公布53款 可能致癌缺陷商品从未说过父亲精神状态不好春雷滚滚 暴雨倾盆网游之亡灵小法师玩世至尊斗铠招艳星君阎王重生在1978我谋洪荒霸决洪荒重生犬夜叉万劫不灭诸天十道无上力量白帝城旅游狼牙山旅游哈素海旅游怀柔旅游阿里山旅游阆中旅游额尔古纳旅游绥中旅游湛江旅游邯郸旅游汕头旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘