前端开发不得不知道的十大ES6新特性
转自:http://www.oschina.net/news/71566/es6-developers-will-have-to-know 谢谢大牛
ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。
本文主要针对ES6做一个简要介绍。 主要译自:《Top 10 ES6 Features Every Busy JavaScript Developer Must Know》 ( 传送门)。也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言 JavaScript最新一代的十大特性。
以下是ES6排名前十的最佳特性列表(排名不分先后):
-
Default Parameters(默认参数) in ES6
-
Template Literals (模板文本)in ES6
-
Multi-line Strings (多行字符串)in ES6
-
Destructuring Assignment (解构赋值)in ES6
-
Enhanced Object Literals (增强的对象文本)in ES6
-
Arrow Functions (箭头函数)in ES6
-
Promises in ES6
-
Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
-
Classes(类) in ES6
-
Modules(模块) in ES6
声明:这些列表仅是个人主观意见。它绝不是为了削弱ES6其它功能,这里只列出了10条比较常用的特性。
首先回顾一下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出现。
历史回顾就先到此,现让我们进入正题。
1.Default Parameters(默认参数) in ES6
还记得我们以前不得不通过下面方式来定义默认参数:
?1 2 3 4 5 6 |
var link = function (height, color, url) {
var height = height || 50;
var color = color || "red" ;
var url = url || "http://azat.co" ;
...
}
|
一切工作都是正常的,直到参数值是0后,就有问题了,因为在JavaScript中,0表示fasly,它是默认被hard-coded的值,而不 能变成参数本身的值。当然,如果你非要用0作为值,我们可以忽略这一缺陷并且使用逻辑OR就行了!但在ES6,我们可以直接把默认值放在函数申明里:
?1 2 3 |
var link = function (height = 50, color = "red" , url = "http://azat.co" ) {
...
}
|
顺便说一句,这个语法类似于Ruby!
2.Template Literals(模板对象) in ES6
在其它语言中,使用模板和插入值是在字符串里面输出变量的一种方式。因此,在ES5,我们可以这样组合一个字符串:
?1 2 |
var name = "Your name is " + first + " " + last + "." ;
var url = "http://localhost:3000/api/messages/" + id;
|
幸运的是,在ES6中,我们可以使用新的语法$ {NAME},并把它放在反引号里:
?1 2 |
var name = `Your name is ${first} ${last}. `;
var url = `http: //localhost:3000/api/messages/${id}`;
|
3.Multi-line Strings (多行字符串)in ES6
ES6的多行字符串是一个非常实用的功能。在ES5中,我们不得不使用以下方法来表示多行字符串:
?1 2 3 4 5 6 7 |
var roadPoem = "Then took the other, as just as fair,nt"
+ "And having perhaps the better claimnt"
+ "Because it was grassy and wanted wear,nt"
+ "Though as for that the passing therent"
+ "Had worn them really about the same,nt" ;
var
|