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

【探秘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,进行前端技术交流。  

个人隐私是如何“泄漏”的:国内外互联网企业隐私策略对比 惠普2014年Q1财报:净利润同比增16% PC业务逆势好转 “阅后即焚”挖谷歌墙角,GAE技术大牛跳槽Snapchat 日800万访客、20万RPS网站的5个9可用性架构 程序员想找好工作?那就学好Linux吧! 一周消息树:开源专家袁萌,国产COS操作系统是“杂种”,不是中国软件梦 移动周报:对话智能硬件云服务平台Yeelink Node.app:用Node.js API开发iOS“原生”应用 Google Project Tango:能3D捕捉的智能手机 成功打造Evernote API生态系统的五大经验 研发周报:Google与Facebook的产品研发之道 AMD高级副总裁Lisa Su访华 宣布引领AMD复兴的五大战略 一周热点:IBM新技术使网速达400G/s,硬盘会“烧掉”吗 特种作战,纽约极客企图建造现实中的“潘多拉星球” 领先Google 150年的数据可视化和“不务正业”的超级计算机 苹果会成为新微软的四大理由 雨血·影之刃:参选2014年Unity游戏及应用大赛 AT&T联手IBM对抗AllSeen:“晚点和堵车”将成历史 微软WP春季更新将降低手机生产成本 意在开拓新兴市场 私人定制,十款最佳Node.js MVC框架 开发者“逆袭”,就等你一票! 基于多路云计算方案焕发新春 浪潮抢发E7 v2服务器 美国人眼中的腾讯 英特尔发布64位凌动处理器Merrifield 布局移动市场 OvershareKit:开源的iOS社交分享工具库 Ruby 2.1.1发布,改进系统加速,服务器兼容等问题 专访Ejoy2D作者云风:因Lua而生的开源图形引擎 当DDoS跨入400Gbps时代,那些来自孩子们的攻击该如何应对! Mesos渐入主流,Twitter模式有望“无限复制” 几十亿美元当头,你现实世界信息是否还会安全? 华为V3服务器挑战小型机,多路高端市场汹涌 错误类型:Microsoft JET Database Engine (0x80040E09)是什么错误啊?请大虾们帮忙! 紧急:请问怎样在windows me中添加、设置并使用传真机 有谁有字节序转换的c代码?现在我要将网络字节序和主机字节序相互转换,但又不能调用api,不知那位大侠可以帮忙?先谢了! 用.NET制作安装盘的一些问题 有谁有字节序转换的c代码?现在我要将网络字节序和主机字节序相互转换,但又不能调用api,不知那位大侠可以帮忙?先谢了! 不能访问asp文件了?? 能做到让页面不刷新吗? 请教一个算法,有关数学的 FastReoprt 要!要!要!要!要!要!要!要! 《C++ Primer》 中文版怎么还不出啊! 重庆高程报名时间 怎样用NMFTP象网络蚂蚁那样自动获得下载文件的地址 特酷的串口通讯调试工具,有其它工具... 有没有win32版的mysql JDBC驱动? 郁闷!菜鸟的“关于数据库订购与发布的问题” :( 如何使子类的属性不可见 我想画曲线,类似log曲线的样子,不知道vc里面怎样才能方便的实现,有源码最好 特酷的串口通讯调试工具,有其它工具... 请问如何用电话线将各分公司连网,并实现数据上传功能,以保证总公司的数据汇总,CSDN的高手到那里去了,我已经第二次提了,没有一个人回 请指教! 特酷的串口通讯调试工具,有其它工具... 菜得不得了的 问题,从SQL SERVER中导入一个表(如表名QK)到ORACLE后,不知表名变成什么? 怎样看到PowerBuilder User’s Guide使用手冊。Application Techniques使用手冊呀? 一直想看古天乐的《创世纪》,请哪位提供一下网上哪里有它下载或在线看网址,不甚感激! 为什么一执行文件ss.txt得内容就清空了??? 中文问题 特酷的串口通讯调试工具,有其它工具... sos sos 求,向access2000中写数据的asp代码?和用asp连接access有几种方法? 如何保存xml的网页,谢谢! 如何声明一个变量,可在整个程序内调用,并其生命周期和程序一样长??? 请推荐一本数据结构的书,最好是大学教材,c++描叙,写了 求助:vc++ 6.0中,用向导生成了一个windows程序, 我又新加了一个工具条,怎样让它和以前的工具条在同一行上? 请问VIA VT82C686A芯片的主板最大支持的CPU是多少?? 怎样看vb中控件的代码?如:from,command... 大家帮我看看这段代码哪里错了???? 在jbuilder6下如何存取中文数据库,内码的转换如何实现?高手请进,100分奉上 请问如何在dbgrid控件中 第3列=第2列×第1列 有什么方法可以获得页面信息 菜鸟请教一个复杂结构类型结构体成员变量初始化赋值出错的问题。 CDC实现图片运动问题,请大家多多帮忙?如何擦掉已经画出的图片 那里有Delphi函数表?API的个人理解,希望修正!(新人学习在过程中的问题) exchange的路由器问题 WinFax的烦事。 请问IsProxyClass函数在哪找 请问怎么才能实现将一个datawindow中的某一列拖放到另外一个同样的datawindw中 有报考今年3月份高教自考《计算机及应用》专业的朋友吗? 我要找C!各位帮忙! 为什么在MS_DOS下运行MySQL提示"This program cannot be run in DOS mode"? 关于 Execute 口语交际 湖北省潜江市的环境污染以及为保护环境应做点什么? 关于性怎么解释? JMZ FMZ型不锈钢自吸泵的特点? 怎样才能保护环境?6年级的口语交际怎样才能保护环境?别那么长 家用自吸泵不出水怎么办? 不锈钢自吸泵哪家的性价比高? 自我介绍作文结尾怎么写?教下! 孩子有关性知识知道越多越好吗我的孩子有时会问我相关问题,我总是不想告诉他, 物体运动状态改变是指什么 1月,7月的高低气压中心有哪些? 家用自吸泵不出水水位到自吸泵垂直高度不超四米,但水管长度有十几米,电机功率125W,铭牌标的吸程9米.不出水.如果把进水管放到地面的水盆中就可吸水.谢谢几位朋友的回答!也是我提的问 不锈钢自吸泵哪家的性价比高? 如何判断气压的高低有道题给了地区海平面等压线分布图 可是我不会看这个图该如何判断它是低压还是高压呢 求方法 青藏高原为什么称为“世界屋脊”? 不锈钢自吸泵选型!某灌区有水田1500亩,轮灌天数为4天,每亩一次灌水为30m3,利用渠水灌溉水泵安装高度距水源垂直高度为3.5m,压水扬程要求7m,问选用什么类型自吸泵合适. 南北半球1月7月的高低气压中心有哪些? 上海街头舔奶门,说明国人的性福感增强了吗? 不锈钢自吸泵选型问题.北方旱田区一农户有耕地40亩全部种植小麦时,要求一周内全部灌溉一遍.每亩用水量60m3,已测得动水位距地面垂直高度为5米,地面距灌区垂直高度为6m,那么农户应选择什 澳大利亚1月和七月气压差异的原因 性知识.求解释同房的同月.例假推迟了五天还没来.是否会怀孕? 为什么称世界屋脊--青藏高原为世界第三级? 我们能听到物体发出的声音是因为: A有物体 B有发声的物体 C发声体在空气中振动 D物体在真空中被敲击 无密封式自控自吸泵…用什么水位开关好~电子、浮球、超声波……?价格不是问题…………用在污水池里的~ 不锈钢怎么报价 怎样跟孩子解释动物交配跟孩子出去时正好看到两只小狗在交配,孩子问,一时不知道该怎么跟孩子说,只好说了句“两只小狗在打架”,我知道这样不是很好,可又不知道该怎样跟孩子解释, 如何为孩子讲解性知识? 我国的青藏高原被称为世界屋脊 你是怎么理解这个称号 Mg在空气中可以和N2反应,但是按照氧化还原反应中O2的氧化性比N2的氧化性强,那么Mg应该先和氧气反应,等氧气完了后在和氮气反应,也就是镁在空气中只和氧气反应?这是怎么回事?希望解释下. 如何让孩子正确了解性知识? 王力防盗门和华爵防盗门那个好呢? 山西的窑洞特点就是一些特点,急用 常温下Mg能与空气中的O2反应吗?为什么?常温下Mg能与空气中的O2发生反应吗?为什么?那高温下呢? 人们做了哪些工作改善环境 窑洞的特点? 有若干克浓度为4%的盐水,蒸发了一些水分后变成了10%的盐水,再加入300克4%的盐水混合后变为6.4%的盐水.问最初的盐水多少克?一定要用二元一次方程! 为了改善环境人们做了哪些工作 ( )的物体,在液体中( ),比同体积的液体( )的物体,在液体中( ) 有若干克5%的盐水,蒸发一些水分之后变成了10%的盐水,再加进300克4%盐水,混合后变为6.4%的盐水,问:最初的盐水是多少克? 了解环境受到了哪些破坏或污染,为了改善环境,人们做了哪些工作 液体的体积常用什么来表示 有若干千克4%的盐水,蒸发了一些水分后变成了10%的盐水,在加300克4%的盐水,混合后变成6.4%的盐水,问最初的盐水是多少千克? 大连环境受到了哪些污染,为了改善环境,人们作出了哪些工作? 液体的体积用什么表示 有4%的盐水若干克,蒸发掉一部分水后,浓度变为10%;然后在加进4%的盐水300克,混合后变为浓度是6.4%的盐水,问最初 盐水多少克? 喜马拉雅山脉耸立在我国的青藏高原的哪个部位? 液体体积常用()、()来表示 有若干克浓度为4%的盐水,蒸发了一些水分后变成了10%的盐水,再加入300克40%的盐水混合后变为6.4%的盐水问最初的盐水多少克 青藏高原与喜马拉雅山哪个高 力的作用效果可以表现在两个方面:一是改变物体的运动状态,包括()改变和()改变两种情况. 噪声是指发声体做 的振动时发出的声音 若在月球上做发声实验,物体到底有无振动?是振动后我们听不见还是压根没震动?发声体振动有无条件? 窑洞是什么地方的房子 如何给孩子讲解关于性问题 各种振动的发声体叫 口语交际:怎么样保护环境(几句话)只要几句话 孩子们想知道的有关性和成长的那些事怎么样 为什么一切发声体在振动 帮我写一下保护环境的口语交际.急!1 立式无密封自吸泵不出水怎么处理 发声体振动越快,则.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘