ECMAScript 6:Destructuring Assignment(解构赋值)

Destructuring Assignment也可以翻译为自解包赋值。听起来很复杂的样子,它让我想起了面向对象中的封转和多态。

本质上ECMAScript 6 (ES2015)的解构赋值允许你从数组或对象中提取出单独的元素,并进行赋值。

假设有一个数组,如下:

在ES5中,我们可以使用索引得到数组里的元素:

在ES6中,由于提供了Destructuring Assignment,语法更为简洁:

还可以跳过某个元素:

或使用…提取剩余的元素:

解包同样可以应用到对象上:

在上面的例子中one,two,three和对象属性名相同,我们可以把对象属性赋值给其他任何变量名:

来看一个更加复杂的对象:

关于destructuring assignments要牢记如下两点:

  • 左边是解包的目标,定义了要赋值的变量
  • 右边是要解包的源,需要被解包的对象或数组

在进行解包赋值时还要注意如下几点:

  1. 不要忘记var声明:
  2. 如果变量已经定义,要加():
  3. 也要注意定义的变量和未定义的变量混合问题:

    使用解包赋值定义变量

同是定义多个变量,如下:

使用解包赋值貌似有点长,根据需要选择吧。

使用解包赋值交换变量

在ES5中交换变量需要一个临时变量,但是ES6就简单多了:

其实它并不限制于两个变量,多个变量同样适用。重新排列多个变量:

从一个函数中返回多个值

一个函数可以返回一个值(可以是一个复杂对象或一个多维数组),Destructuring Assignment允许一个函数返回多个值:

ES6:for-of遍历

使用解包赋值:

到目前为止(2015年),主流浏览器对它的支持并不完整。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注