JavaScript ES6对象符号入门

没有可以申明的东西

让我们来聊聊ES6中的对象申明。和前身ES5相比,它有一个较大的升级。ECMAScript 6 在这领域没有带来任何新的功能(我们不在这里讨论class关键字),但它确实有大量的新语法来帮助我们保持在海湾的所有括号。

通过这篇文章,我要去概括所有的新ES6对象声明语法。

方法缩写

你有多频繁的申明属性函数?我知道我应该比我记得的次数还多。

ES6带来了新的语法来缩短这很常见的申明模式。请注意下面的示例中,缺少了function关键字!在ES6中这两个例子在技术上是同一回事,并且可以共存,这也是一件好事情。

 

Getters和Setters

在相当长的时间里,在ES5中用Object.createProperty()定义只读属性。我现在想,也许这就是为什么你很少看到今天正在使用此功能的原因。

为了定义一个只读属性而每次都打这么多让我觉得十分麻烦。ES6介绍了正确的getter和setter语法是这个成为第一个类功能:

这里的区别相当惊人。这两个例子是等效的功能,但ES6更易于管理和感觉属性属于类。任何尝试设置hello属性值都会返回一个异常:

使用set关键字 也十分容易的定义setter:

在ES5中应该这样定义:

和getter不同,尝试从只写属性中读取只,不会抛出错误,而会返回undefined. 我不能确定感受得到这里的行为差异,同时也不认为我一生中遇到过使用只写属性。我想我们可以认为这是一个“没什么大不了”的功能。

计算的属性名称

通常你必须使用键基于变量创建对象。在这种情况下传统的方法看起来像这样:

功能化?是的而且也非常恼人。在ES6中,您可以定义计算的属性名称期间无需单独的语句的对象声明,如下所示:

这里有另外一个例子:

 

速记分配

我个人最喜欢的功能之一就是速记分配。让我们先看看ES5的例子:

撒上一些ES6魔法,你就可以拥有:

基本上,如果变量和属性的名称是相同的则可以省略右侧。没有任何事情可以阻止你从混合和匹配:

 

ES6今日

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

如果你正在你JavaScript构建流中使用Browserify,增加Babel转换功能只需要花几分钟时间。当然了,几乎每个常见的Node.js生成系统,例如Gulp,Grunt以及其他类型,都支持。

浏览器呢?

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

 

 

原文链接

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

发表评论