解析JavaScript的ES6版本中的解构赋值


Posted in Javascript onJuly 28, 2015

什么是解构赋值?

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁,而且比传统的属性访问更加清晰。

在不使用解构赋值的情况下,访问数组的前三项:

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

使用解构赋值后,相应的代码变得更简洁和可读:

var [first, second, third] = someArray;
 
var [first, second, third] = someArray;

SpiderMonkey(Firefox 的 JavaScript 引擎)已经支持解构赋值的大部分特性,但还不完全。
数组和可迭代对象的解构赋值

上面我们已经看到了数组解构赋值的例子,该语法的一般形式是:

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

这将把数组中对应的项依次赋给 variable1 到 variableN,如果同时需要声明变量,可以在解构表达式前面添加 var,let 或 const 关键字。

var [ variable1, variable2, ..., variableN ] = array;
let [ variable1, variable2, ..., variableN ] = array;
const [ variable1, variable2, ..., variableN ] = array;
 
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 [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"

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

你还可以用一个 Rest 表达式来捕获数组中的剩余项:

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

如果数组越界或访问数组中不存在的项,将得到和通过数组索引访问一样的值:undefined。

console.log([][0]);
// undefined

var [missing] = [];
console.log(missing);
// undefined
 
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
 
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 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 { 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"
 
var complicatedObj = {
 arrayProp: [
  "Zapp",
  { second: "Brannigan" }
 ]
};
 
var { arrayProp: [first, { second }] } = complicatedObj;
 
console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"

解构一个不存在的属性时,将得到 undefined:

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

使用对象的解构赋值时还有一个潜在的陷阱,在解构赋值时没有声明变量(没有 var、let或 const 关键字):

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

这是因为 JavaScript 语法告诉引擎任何以 { 开始的语句都是语句块(例如,{console} 就是一个合法的语句块),解决方法是将整个语句用一对括号包裹:

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

其他情况

当你尝试解构 null 或 undefined,你将得到类型错误:

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

不过,你可以对其他基本类型(Boolean、String 和 Number)进行解构,将得到 undefined:

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

 
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
 
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

实际应用
函数参数

作为开发人员,我们经常把一个包含多个属性的对象作为函数的参数,来实现更灵活的 API,而不是让 API 的使用者记住一些特定顺序的参数。我们可以使用对象的解构赋值,来避免每次使用参数时的属性访问:

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

配置对象

完善上面的例子,我们可以为要被解构的对象属性提供默认值,这在对那些作为配置参数的对象非常实用,因为许多配置项都有一个合理的默认值。例如,jQuery 的 ajax 方法的第二个参数为一个配置对象,我们可以这样实现:

jQuery.ajax = function (url, {
 async = true,
 beforeSend = noop,
 cache = true,
 complete = noop,
 crossDomain = false,
 global = true,
 // ... more config
}) {
 // ... do stuff
};
 
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;。
与迭代器一起使用

当遍历 Map 对象时,我们可以使用解构赋值来遍历 [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"

 
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"

只遍历键:

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

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

只遍历值:
for (var [,value] of map) {
 // ...
}

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

返回多个值

返回一个数组,通过解构赋值提取到返回值:

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

 
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 { foo, bar } = returnMultipleValues();

这两者都比使用中间变量好:

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

采用延续式:

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

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

导入 CommonJS 模块的指定部分

还没使用过 ES6 的模块吧,那至少使用过 CommonJS 吧。当导入一个 CommonJS 模块 X 时,模块提供的方法也许多余你实际使用的。使用解构赋值,你可以明确指定你需要使用模块的哪些部分:

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

如果你使用 ES6 的模块机制,你可以看到 import 声明时有一个类似的语法。
结论

我们看到,解构赋值在很多场景下都很实用。在 Mozilla,我们已经有很多经验。Lars Hansen 在 10 年前就向 Opera 引入了解构赋值,Brendan Eich 在稍微晚点也给 Firefox 添加了支持,最早出现在 Firefox 2 中。因此,解构赋值已经渗透到我们每天对 JS 的使用中,悄悄地使我们的代码更简短、整洁。

Javascript 相关文章推荐
对table和ul实现js分页示例分享
Feb 24 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 #Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 #Javascript
CSS3实现动态背景登录框的代码
Jul 28 #Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 #Javascript
详解JavaScript ES6中的模板字符串
Jul 28 #Javascript
javascript解决IE6下hover问题的方法
Jul 28 #Javascript
JavaScript如何自定义trim方法
Jul 28 #Javascript
You might like
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Laravel实现表单提交
2017/05/07 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
js常见遍历操作小结
2019/06/06 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
python实现翻译word表格小程序
2020/02/27 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
个人廉洁自律总结
2015/03/06 职场文书