es6

作者: c盖世 | 来源:发表于2017-10-12 11:22 被阅读0次

    ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。

    本文主要针对ES6做一个简要介绍。 主要译自: http://webapplog.com/ES6/comment-page-1/。也许你还不知道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

    还记得我们以前不得不通过下面方式来定义默认参数:

    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,我们可以直接把默认值放在函数申明里:

    var link = function(height = 50, color = 'red', url = 'http://azat.co') {

      ...

    }顺便说一句,这个语法类似于Ruby!

    2.Template Literals(模板对象) in ES6

    在其它语言中,使用模板和插入值是在字符串里面输出变量的一种方式。因此,在ES5,我们可以这样组合一个字符串:

    var name = 'Your name is ' + first + ' ' + last + '.';

    var url = 'http://localhost:3000/api/messages/' + id;幸运的是,在ES6中,我们可以使用新的语法$ {NAME},并把它放在反引号里:

    var name = `Your name is ${first} ${last}. `;

    var url = `http://localhost:3000/api/messages/${id}`;

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

    ES6的多行字符串是一个非常实用的功能。在ES5中,我们不得不使用以下方法来表示多行字符串

    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 fourAgreements = 'You have the right to be you.n

        You can only be you when you do your best.';

    然而在ES6中,仅仅用反引号就可以解决了:

    var roadPoem = `Then took the other, as just as fair,

        And having perhaps the better claim

        Because it was grassy and wanted wear,

        Though as for that the passing there

        Had worn them really about the same,`;

    var fourAgreements = `You have the right to be you.

        You can only be you when you do your best.`;

    相关文章

      网友评论

          本文标题:es6

          本文链接:https://www.haomeiwen.com/subject/bzpnyxtx.html