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

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

VB中阴影字体的实现 VB自定义数据结构的传输转换 Visual Basic 窗体背景花纹的实现 Visual Basic 中的界面设计原则和编程技巧 Visual Basic 中文本框处理技巧集萃 Visual Basic 中字符淡出淡入的实现 Visual Basic窗体背景花纹的实现 Visual Basic下工具条的制作 Visual Basic中的界面设计原则和编程技巧 Visual Basic中在同一界面输入大量数据的几种方法 VisualBasic中的界面设计原则和编程技巧 VisualBasic中用户界面的设计原则 把 VB 标准的工具栏变成平面式 把窗体卸载干净-VB资料 保持初始的窗体大小-VB资料 编程实现将所有窗口最小化-VB资料 不规则形状窗口详细说明 -VB资料 不用 API ,直接调用关联的程序 -VB资料 处理过程时的鼠标显示 -VB资料 窗口处理技巧大全 -VB资料 窗口事件的发生顺序-VB资料 VB创建不规则窗口 VB创建透明窗体 VB创建位图菜单 VB创建无 Icon 的窗口 打开 Win95 的创建快捷方式窗口-VB资料 打印机技巧 -VB资料 带有历史记录功能的菜单-VB资料 得知目前Mouse所指的Menu Item是哪一个-VB资料 调整 Combo 下拉部分的宽度 -VB资料 对象是使用 TAB 键还是鼠标激活的 -VB资料 快捷方式损坏怎样修复? bluesky069(菜鸟一族)你帮助我把那个PBL放到蛛蛛的信箱好不好呢?让大家都可以下在的! 请问哪里有w32dsm.exe的教程??? 潘译<>印刷错误百出,令人不忍卒读... LISTBOX的问题?请高手帮忙!!高分向送! 帮我想想这个主键该怎么建SQL SERVER7 如何将控件,恢复init()到初始状态 急救:装有SCO UNIX的硬盘克隆后不能启动系统,怎么办? 如何在FTP的目录下再新建目录?我初学网络编程, 怎样设置ScrollView中的ScrollBar不可见? 有关comboBox问题??????急!急!!! 有那位朋友对ADO控件调用T-SQL的链接服务器或存储过程的命令有所了解,或知道怎样取链接服务器的相关信息 真诚的向大家请教一个问题!!先谢谢了 redhat linux7.2安装完成后,怎么没有工具栏 已知manager是employee的子类,那么这么写Employee epy=new Manager()为什么合法? 第五次提出这个问题:如何通过DELPHI调用SQL SERVER 过程向SQL SERVER 存入图象。 为什么我在新闻聚焦中发表不了评论? 在VB里怎样用ADO存贮Access的Memo型字段? 誰有在PB下用powersock做的聊天程序? SQL的好书是什么呀?难道就没有人有体会? vb怎样格式化硬盘?? 做个《曹操传》之类的游戏需要多少投资? 关于sfc(系统文件扫描)的问题 高分求解,大虾请进 买了java程序员大本营的请进!!!! 请大家陈说学msce的前途 如何使用ProgressBar casting在java中是什么意思啊? querymode 查询器不稳定吧? 各位兄弟姐妹,在长沙拿3K是个什么水平,和沿海比怎么样,还需不需要跳槽? 想知道用程序免费发手机短信吗? 请问各位软友哪里有介绍C++Builder控件属性,方法和事件的资料。 高分相赠!!!求解我爱背单词2001共享版注册码!!! 我的XP不能上网了,添加163连接最后总说无法更新通讯簿,不能成功 如何添加纪录? 想学如何用程序发手机短信吗? 请问过滤条件filter怎么用?? 使用微软SQL Server的Select时,怎么写才能检索从N条-M条的记录(也就是说直接检索,而不是全部检索后取其中的一部分.) 如何通过程序得到系统的所有热键。谢您了。 关于CSICO防火墙515-R的问题?急 想知道在程序中如何发手机短消息吗? 求助在VC中怎样用串口控件MSComm1??(我在VB和DELPHI中用过,但不知道在VC中怎样用) 怎么给char months[12][4]赋值...... 哪里有xml spy的中文参考书 安装VisualAge for Java 出错(很急呀!!!) 求救:bcb中char与AnsiString的相互问题?? 请看:用程序发送手机消息. 第六次提出这个问题:如何通过DELPHI调用SQL SERVER 过程向SQL SERVER 存入图象 怎么可以使多个按钮同时保持按下状态?我的怎么只能安下一个? 请教各位项目经理,在开发软件过程中会有什么问题? 想学习如何用程序向手机发送短消息吗? 井底之蛙,所见甚小.和一叶障目,不见泰山.所包含的物理知识? 高炉炼铁的生铁出口为什么比炉灰的出口低 纯铁的熔点为1535℃,而高炉中炼铁时生铁(含碳量较高的铁的合金)在1200℃左右就熔化了,这是因为( )A.因为形成了铁碳合金,所以熔点变低B.合金的熔点比其成分物质的熔点高C.铁的纯 三角函数五点作图法横坐标点问题比如2sin(2x+π/3)横坐标点怎么确定?(⊙_⊙ 电路图 电流与电压的计算!在电路中R1与R2是并联,且与灯L是串联,R1=30欧R2=60欧RL=40欧U=12求:1、经过电阻R1的电流及R1两端的电压?2、经过灯L的电流及L两端电压?具体公式算法帮忙列出来, 炼铁时为何生铁出口低于炉渣出口 三角函数五点 作图y=sin(x+∏/6)五点是什么啊?怎样得出来的?是y=sin(x+π/6) 具体的求点方法~ 这个电路的电压和电流怎么算 高炉炼铁时生铁出口低于炉渣出口 锰矿与锰铁有什么区别 混连的电路的电压:某个点上的电压 总电压 电流:某个点上的电流 总电流怎么算 咱们就从这个图算就行 拜托了 生铁出口低于炉渣出口是因为 硅锰和锰铁的区别在元素组成和含量上有无不一样? 怎么计算出一些复杂的电路图的各点电压和电流?(有图)象这个复杂电路图应该怎么计算出各点的电压电流?要结合什么定律?分析电路的工作原理是不是都应该这样?我是学电子的现在还是一 漫画《井底之蛙》的含义 锰铁粉的含量怎么检测 井底之蛙是出自什么成语 “井底之蛙”的含义 硅铁、锰铁、废料铁混合而成的材料好还是硬质合金好?具体有那些区别? 带“蛙”字的成语(井底之蛙除外) 井底之蛙的含义 400平方 电缆,380电压下能承受多大的电流,距离230米 如图12所示漫画描述的是“一叶障目”这个成语,这个成语说明了一个什么物理原理? 井底之蛙的之是什么意思! 五点法作图 第二小问 应该怎么取?是取括号里的为0,pi/2,pi…还是x高一数学三角函数 五点法作图 第二小问 应该怎么取?是取括号里的为0,pi/2,pi…还是x可是那个0,pi是什么的范围! 高炉炼铁:请教同行的师傅:高炉后期的操作如何提高冶炼强度? 焦炭是冶炼铁的原料之一 其作用是 铸造中用的 覆膜砂、硅铁、锰铁、蠕化剂、球化剂、硅钙、甲基硅油等 对人体的伤害?我早铸造厂上班,请问铸造厂中使用的覆膜砂、硅铁、锰铁、蠕化剂、球化剂、硅钙、甲基硅油等对人体 冶炼ZL102合金铝怎么增加强度 工业上冶炼含fe2o3为百分之80的铁矿石100t,可得纯铁多少吨?(假设原料充分利用) 生铁,硅铁,锰铁的溶点是多少? 冶炼企业,10台回转窑,每台100KW,求年用电量?总功率多少?变压器应是多少? iron是什么材料 铸造用锰铁如何检验 精炼电弧炉变压器如何做到恒功率运行和恒流运行 炼一吨铁需要多少原料?炼一吨铁需要哪些原料?量是多少?如果铁矿石品位是50的,怎么样计算的 钢水35号请问锰铁硅铁的加入时间 请举例说明硫的氧化性比氧气和氯气弱 水银洒在桌子上,要洒上硫粉进行回收,是咋回事? 165个千瓦多少电流(A)电压380 判断氯气和氧气的非金属性强弱,通过什么实验来验证,原理是什么 见识短浅,却又妄自尊大的“井底之蛙”为什么会“坐井观天,所见甚小”,从光的传播角度考虑.谢谢咯``急`` 在380伏电压的线路中,它的电流每千瓦有多少A. 导致"井底之蛙,所见甚少"的原因 硫粉对水银有何化学反应? 直流电压80伏100千瓦等于多少个电流 心理学入门知识的书籍 高炉炼铁如何通过看渣、看铁块样品分析出铁水的成份? 一个160千瓦的电机380的电压怎么计算电流呢对吗有消耗的吗 综合基础知识的 书是什么书啊? 高炉炼铁 为什么铁水出口比除渣口低 灰铁250 多加锰铁能否解决缩松 强度低 硬度低 高炉工长需要懂得哪些知识(基础的)、在高炉操作中哪些方面是重点注意的?新手该从哪里学起?因为我是第一次接触炼铁这个工作行业、很迷茫、不知道从什么开始学起、但因为一些原因 高炉炼铁铁水上面飞出的花是什么东西 锰铁中所含的碳对终点钢水中的碳含量的影响是多少比如说 “高碳锰铁”中的碳含量为 7% .这个 7%中的7对钢水中的碳含量的影响是多少?如果冶炼 0.41% 含锰量为 1.5%的合金,1000千克中可产生 4. 下列物质只能在氧气中燃烧的是A.硫粉 B.红磷 C.铁粉 D.蜡烛 高炉炼铁为什么要加入石灰石,为什么要造渣?一氧化碳和氧化铁反应装置得到的铁是生铁还是纯铁?高炉里的焦炭燃烧生成的一氧化碳与氧化铁反应得到的是生铁还是纯铁?若是纯铁,那这纯铁 用物理光学解释井底之蛙最好有图 1)高炉炼铁时焦炭的作用是1_______2_______(2)为什么生铁出口低于炉渣出口? (3)请将发电机与电动机作一对比并简要概括它们的相同之处和不同之处.(4)请从铜,锌,钛,铁,钙,银,铝,汞八种金属中选取 高炉炼铁练成生铁还是纯铁?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn