JavaScript ES6 解构入门

让我们仔细看看 ES6 带来的帮助变量和参数声明和分配更明确的新语法。对目前的状况是相当直截了当:在左侧有一个变量名,右边有哪些,除其他事项外,可以是一个数组的表达式:[ ] 或对象文本: { }. 解构分配允许我们有像变量声明表达式描述一样在左侧定义变量,在右侧分配值。听起来有点混乱?让我们看看具体的例子。

数组解构

让我们假设我们有一个value的变量,它的值是[1,2,3,4,5] ,我们想声明包含前三个元素的变量。传统的方式像这样定义每个变量:

有了这些变量,我们原来的现在可能被表示为[el1, el2, el3, 4, 5]而且,由于我们不关心约最后两个值的时刻,像[el1, el2, el3]。ES6允许我们现在就在左边用这句话,以达到如上同样的声明:

右侧不必是一个变量,我们可以省略value声明:

左侧不必申明或者,您可以使用已声明的变量:

这给我们带来一个整洁的小把戏,以前在JavaScript中只有两个变量是不可能的 – 交换价值。

解构分配也可以嵌套:

从函数返回的元组在ES6变得更加重要,感觉很自然的:

在适当情况下你也可以忽略数组中的某些元素只是省略变量:

这使得它很整洁例如拉出来的值的正则表达式匹配:

再远一步,你也可以指定默认值:

请注意,这仅适用于undefined的值。在下面的例子firstNamelastName会为null

传播机制让事情更加有趣传播,或者叫做“休息”模式,允许你从数组中获取“剩下的值”。在下面的例子tail接收所有剩余的数组元素,值为[4,5]

不幸的是实施ES6提示图标的是有些原始,只允许你获得剩余的元素。以下的正则,而且还非常有用,但在ES6中不可能实现:

 

对象解构

现在你有一个关于如何处理数组解构作品非常清醒的认识,让我们看看对象解构。它的工作原理几乎相同的方式,只是对象:

ES6允许你使用从他们指的是属性名不同变量标识符拉对象的属性。在下面的例子中,变量name将被定义为person.firstName值。

如果你有一个更复杂的,深度嵌套,对象?不是问题!

你可以在这里扔进一些数组解构:

其他的方法:

和数组处理一样你还可以指定默认值。

这还仅适用于undefined的值。在下面的例子firstNamelastName会为null

 

解构函数参数

在ES6函数的参数也可以在一个解构的方式定义。这让 options 参数更加有用。你可以使用数组和对象一起解构。

看上去感觉的ES6好得多:

 

尾声

ES6解构为JavaScript带来了急需的现代化语法。它提高了可读性,并降低了对表达声明必要的代码量。

ES6今日

如何在今天使用ES6的功能?在过去几年中使用编译器已成为常态。人和大公司不再回避。Babel是ES6到ES5转换器,它支持所有ES6的功能。

如果您使用的是类似的东西Browserify在JavaScript建立管道,增加Babel transpilation [只需要几分钟的时间(https://babeljs.io/docs/using-babel/#browserify)。当然了,几乎每个常见的Node.js生成系统,例如Gulp,Grunt以及其他类型,都支持。

浏览器呢?

大多数的浏览器正在加紧实施新的功能,但不会充分支持。那就意味着你需要等待?那是需要的。好消息是在未来1-2年内这个语法特性将会普及,所以你可以在那时候很舒服的使用它。另一方面,如果你觉得有必要100%控制源代码,你应该现在坚持使用ES5.

 

 

原文链接

此条目发表在研发分类目录,贴了, 标签。将固定链接加入收藏夹。

发表评论