>

ES6几大特点,令你的代码更神奇

- 编辑:乐百家599手机首页 -

ES6几大特点,令你的代码更神奇

var link = function(height = 50, color = 'red', url = '') { ...}

ES6排名前十的特等风味列表

9. Modules (模块)in ES6

简单的说,在ES6早先JavaScript并不扶植本地的模块。大家想出了AMD,RequireJS,CommonJS以致任何消除格局。现在ES6中能够用模块import 和export 操作了。

在ES5中,你能够在 <script>中一贯写能够运作的代码(简单的称呼IIFE),或然有个别库像英特尔。可是在ES6中,你能够用export导入你的类。上面譬如,在ES5中,module.js有port变量和getAccounts 方法:

module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

在ES5中,main.js要求信赖require(‘module’卡塔尔 导入module.js:

var service = require('module.js');
console.log(service.port); // 3000

但在ES6中,大家将用export and import。举个例子,这是大家用ES6 写的module.js文件库:

export var port = 3000;
export function getAccounts(url) {
  ...
}

假定用ES6来导入到文件main.js中,我们需用import {name} from ‘my-module’语法,比如:

import {port, getAccounts} from 'module';
console.log(port); // 3000

依然大家得以在main.js中把一切模块导入, 并命名称为 service:

import * as service from 'module';
console.log(service.port); // 3000

从自己个人角度来讲,小编以为ES6模块是令人纳闷的。但足以无庸置疑的事,它们使语言更灵活了。

并不是装有的浏览器都支持ES6模块,所以你需求选用一些像jspm去支撑ES6模块。

越多的音讯和例子关于ES6模块,请看 this text。不管如何,请写模块化的JavaScript。

以及在node.js中用ES5是这样:

ES6入门 

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}`;
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];var messages = ids.map((value, index, list) = `ID of ${index} element is ${value} `); // implicit return
  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

    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作为值,大家得以忽视这一重疾何况使用逻辑OTucson就能够了!但在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 fourAgreements = 'You have the right to be you.n
        You can only be you when you do your best.';

    而是在ES6中,仅仅用反引号就可以消释了:

    ?

    1
    2
    3
    4
    5
    6
    7
    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.`;

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

    解构或者是二个比较麻烦驾驭的定义。先从一个简短的赋值讲起,当中house 和 mouse是key,同时house 和mouse也是贰个变量,在ES5中是那样:

    ?

    1
    2
    3
    var data = $('body').data(), // data has properties house and mouse
       house = data.house,
       mouse = data.mouse;

    以及在node.js中用ES5是这样:

    ?

    1
    2
    3
    4
    var jsonMiddleware = require('body-parser').jsonMiddleware ;
    var body = req.body, // body has username and password
       username = body.username,
       password = body.password;

    在ES6,大家能够运用那些讲话代替下面的ES5代码:

    ?

    1
    2
    3
    var { house, mouse} = $('body').data(); // we'll get house and mouse variables
    var {jsonMiddleware} = require('body-parser');
    var {username, password} = req.body;

    本条同样也适用于数组,超赞的用法:

    ?

    1
    2
    var [col1, col2]  = $('.column'),
       [line1, line2, line3, , line5] = file.split('n');

    咱俩可能必要部分年华来习贯解构赋值语法的施用,然而它确实能给我们带给非常多想不到的拿到。

    5.Enhanced Object Literals (巩固的靶子字面量)in ES6

    行使对象文本能够做过多令人始料不如的事情!通过ES6,我们得以把ES5中的JSON变得尤为相似于一个类。

    下边是叁个特出ES5对象文本,里面有大器晚成部分艺术和属性:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var serviceBase = {port: 3000, url: 'azat.co'},
        getAccounts = function(){return [1,2,3]};
    var accountServiceES5 = {
      port: serviceBase.port,
      url: serviceBase.url,
      getAccounts: getAccounts,
       toString: function() {
          return JSON.stringify(this.valueOf());
      },
      getUrl: function() {return "http://"   this.url   ':'   this.port},
      valueOf_1_2_3: getAccounts()
    }

    只要我们想让它更有趣,大家得以用Object.create从serviceBase世襲原型的措施:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var accountServiceES5ObjectCreate = Object.create(serviceBase)
    var accountServiceES5ObjectCreate = {
      getAccounts: getAccounts,
      toString: function() {
        return JSON.stringify(this.valueOf());
      },
      getUrl: function() {return "http://"   this.url   ':'   this.port},
      valueOf_1_2_3: getAccounts()
    }

    大家知道,accountServiceES5ObjectCreate 和accountServiceES5 并非完全蓬蓬勃勃致的,因为三个对象(accountServiceES5卡塔尔在__proto__指标准将有下边那么些属性:

    图片 1

    为了方便比如,大家将思考它们的貌似处。所以在ES6的靶子文本中,不仅可以够从来分配getAccounts: getAccounts,也能够只需用二个getAccounts,其余,我们在这里间经过__proto__(并非经过’proto’)设置属性,如下所示:

    ?

    1
    2
    3
    4
    5
    var serviceBase = {port: 3000, url: 'azat.co'},
    getAccounts = function(){return [1,2,3]};
    var accountService = {
        __proto__: serviceBase,
        getAccounts,

    除此以外,我们能够调用super防止,以致利用动态key值(valueOf_1_2_3):

    ?

    1
    2
    3
    4
    5
    6
    7
        toString() {
         return JSON.stringify((super.valueOf()));
        },
        getUrl() {return "http://"   this.url   ':'   this.port},
        'valueOf_'   getAccounts().join('_') ]: getAccounts()
    };
    console.log(accountService)

    图片 2

    ES6对象文本是三个很大的提升对于旧版的目的文本来讲。

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

    那是自己焦急想讲的三个特色,CoffeeScript 正是因为它丰裕的箭头函数让众多开辟者爱怜。在ES6中,也会有了丰富的箭头函数。那些丰硕的箭头是令人诧异的因为它们将使众多操作形成现实性,比方,

    原先作者们应用闭包,this总是预期之内地发出更改,而箭头函数的喜人的地方在于,今后您的this能够依照你的料想使用了,身处箭头函数里面,this依旧原先的this。

    有了箭头函数在ES6中, 我们就不用用that = this或 self = this 或 _this = this 或.bind(this卡塔尔。比如,下边包车型客车代码用ES5就不是很文雅:

    ?

    1
    2
    3
    4
    var _this = this;
    $('.btn').click(function(event){
      _this.sendData();
    })

    在ES6中就无需用 _this = this:

    ?

    1
    2
    3
    $('.btn').click((event) =>{
      this.sendData();
    })

    噩运的是,ES6委员会决定,早先的function的传递格局也是三个很好的方案,所以它们照旧保留了原先的效用。

    上面那是二个其余的事例,大家透过call传递文本给logUpperCase(卡塔尔(قطر‎函数在ES5中:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var logUpperCase = function() {
      var _this = this;
      
      this.string = this.string.toUpperCase();
      return function () {
        return console.log(_this.string);
      }
    }
      
    logUpperCase.call({ string: 'ES6 rocks' })();

    而在ES6,大家并没有必要用_this浪费时间:

    ?

    1
    2
    3
    4
    5
    var logUpperCase = function() {
      this.string = this.string.toUpperCase();
      return () => console.log(this.string);
    }
    logUpperCase.call({ string: 'ES6 rocks' })();

    请小心,只要你愿意,在ES6中=>能够勾兑和相配老的函数一同利用。当在大器晚成行代码中用了箭头函数,它就改为了二个表明式。它将暗地里再次回到单个语句的结果。假若你抢先了风度翩翩行,将索要通晓利用return。

    那是用ES5代码成立叁个音信数组:

    ?

    1
    2
    3
    4
    var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
    var messages = ids.map(function (value) {
      return "ID is "   value; // explicit return
    });

    用ES6是这样:

    ?

    1
    2
    var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
    var messages = ids.map(value => `ID is ${value}`); // implicit return

    请细心,这里用了字符串模板。

    在箭头函数中,对于单个参数,括号(卡塔尔国是可选的,但当您超过贰个参数的时候你就要求他们。

    在ES5代码有显明的回到功效:

    ?

    1
    2
    3
    4
    var ids = ['5632953c4e345e145fdf2df8''563295464e345e145fdf2df9'];
    var messages = ids.map(function (value, index, list) {
      return 'ID of '   index   ' element is '   value   ' '// explicit return
    });

    在ES6中有更加的严俊的本子,参数要求被含有在括号里同一时间它是隐式的回来:

    ?

    1
    2
    var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
    var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return

    7. Promises in ES6

    Promises 是贰个有争辨的话题。由此有为数不菲略略分歧的promise 完毕语法。Q,bluebird,deferred.js,vow, avow, jquery 一些足以列有名字的。也是有些许人会说咱俩无需promises,仅仅使用异步,生成器,回调等就够了。但令人欢腾的是,在ES6中有正统的Promise达成。

    下边是二个简短的用setTimeout(卡塔尔完毕的异步延迟加载函数:

    ?

    1
    2
    3
    setTimeout(function(){
      console.log('Yay!');
    }, 1000);

    在ES6中,大家得以用promise重写:

    ?

    1
    2
    3
    4
    5
    var wait1000 =  new Promise(function(resolve, reject) {
      setTimeout(resolve, 1000);
    }).then(function() {
      console.log('Yay!');
    });

    只怕用ES6的箭头函数:

    ?

    1
    2
    3
    4
    5
    var wait1000 =  new Promise((resolve, reject)=> {
      setTimeout(resolve, 1000);
    }).then(()=> {
      console.log('Yay!');
    });

    到近来截止,代码的行数从三行增到五行,并不曾其它鲜明的补益。确实,假设大家有越多的嵌套逻辑在setTimeout(State of Qatar回调函数中,大家将发现越来越多好处:

    ?

    1
    2
    3
    4
    5
    6
    setTimeout(function(){
      console.log('Yay!');
      setTimeout(function(){
        console.log('Wheeyee!');
      }, 1000)
    }, 1000);

    在ES6中大家得以用promises重写:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)});
    wait1000()
        .then(function() {
            console.log('Yay!')
            return wait1000()
        })
        .then(function() {
            console.log('Wheeyee!')
        });

    要么不确信Promises 比普通回调更加好?其实自身也不确信,笔者以为后生可畏旦您有回调的主张,那么就从不供给额外扩大promises的纷纷。

    固然,ES6 有令人崇拜的Promises 。Promises 是贰个有利有弊的回调不过真的是三个好的天性,更加多详细的新闻有关promise:Introduction to ES6 Promises.

    8.Block-Scoped Constructs Let and Const(块作用域和布局let和const)

    在ES6代码中,你或者早已观望那熟稔的身影let。在ES6里let并非三个花俏的特征,它是更复杂的。Let是生龙活虎种新的变量申明情势,它同意你把变量效用域调控在块级里面。我们用大括号定义代码块,在ES5中,块级功效域起不了任何效率:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function calculateTotalAmount (vip) {
      var amount = 0;
      if (vip) {
        var amount = 1;
      }
      // more crazy blocks!
        var amount = 100;
        {
          var amount = 1000;
        }
      }  
      return amount;
    }
    console.log(calculateTotalAmount(true));

    结果将回来1000,那真是三个bug。在ES6中,大家用let限定块级效能域。而var是限量函数作用域。

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function calculateTotalAmount (vip) {
      var amount = 0; // probably should also be let, but you can mix var and let
      if (vip) {
        let amount = 1; // first amount is still 0
      
      // more crazy blocks!
        let amount = 100; // first amount is still 0
        {
          let amount = 1000; // first amount is still 0
        }
      }  
      return amount;
    }
      
    console.log(calculateTotalAmount(true));

    那个结果将会是0,因为块效能域中有了let。就算(amount=1).那么这几个表明式将赶回1。聊到const,就进一层便于了;它正是一个不改变量,也是块级成效域就像let相通。上边是二个示范,这里有一批常量,它们互不影响,因为它们归属分化的块级功效域:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function calculateTotalAmount (vip) {
      const amount = 0;  
      if (vip) {
        const amount = 1;
      
      // more crazy blocks!
        const amount = 100 ;
        {
          const amount = 1000;
        }
      }  
      return amount;
    }
    console.log(calculateTotalAmount(true));

    从笔者个人看来,let 和const使这一个语言变复杂了。未有它们来讲,大家只需思量风姿浪漫种办法,现在有无数种情景需求构思。

    9. Classes (类)in ES6

    若果你赏识面向对象编制程序(OOP),那么您将挚爱那么些特点。以往写一个类和三番四回将变得跟在facebook上写多少个评价那么轻易。

    类的创始和利用真是意气风发件令人胸口痛的作业在过去的ES5中,因为还没有三个首要字class (它被保留,可是如何也不能够做)。在那之上,大批量的后续模型像pseudo classical, classical, functional 尤其充实了糊涂,JavaScript 之间的宗派大战只会尤其火上浇油。

    用ES5写贰个类,有很各类艺术,这里就先不说了。今后就来探问哪些用ES6写多个类吧。ES6没有用函数, 而是使用原型完毕类。大家创设贰个类baseModel ,并且在这里个类里定义了二个constructor 和一个 getName(卡塔尔国方法:

    ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    class baseModel {
      constructor(options, data) { // class constructor,node.js 5.6暂时不支持options = {}, data = []这样传参
        this.name = 'Base';
        this.url = 'http://azat.co/api';
        this.data = data;
        this.options = options;
       }
      
        getName() { // class method
            console.log(`Class name: ${this.name}`);
        }
    }

    在乎大家对options 和data使用了私下认可参数值。别的方法名也无需加function关键字,而且冒号(:卡塔尔国也没有必要了。此外一个大的分歧正是你没有必要分配属性this。以往设置叁天性能的值,只需简单的在构造函数中分红。

    AccountModel 从类baseModel 中继续而来:

    ?

    1
    2
    class AccountModel extends baseModel {
        constructor(options, data) {

    为了调用父级构造函数,可以毫不费事的孳生super(卡塔尔(قطر‎用参数字传送递:

    ?

    1
    2
    3
    4
    super({privatetrue}, ['32113123123''524214691']); //call the parent method with super
           this.name = 'Account Model';
           this.url  ='/accounts/';
        }

    万意气风发你想做些越来越有趣的,你能够把 accountData 设置成四个性质:

    ?

    1
    2
    3
    4
    5
        get accountsData() { //calculated attribute getter
        // ... make XHR
            return this.data;
        }
    }

    那么,你什么调用他们啊?它是特别轻易的:

    ?

    1
    2
    3
    let accounts = new AccountModel(5);
    accounts.getName();
    console.log('Data is %s', accounts.accountsData);

    结果令人惊喜,输出是:

    Class name: Account Model

    Data is 32113123123,524214691

    10. Modules (模块)in ES6

    分明,在ES6早先JavaScript并不扶植本地的模块。大家想出了英特尔,RequireJS,CommonJS以至任何解决方法。今后ES6中能够用模块import 和export 操作了。

    在ES第55中学,你能够在<script>中一向写能够运作的代码(简单称谓IIFE),或然有个别库像英特尔。不过在ES6中,你可以用export导入你的类。上边举例,在ES5中,module.js有port变量和getAccounts 方法:

    ?

    1
    module.exports = {  port: 3000,  getAccounts: function() {    ...  }}

    在ES5中,main.js必要信赖require(‘module’卡塔尔(قطر‎ 导入module.js:

    ?

    1
    var service = require('module.js');console.log(service.port); // 3000

    但在ES6中,我们将用export and import。比如,那是我们用ES6 写的module.js文件库:

    ?

    1
    export var port = 3000;export function getAccounts(url) {  ...}

    若果用ES6来导入到文件main.js中,大家需用import {name} from ‘my-module’语法,举个例子:

    ?

    1
    import {port, getAccounts} from 'module';console.log(port); // 3000

    要么大家得以在main.js中把全体模块导入, 并命名叫 service:

    ?

    1
    import * as service from 'module';console.log(service.port); // 3000

    从自己个人角度来讲,笔者以为ES6模块是令人郁结的。但足以无可批驳的事,它们使语言越来越灵活了。

    并非颇有的浏览器都援救ES6模块,所以您须要选拔一些像jspm去援救ES6模块。

    更加多的消息和例子关于ES6模块,请看 this text不管怎么样,请写模块化的JavaScript。

    怎么样行使ES6 (Babel卡塔尔国

    ES6已经敲定,但并非有着的浏览器都完全扶植,详见:。要动用ES6,必要叁个编写翻译器比方:babel。你能够把它当做二个单身的工具使用,也得以把它坐落营造中。grunt,gulp和webpack中都有可以辅助babel的插件。

    图片 3

    那是三个gulp案列,安装gulp-babel插件:

    ?

    1
    $ npm install --save-dev gulp-babel

    在gulpfile.js中,定义一个职务build,归入src/app.js,並且编写翻译它步入创设文件中。

    ?

    1
    var gulp = require('gulp'),  babel = require('gulp-babel');gulp.task('build'function () {  return gulp.src('src/app.js')    .pipe(babel())    .pipe(gulp.dest('build'));})

    Node.js and ES6

    在nodejs中,你能够用创设筑工程具可能独立的Babel模块 babel-core 来编写翻译你的Node.js文件。安装如下:

    ?

    1
    $ npm install --save-dev babel-core

    下一场在node.js中,你能够调用那个函数:

    ?

    1
    require("babel-core").transform(ES5Code, options);

    ES6总结

    此处还会有不菲ES6的此外性情你大概会利用到,排行不分前后相继:

    1、全新的Math, Number, String, Array 和 Object 方法

    2、二进制和八进制数据类型

    3、默许参数不定参数增加运算符

    4、Symbols符号

    5、tail调用

    6、Generators (生成器)

    7、New data structures like Map and Set(新的数额布局对像MAP和setState of Qatar

    参照他事他说加以考察文献:

    1. ES6 Cheatsheet (FREE PDF)

    2. http://webapplog.com/ES6/comment-page-1/

    3. Understanding ECMAScript 6 by Nicolas Zakas book

    4. http://ES6-features.org/#DateTimeFormatting

    5. IIFE:立即运行的函数表明式

6. Promises in ES6

Promises 是一个有对峙的话题。由此有为数不少略略不一致的promise 完成语法。Q,bluebird,deferred.js,vow, avow, jquery 一些得以列盛名字的。也可以有一些人说小编们不须要promises,仅仅使用异步,生成器,回调等就够了。但令人欢欣的是,在ES6中有标准的Promise完成。

上面是一个轻松易行的用setTimeout(State of Qatar实现的异步延迟加载函数:

setTimeout(function(){
  console.log('Yay!');
}, 1000);

在ES6中,大家得以用promise重写:

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000);
}).then(function() {
  console.log('Yay!');
});

也许用ES6的箭头函数:

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000);
}).then(()=> {
  console.log('Yay!');
});

到近来截至,代码的行数从三行增至五行,并不曾其余明显的收益。确实,借使我们有越多的嵌套逻辑在setTimeout()回调函数中,大家将发掘越来越多功利:

setTimeout(function(){
  console.log('Yay!');
  setTimeout(function(){
    console.log('Wheeyee!');
  }, 1000)
}, 1000);

在ES6中大家得以用promises重写:

var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)});
wait1000()
    .then(function() {
        console.log('Yay!')
        return wait1000()
    })
    .then(function() {
        console.log('Wheeyee!')
    });

是不确信Promises 比普通回调更加好?其实小编也不确信,作者以为后生可畏旦你有回调的主张,那么就一贯不必要额外扩大promises的复杂。

纵然,ES6 有令人崇拜的Promises 。Promises 是叁个有利有弊的回调但是真的是二个好的特征,更加的多详细的音信有关promise:Introduction to ES6 Promises.

3.Multi-line Strings in ES6ES6的多行字符串是叁个极其实用的效应。在ES5中,大家只可以动用以下方法来表示多行字符串:

Node.js and ES6

在nodejs中,你能够用构建工具恐怕独立的Babel模块 babel-core 来编写翻译你的Node.js文件。安装如下:

$ npm install --save-dev babel-core

下一场在node.js中,你能够调用这么些函数:

require("babel-core").transform(ES5Code, options);

ES6总结

这里还会有多数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卡塔尔国

 

顺便说一句,那些语法相通于Ruby!2.Template Literals in ES6在其余语言中,使用模板和插入值是在字符串里面输出变量的意气风发种艺术。由此,在ES5,大家得以这么组合二个字符串:

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';
    ...
}

但在ES6,大家得以一向把暗中同意值放在函数评释里:

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}
function calculateTotalAmount (vip) { var amount = 0; // probably should also be let, but you can mix var and let if (vip) { let amount = 1; // first amount is still 0 } { // more crazy blocks! let amount = 100; // first amount is still 0 { let amount = 1000; // first amount is still 0 } } return amount;} console.log(calculateTotalAmount(true));

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.`;

那么,你怎么着调用他们呢?它是非常轻易的:

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

有了箭头函数在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();
})

下边那是一个别的的例证,大家由此call传递文本给logUpperCase(State of Qatar 函数在ES5中:

var logUpperCase = function() {
  var _this = this;

  this.string = this.string.toUpperCase();
  return function () {
    return console.log(_this.string);
  }
}

logUpperCase.call({ string: 'ES6 rocks' })();

而在ES6,大家并无需用_this浪费时间:

var logUpperCase = function() {
  this.string = this.string.toUpperCase();
  return () => console.log(this.string);
}
logUpperCase.call({ string: 'ES6 rocks' })();

请介意,只要您愿意,在ES6中=>能够勾兑和相称老的函数一齐行使。当在生机勃勃行代码中用了箭头函数,它就改为了叁个表达式。它将暗地里再次来到单个语句的结果。假若您超越了风华正茂行,将要求鲜明使用return。

那是用ES5代码创立二个音讯数组:

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(function (value) {
  return "ID is "   value; // explicit return
});

用ES6是这样:

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(value => `ID is ${value}`); // implicit return

请介怀,这里用了字符串模板。

在箭头函数中,对于单个参数,括号(卡塔尔国是可选的,但当您超越叁个参数的时候你就必要他们。

在ES5代码有刚毅的归来作用:

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
var messages = ids.map(function (value, index, list) {
  return 'ID of '   index   ' element is '   value   ' '; // explicit return
});

在ES6中有越来越严厉的本子,参数须要被含有在括号里同一时间它是隐式的回到:

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return

若果用ES6来导入到文件main.js中,大家需用import {name} from ‘my-module’语法,比方:

7.Block-Scoped Constructs Let and Const(块成效域和组织let和const)

在ES6代码中,你也许早就看见那熟习的身影let。在ES6里let而不是二个花俏的表征,它是更头晕目眩的。Let是生龙活虎种新的变量表明情势,它同意你把变量功效域调节在块级里面。大家用大括号定义代码块,在ES5中,块级效率域起不了任何效果:

function calculateTotalAmount (vip) {
  var amount = 0;
  if (vip) {
    var amount = 1;
  }
  { // more crazy blocks!
    var amount = 100;
    {
      var amount = 1000;
    }
  }  
  return amount;
}
console.log(calculateTotalAmount(true));

结果将赶回1000,那真是三个bug。在ES6中,我们用let限定块级功效域。而var是限量函数功用域。

function calculateTotalAmount (vip) {
  var amount = 0; // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1; // first amount is still 0
  } 
  { // more crazy blocks!
    let amount = 100; // first amount is still 0
    {
      let amount = 1000; // first amount is still 0
    }
  }  
  return amount;
}

console.log(calculateTotalAmount(true));

其大器晚成结果将会是0,因为块功能域中有了let。若是(amount=1).那么这几个表达式将回到1。谈起const,就进一层便于了;它就是多个不改变量,也是块级功效域就疑似let同样。上面是叁个演示,这里有一群常量,它们互不影响,因为它们归于不一致的块级功用域:

function calculateTotalAmount (vip) {
  const amount = 0;  
  if (vip) {
    const amount = 1;
  } 
  { // more crazy blocks!
    const amount = 100 ;
    {
      const amount = 1000;
    }
  }  
  return amount;
}
console.log(calculateTotalAmount(true));

从本人个人看来,let 和const使那一个语言变复杂了。未有它们来讲,大家只需思忖生龙活虎种艺术,现在有诸七种情景要求思忖。

var wait1000 = new Promise(function(resolve, reject) { setTimeout(resolve, 1000);}).then(function() { console.log('Yay!');});

怎样利用ES6  (Babel卡塔尔

ES6已经敲定,但并非颇有的浏览器都完全扶植,详见:。要动用ES6,必要八个编写翻译器比如:babel。你能够把它充当三个单独的工具使用,也得以把它坐落营造中。grunt,gulp和webpack中都有能够扶持babel的插件。

图片 4

 

那是二个gulp案列,安装gulp-babel插件:

$ npm install --save-dev gulp-babel

在gulpfile.js中,定义一个职责build,归入src/app.js,並且编写翻译它步入营造文件中。

var gulp = require('gulp'),
  babel = require('gulp-babel');
gulp.task('build', function () {
  return gulp.src('src/app.js')
    .pipe(babel())
    .pipe(gulp.dest('build'));
})

从自己个人看来,let 和const使那几个语言变复杂了。未有它们来讲,我们只需构思意气风发种方法,今后有为数不少种情景必要思量。9. Classes in ES6例如你欢欣面向对象编程,那么您将挚爱那一个本性。未来写一个类和持续将变得跟在facebook上写叁个评价那么轻巧。类的创设和利用真是大器晚成件令人发烧的作业在过去的ES第55中学,因为还未有叁个重视字class 。在这里之上,大量的存在延续模型像pseudo classical, classical, functional 特别充实了糊涂,JavaScript 之间的宗教战争只会越加助纣为虐。用ES5写四个类,有很三种方法,这里就先不说了。以后就来探望哪些用ES6写三个类吧。ES6未有用函数, 而是使用原型达成类。大家成立三个类baseModel ,何况在此个类里定义了叁个constructor 和三个 getName(卡塔尔国方法:

4.Enhanced Object Literals (增强的指标字面量)in ES6

行使对象文本能够做过多令人始料比不上的作业!通过ES6,大家得以把ES5中的JSON变得尤其左近于叁个类。

下边是多个优良ES5对象文本,里面有生龙活虎对措施和性能:

var serviceBase = {port: 3000, url: 'azat.co'},
    getAccounts = function(){return [1,2,3]};
var accountServiceES5 = {
  port: serviceBase.port,
  url: serviceBase.url,
  getAccounts: getAccounts,
   toString: function() {
      return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://"   this.url   ':'   this.port},
  valueOf_1_2_3: getAccounts()
}

举个例子大家想让它更有趣,我们得以用Object.create从serviceBase世袭原型的格局:

var accountServiceES5ObjectCreate = Object.create(serviceBase)
var accountServiceES5ObjectCreate = {
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://"   this.url   ':'   this.port},
  valueOf_1_2_3: getAccounts()
}

我们领略,accountServiceES5ObjectCreate 和accountServiceES5 并非完全意气风发致的,因为三个对象(accountServiceES5State of Qatar在__proto__指标中校有上面这一个属性:

图片 5

 

为了方便举个例子,大家将思谋它们的貌似处。所以在ES6的对象文本中,既可以够一贯分配getAccounts: getAccounts,也得以只需用叁个getAccounts,别的,大家在这里间透过__proto__(并非通过’proto’)设置属性,如下所示:

var serviceBase = {port: 3000, url: 'azat.co'},
getAccounts = function(){return [1,2,3]};
var accountService = {
    __proto__: serviceBase,
    getAccounts,

除此以外,大家能够调用super防卫,以至使用动态key值(valueOf_1_2_3):

toString() {
     return JSON.stringify((super.valueOf()));
    },
    getUrl() {return "http://"   this.url   ':'   this.port},
    [ 'valueOf_'   getAccounts().join('_') ]: getAccounts()
};
console.log(accountService)

图片 6

 

ES6对象文本是二个相当大的前行对于旧版的靶子文本来讲。 

var { house, mouse} = $('body').data(); // we'll get house and mouse variablesvar {jsonMiddleware} = require('body-parser');var {username, password} = req.body;

8. Classes (类)in ES6

假设你爱怜面向对象编制程序(OOP),那么您将挚爱那么些特点。今后写二个类和持续将变得跟在facebook上写一个信口胡言那么轻易。

类的创办和使用真是后生可畏件令人头痛的业务在过去的ES5中,因为未有多个重视字class (它被封存,可是什么也无法做)。在这里之上,多量的存在延续模型像pseudo classical, classical, functional 越发充实了混乱,JavaScript 之间的宗派战不问不闻只会越来越兴风作浪。

用ES5写叁个类,有很八种方法,这里就先不说了。以往就来看看哪些用ES6写叁个类吧。ES6未有用函数, 而是使用原型达成类。大家创立五个类baseModel ,况兼在此个类里定义了二个constructor 和三个 getName(State of Qatar方法:

class baseModel {
  constructor(options, data) { // class constructor,node.js 5.6暂时不支持options = {}, data = []这样传参
    this.name = 'Base';
    this.url = 'http://azat.co/api';
    this.data = data;
    this.options = options;
   }

    getName() { // class method
        console.log(`Class name: ${this.name}`);
    }
}

注意大家对options 和data使用了暗中同意参数值。别的方法名也无需加function关键字,并且冒号(:卡塔尔(قطر‎也不必要了。其余一个大的界别就是你无需分配属性this。今后设置一个性格的值,只需轻易的在结构函数中分红。

AccountModel 从类baseModel 中继续而来:

class AccountModel extends baseModel {
    constructor(options, data) {

为了调用父级布局函数,能够探囊取物的孳生super(卡塔尔用参数字传送递:

super({private: true}, ['32113123123', '524214691']); //call the parent method with super
       this.name = 'Account Model';
       this.url  ='/accounts/';
    }

假若你想做些更风趣的,你能够把 accountData 设置成二个性子:

get accountsData() { //calculated attribute getter
    // ... make XHR
        return this.data;
    }
}

那么,你什么调用他们呢?它是特别轻松的:

let accounts = new AccountModel(5);
accounts.getName();
console.log('Data is %s', accounts.accountsData);

结果令人愕然,输出是:

Class name: Account Model

Data is  32113123123,524214691

在ES6中,我们能够用promise重写:

抑或大家得以在main.js中把整个模块导入, 并命名叫 service:

var wait1000 = new Promise((resolve, reject)= { setTimeout(resolve, 1000);}).then(()= { console.log('Yay!');});
function calculateTotalAmount (vip) { var amount = 0; if (vip) { var amount = 1; } { // more crazy blocks! var amount = 100; { var amount = 1000; } } return amount;}console.log(calculateTotalAmount(true));

在ES6中大家得以用promises重写:

var wait1000 = ()= new Promise((resolve, reject)= {setTimeout(resolve, 1000)});wait1000() .then(function() { console.log('Yay!') return wait1000() }) .then(function() { console.log('Wheeyee!') });

倘若大家想让它更有趣,大家得以用Object.create从serviceBase世袭原型的方法:

$ npm install --save-dev babel-core
var name = 'Your name is '   first   ' '   last   '.';var url = ''   id;

除此以外,大家得以调用super防止,以致利用动态key值(valueOf_1_2_3):

潜心大家对options 和data使用了暗中认可参数值。其余方法名也无需加function关键字,而且冒号(:卡塔尔也不须求了。别的叁个大的差别正是您不要求分配属性this。以往安装五特品质的值,只需简单的在构造函数中分红。AccountModel 从类baseModel 中一连而来:

Node.js and ES6在nodejs中,你可以用创设筑工程具也许独立的Babel模块 babel-core 来编写翻译你的Node.js文件。安装如下:

抑或用ES6的箭头函数:

var logUpperCase = function() { this.string = this.string.toUpperCase(); return () = console.log(this.string);}logUpperCase.call({ string: 'ES6 rocks' })();

用ES6是这样:

图片 7

Node.js and ES6在nodejs中,你能够用塑造筑工程具可能独立的Babel模块 babel-core 来编写翻译你的Node.js文件。安装如下:

var jsonMiddleware = require('body-parser').jsonMiddleware ;var body = req.body, // body has username and password username = body.username, password = body.password;
$('.btn').click((event) ={ this.sendData();})
var name = `Your name is ${first} ${last}. `;var url = `${id}`;

本文由乐百家前段发布,转载请注明来源:ES6几大特点,令你的代码更神奇