牛骨文教育服务平台(让学习变的简单)
博文笔记

前端开发不得不知道的十大ES6新特性

创建时间:2016-09-14 投稿人: 浏览次数:12979

转自: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排名前十的最佳特性列表(排名不分先后):

  1. Default Parameters(默认参数) in ES6

  2. Template Literals (模板文本)in ES6

  3. Multi-line Strings (多行字符串)in ES6

  4. Destructuring Assignment (解构赋值)in ES6

  5. Enhanced Object Literals (增强的对象文本)in ES6

  6. Arrow Functions (箭头函数)in ES6

  7. Promises in ES6

  8. Block-Scoped Constructs Let and Const(块作用域构造Let and Const)

  9. Classes(类) in ES6

  10. 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 
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。