时间:2021-05-28
ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。
本文主要针对ES6做一个简要介绍。
也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的十大特性。
以下是ES6排名前十的最佳特性列表(排名不分先后):
1.Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
2.Arrow Functions (箭头函数)in ES6
3.Default Parameters(默认参数) in ES6
4.Template Literals (模板文本)in ES6
5.Multi-line Strings (多行字符串)in ES6
6.Destructuring Assignment (解构赋值)in ES6
7.Enhanced Object Literals (增强的对象文本)in ES6
8.Promises in ES6
9.Classes(类) in ES6
10.Modules(模块) in ES6
首先回顾一下JavaScript的历史,不清楚历史的人,很难理解JavaScript为什么会这样发展。下面就是一个简单的JavaScript发展时间轴:
1、1995:JavaScript诞生,它的初始名叫LiveScript。
2、1997:ECMAScript标准确立。
3、1999:ES3出现,与此同时IE5风靡一时。
4、2000–2005: XMLHttpRequest又名AJAX, 在Outlook Web Access (2000)、Oddpost (2002),Gmail (2004)和Google Maps (2005)大受重用。
5、2009: ES5出现,(就是我们大多数人现在使用的)例如foreach,Object.keys,Object.create和JSON标准。
6、2015:ES6/ECMAScript2015出现。
历史回顾就先到此,现让我们进入正题。
在ES6代码中,你可能已经看到那熟悉的身影let。在ES6里let并不是一个花俏的特性,它是更复杂的。Let是一种新的变量声明方式,它允许你把变量作用域控制在块级里面。我们用大括号定义代码块,在ES5中,块级作用域起不了任何作用:
functioncalculateTotalAmount(vip){varamount=0;if(vip){varamount=1;}{//morecrazyblocks!varamount=100;{varamount=1000;}}returnamount;}console.log(calculateTotalAmount(true));结果将返回1000,这真是一个bug。在ES6中,我们用let限制块级作用域。而var是限制函数作用域。functioncalculateTotalAmount(vip){varamount=0;//probablyshouldalsobelet,butyoucanmixvarandletif(vip){letamount=1;//firstamountisstill0}{//morecrazyblocks!letamount=100;//firstamountisstill0{letamount=1000;//firstamountisstill0}}returnamount;}console.log(calculateTotalAmount(true));这个结果将会是0,因为块作用域中有了let。如果(amount=1).那么这个表达式将返回1。谈到const,就更加容易了;它就是一个常量,也是块级作用域就像let一样。下面是一个演示,这里有一堆常量,它们互不影响,因为它们属于不同的块级作用域:
functioncalculateTotalAmount(vip){constamount=0;if(vip){constamount=1;}{//morecrazyblocks!constamount=100;{constamount=1000;}}returnamount;}console.log(calculateTotalAmount(true));在传统的var中,一个变量可以多次重复声明,如果代码很长的话,出现变量重复声明的错误是很难排查出来的,而let和const都不可以重复声明,从我个人看来,let 和const在大型的代码排错中起着至关重要的作用。
这是我迫不及待想讲的一个特征,CoffeeScript 就是因为它丰富的箭头函数让很多开发者喜爱。在ES6中,也有了丰富的箭头函数。这些丰富的箭头是令人惊讶的因为它们将使许多操作变成现实,比如,
以前我们使用闭包,this总是预期之外地产生改变,而箭头函数的迷人之处在于,现在你的this可以按照你的预期使用了,身处箭头函数里面,this还是原来的this。
有了箭头函数在ES6中, 我们就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如,下面的代码用ES5就不是很优雅:
var_this=this;$('.btn').click(function(event){_this.sendData();})在ES6中就不需要用_this=this:$('.btn').click((event)=>{this.sendData();})不幸的是,ES6委员会决定,以前的function的传递方式也是一个很好的方案,所以它们仍然保留了以前的功能。
下面这是一个另外的例子,我们通过call传递文本给logUpperCase() 函数在ES5中:
varlogUpperCase=function(){var_this=this;this.string=this.string.toUpperCase();returnfunction(){returnconsole.log(_this.string);}}logUpperCase.call({string:'ES6rocks'})();而在ES6,我们并不需要用_this浪费时间:
varlogUpperCase=function(){this.string=this.string.toUpperCase();return()=>console.log(this.string);}logUpperCase.call({string:'ES6rocks'})();请注意,只要你愿意,在ES6中=>可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数,它就变成了一个表达式。它将暗地里返回单个语句的结果。如果你超过了一行,将需要明确使用return。
这是用ES5代码创建一个消息数组:
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];varmessages=ids.map(function(value){return"IDis"+value;//explicitreturn});用ES6是这样:
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];varmessages=ids.map(value=>`IDis${value}`);//implicitreturn请注意,这里用了字符串模板。
在箭头函数中,对于单个参数,括号()是可选的,但当你超过一个参数的时候你就需要他们。
在ES5代码有明确的返回功能:
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];varmessages=ids.map(function(value,index,list){return'IDof'+index+'elementis'+value+'';//explicitreturn});在ES6中有更加严谨的版本,参数需要被包含在括号里并且它是隐式的返回:
varids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];varmessages=ids.map((value,index,list)=>`IDof${index}elementis${value}`);//implicitreturn还记得我们以前不得不通过下面方式来定义默认参数:
varlink=function(height,color,url){varheight=height||50;varcolor=color||'red';varurl=url||'http://pat-table/es6/。要使用ES6,需要一个编译器例如:babel。你可以把它作为一个独立的工具使用,也可以把它放在构建中。grunt,gulp和webpack中都有可以支持babel的插件。这是一个gulp案列,安装gulp-babel插件:
$npminstall--save-devgulp-babel在gulpfile.js中,定义一个任务build,放入src/app.js,并且编译它进入构建文件中。
vargulp=require('gulp'),babel=require('gulp-babel');gulp.task('build',function(){returngulp.src('src/app.js').pipe(babel()).pipe(gulp.dest('build'));})在nodejs中,你可以用构建工具或者独立的Babel模块 babel-core 来编译你的Node.js文件。安装如下:
$npminstall--save-devbabel-core然后在node.js中,你可以调用这个函数:
require("babel-core").transform(ES5Code,options);这里还有许多ES6的其它特性你可能会使用到,排名不分先后:
1、全新的Math, Number, String, Array 和 Object 方法
2、二进制和八进制数据类型
3、默认参数不定参数扩展运算符
4、Symbols符号
5、tail调用
6、Generators (生成器)
7、New data structures like Map and Set(新的数据构造对像MAP和set)
以上就是ES6 十大特性简介的详细内容,更多关于ES6 特性的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
edge支持es6,Edge15可以支持96%的ES6新特性。Edge14可以支持93%的ES6新特性。 2015年4月30日,微软在旧金山举行的Build2
目前各大浏览器基本上都支持ES6的新特性,其中Chrome和Firefox浏览器对ES6新特性最友好,IE7~11基本不支持ES6。以下是各大浏览器支持情况及开
去年6月份,ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本
简介ES6,全称ECMAScript6.0,是JavaScript的下一个版本标准,2015.06发版。ES6主要是为了解决ES5的先天不足,比如JavaScr
本文实例讲述了ES6新特性之Symbol类型用法。分享给大家供大家参考,具体如下:Symbol类型1.为了避免属性名的冲突,ES6新增了Symbol类型。Sym