文档章节

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

一配
 一配
发布于 2015/11/08 18:57
字数 2367
阅读 118
收藏 2
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);  
// 1  
console.log(bar);  
// 2  
console.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]);  
// undefined  
  
var [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);  
// true  
  
var { 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: Destructuring

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

本文转载自:http://www.csdn.net/article/2015-07-07/2825149-es6-in-depth-destructuring

一配
粉丝 35
博文 146
码字总数 117133
作品 0
西城
私信 提问
ES6学习路线图

第一部分:简介 【探秘ES6】系列专栏(一):ES6简介 http://my.oschina.net/1pei/blog/520581 第二部分:let和const, Symbols, 解构赋值, 模版字符串 说明:这一部分各专题之间都比较独立,...

一配
2016/01/18
172
0
【探秘ES6】系列专栏(二):迭代器和for-of循环

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配
2015/10/22
201
0
【探秘ES6】系列专栏(十二):let和const

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该...

一配
2015/11/17
133
0
【探秘ES6】系列专栏(五):剩余参数和默认参数

S6作为新一代JavaScript标准,正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列...

一配
2015/10/27
119
0
ES6系列入门学习记录:变量的解构赋值

前言 年都过去半个月了,我终于又重新开始更新了。虽然只是第二篇,但是我会继续加油努力,一定不会放弃更新的。在文章中若有什么不妥或者您有更多建议的话,欢迎和期待您给我留言,您的每一...

ExplorerCl
02/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据教程分享Scala系列之模式匹配和样例类

好程序员大数据教程分享Scala系列之模式匹配和样例类 1.样例类 在Scala中样例类是一中特殊的类,样例类是不可变的, 可以通过值进行比较,可用于模式匹配。 定义一个样例类: 构造器中每一个...

好程序员官网
4分钟前
1
0
让nginx上的静态网页在访问的时候没有html后缀

需求背景: 公司产品小姐姐觉得这个访问带html后缀不专业,要求访问不带html后缀 nginx 配置 #原配置 location / { index index.html index.htm index.php; try_files $...

Linux_Anna
5分钟前
1
0
beetl的内置函数

函数调用Beetl内置函数请参考附录,以下列出了常用的函数date 返回一个java.util.Date类型的变量,如 date() 返回一个当前时间(对应java的java.util.Date); ${date( "2011-1-1" , "yy...

gantaos
6分钟前
1
0
spring cloud 2.x版本 Gateway自定义过滤器教程

前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 [toc] 本文基于前两篇文章eureka-server、eureka-client、eureka-ribbon、eureka-feign和spring-gataway的实现。 参考......

毛毛向前冲V5
9分钟前
2
0
VPGAME 的 Kubernetes 迁移实践

作者 | 伍冲斌 VPGAME 运维开发工程师 导读:VPGAME 是集赛事运营、媒体资讯、大数据分析、玩家社群、游戏周边等为一体的综合电竞服务平台。总部位于中国杭州,在上海和美国西雅图分别设立了...

阿里巴巴云原生
14分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部