• 027-87317566
  • 4352294@qq.com

站多多网络

当前位置:首页 > 微信网站
新闻资讯

力求视觉与交互的完美契合,以规范的流程和专注的态度,为您提供全方位的设计服务

JS开发者必须知晓的十个ES6新性能有哪些呢?

来源:武汉网站建设  浏览量:  发布时间:2017-06-07 09:26:25

最近我参加了一个在旧金山举行的HTML5开发者大会,听到的演讲半数都关于ES6(或者官方说法叫ECMAScript2015),我喜欢简洁的成为ES6。

这篇文章会给你简单介绍一下ES6。如果你还不知道什么是ES6的话,它是JavaScript一个新的实现,如果你是一个忙碌的JavaScript开发者(但谁不是呢),那么继续读下去吧,看看当今最热门的语言——JavaScript的新一代实现中,最棒的十个特性。

这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序):
默认参数
模版表达式
多行字符串
拆包表达式
改进的对象表达式
箭头函数 =&>
Promise
块级作用域的let和const

模块化
注意:这个列表十分主观并且带有偏见,其他未上榜的特性并不是因为没有作用,我这么做只是单纯的希望将这份列表中的项目保持在十个。

首先,一个简单的JavaScript时间线,不了解历史的人也无法创造历史。
1995年:JavaScript以LiveScript之名诞生
1997年:ECMAScript标准确立
1999年:ES3发布,IE5非常生气
2000年-2005年:XMLHttpRequest,熟知为AJAX,在如Outlook Web Access(2002)、Oddpost(2002)、Gmail(2004)、Google Maps(2005)中得到了广泛的应用
2009年:ES5发布(这是我们目前用的最多的版本),带来了forEach / Object.keys / Object.create(特地为Douglas Crockford所造,JSON标准创建者) ,还有JSON标准。
历史课上完了,我们回来讲编程。

1. ES6中的默认参数
2. ES6中的模版表达式
3. ES6中的多行字符串
4. ES6中的拆包表达式
拆包可能是一个比较难理解的概念,因为这里面真的是有魔法发生。假如说你有一个简单的赋值表达式,把对象中的house的mouse赋值为house和mouse的变量。
5. ES6中改进的对象表达式
你能用对象表达式所做的是超乎想象的!类定义的方法从ES5中一个美化版的JSON,进化到ES6中更像类的构造。这是一个ES5中典型的对象表达式,定义了一些方法和属性。
6. ES6中的箭头函数
这或许是我最想要的一个特性,我爱 CoffeeScript 就是因为他胖胖的箭头(=&>相对于-&>),现在ES6中也有了。这些箭头最神奇的地方在于他会让你写正确的代码。比如,this在上下文和函数中的值应当是相同的,它不会变化,通常变化的原因都是因为你创建了闭包。
7. ES6中的Promise
Promise是一个有争议的话题。现在有很多Promise实现,语法也大致相同,比如q/ bluebird/ deferred.js/ vow/ avow/ jquery deferred等等。其他人说我们并不需要Promise,异步,回调和generator之类的就很好。庆幸的是,现在在ES6中终于有一个标准的Promise实现。
8. 块级作用域的let和const
你可能早就听过对ES6中的let那些奇怪的传说,我记得我第一次到伦敦时为那些TO LET牌子感到非常困惑。但是ES6中的let和出租无关,这不算是语法糖,它很复杂。let是一个更新的var,可以让你把变量作用域限制在当前块里。我们用{}来定义块,但是在ES5中这些花括号起不到任何作用。
9. ES6中的类
如果你喜欢面向对象编程,那么你会特别喜欢这个特性。他让你编写和继承类时就跟在Facebook上发一个评论这么简单。
在ES5中,因为没有class关键字(但它是毫无作用的保留字),类的创建和使用是让人十分痛苦的事情。更惨的是,很多伪类的实现像pseude-classical, classical, functional让人越来越摸不着头脑,为JavaScript的信仰战争火上浇油。
我不会给你展示在ES5中怎么去编写一个类(是啦是啦从对象可以衍生出来其他的类和对象),因为有太多方法去完成。我们直接看ES6的示例,告诉你ES6的类会用prototype来实现而不是function。现在有一个baseModel类,其中我们可以定义构造函数和getName()方法。
注意到我给options和data用了默认参数,而且方法名再也不用加上function或者:了。还有一个很大的区别,你不能像构造函数里面一样向this.Name指派值。怎么说呢,和函数有相同缩进的代码里,你不能向name赋值。如果有这个需要的话,在构造函数里面完成。
使用NAME extends PARENT_NAME语法,AccountModel从baseModel继承而来。
10. ES6中的模块化
你可能知道,ES6之前JavaScript并没有对模块化有过原生的支持,人们想出来AMD,RequireJS,CommenJS等等,现在终于有import和export运算符来实现了。

ES5中你会用script标签和IIFE(立即执行函数),或者是其他的像AMD之类的库,但是ES6中你可以用export来暴露你的类。我是喜欢Node.js的人,所以我用和Node.js语法一样的CommonJS,然后用Browserfy来浏览器化。现在我们有一个port变量和getAccounts方法,在ES5中:个人来说,我觉得这样的模块化有些搞不懂。确实,这样会更传神一些 。但是Node.js中的模块不会马上就改过来,浏览器和服务器的代码最好是用同样的标准,所以目前我还是会坚持CommonJS/Node.js的方式。

目前来说浏览器对ES6的支持还遥遥无期(本文写作时),所以你需要一些像jspm这样的工具来用ES6的模块。

想要了解更多ES6中的模块化和例子的话,来看这篇文章,不管怎么说,写现代化的JavaScript吧!

怎么样可以在今天就用上ES6(Babel)

ES6标准已经敲定,但还未被所有浏览器支持(Firefox的ES6功能一览),如果想马上就用上ES6,需要一个像Babel这样的编译器。你可以把他当独立工具用,也可以将他集成到构建系统里,Babel对Gulp,Grunt和Webpack都有对应的插件。

ES6中还有很多你可能都用不上(至少现在用不上)的可圈可点的特性,以下无特定顺序:

Math / Number / String / Array / Object中新的方法
二进制和八进制数据类型
自动展开多余参数
For of循环(又见面了CoffeeScript)
Symbols
尾部调用优化
generator
更新的数据结构(如Map和Set)
武汉网站制作www.zhandodo.com
这篇文章太赞了我也要点赞!

11

郑重声明 Solemn Statement
本文来源:http://www.zhandodo.com 作者:武汉网站建设@武汉站多多 网络营销策划,本文由武汉站多多版权所有,未经批准转载必究。

武汉站多多 - 武汉网站建设终极解决方案

或许,我们能为您做的还很多...

400-8084-027 / 027-87317566