Node.jsES6的十要命特色以及体会

—恢复内容开始—

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的插件。

Node.js 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.jsNode.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,所以,提前举行了预习,希望能帮助及你们。

 

—恢复内容了—