ECMAScriptES6的十杀特征和认知

—恢复内容开始—

ES6(ECMAScript2015)的面世,无疑给前端开发人员拉动了新的惊喜,它蕴含了有的格外过硬的新特性,可以更有利于的落实无数苛的操作,提高开发人员的频率。
正文主要对ES6举行一个简便介绍。
也许你还不明白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。

这里只排有了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表示false,它是默认为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.`;

[ 这里的相反引号是(shift + ~)
]

 

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

  解构可能是一个比麻烦控制的定义。先打一个粗略的赋值讲起,其中house
和 mouse是key,同时house 和mouse也是一个变量,在ES5蒙是这样:

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

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

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

  在ES6,我们可下这些讲话代替上面的ES5代码:

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

  这个同样为适用于数组,非常赞赏之用法:

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

  我们可能得一些日子来习惯解构赋值语法的使用,但是她确实会叫咱们带众多出乎意料的取。

5.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
并无是完全一致的,因为一个靶(accountServiceES5)在proto对象吃以发生下这些性:

 

为了便于举例,我们以考虑她的相似处。所以当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)

  ES6对准象文本是一个大要命的向上对原本子的对象文本来说。

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

眼看是我迫不及待想张嘴的一个特性,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蒙:

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

7. Promises in ES6

Promises 是一个发争论之话题。因此发生诸多聊微不同的promise
实现语法。Q,bluebird,deferred.js,vow, avow, jquery
一些可列出名字的。也有人说咱无待promises,仅仅用异步,生成器,回调等便足够了。但令人高兴的是,在ES6丁产生正统的Promise实现。
脚是一个简单的所以setTimeout()实现之异步延迟加载函数:

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.

8.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使这个语言转换复杂了。没有她来说,我们仅需要考虑同栽艺术,现在时有发生不少种植现象需要考虑。

 

9. Classes (类)in ES6

苟您嗜面向对象编程(OOP),那么你拿爱是特性。以后写一个像样以及延续将转移得和当facebook上写一个品那么容易。
看似的始建和使用真是一码使人头疼的作业在过去底ES5中,因为没有一个重中之重字class
(它深受封存,但是什么为不克召开)。在斯之上,大量的继承模型像pseudo
classical,classical, functional 更加长了凌乱,JavaScript
之间的宗教战争才会越火上浇油。
就此ES5描写一个近似,有不行多种办法,这里就先不说了。现在虽来探视哪些用ES6状一个类似吧。ES6没有用函数,
而是使用原型实现类似。我们创建一个类baseModel
,并且以这类里定义了一个constructor 和一个 getName()方法:

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

  

10. Modules (模块)in ES6

显著,在ES6因为前JavaScript并无支持地方的模块。人们纪念闹了AMD,RequireJS,CommonJS以及任何解决方式。现在ES6丁可就此模块import
和export 操作了。
以ES5面临,你可以
<script>中一直写得运行的代码(简称IIFE),或者有些库像AMD。然而以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。
怎样使ES6 (Babel)
ES6已经敲定,但连无是具的浏览器还完全支持,详见:http://kangax.github.io/compat-table/es6/。要以ES6,需要一个编译器例如:babel。你可将她当作一个独的工具使用,也堪管其在构建中。grunt,gulp和webpack中都发生足支持babel的插件。

ECMAScript 1

即时是一个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'));
})

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)

 

 

文章转载来源于于简书 —

近期只要深深了解ES6,所以,提前举行了预习,希望会辅助到你们。

 

—恢复内容了—