一文看懂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

1.Default Parameters（默认参数）

ES5：

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') {  
  ...  
}

好处 节省了代码量。

2.Template Literals（模板对象）

在字符串里面输出变量

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://loalhost:3000/api/messages/${id}';

好处：这里的$ {NAME}直接当做字符串用，无需写加号

3.Multi-line Strings （多行字符串）

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 theren 
    Had worn them really about the same,`;  
var fourAgreements = `You have the right to be you.n  
    You can only be you when you do your best.`;

好处：直接一个反引号，将所有的字符串放进去即可，中介随意换行，好清爽！

4.Destructuring Assignment （解构赋值）

下边例子中，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：

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 （增强的对象字面量）

使用对象文本可以做许多让人意想不到的事情！通过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)  
// Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。
var accountServiceES5ObjectCreate = {  
  getAccounts: getAccounts,  
  toString: function() {  
    return JSON.stringify(this.valueOf());  
  },  
  getUrl: function() {return "http://" + this.url + ':' + this.port},  
  valueOf_1_2_3: getAccounts()  
}

ES6的对象文本中：既可以直接分配getAccounts: getAccounts,也可以只需用一个getAccounts

var serviceBase = {port: 3000, url: 'azat.co'},
getAccount = function(){return [1,2,3]};
var accountService = {
    __proto__: serviceBase, //通过proto设置属性
    getAccount, // 既可以直接分配getAccounts: getAccounts,也可以只需用一个getAccounts
    toString() { //这里将json形式改为函数形式 
        return JSON.stringify(super.valueOf()); 
        //调用super防范
    },  
    getUrl() {return "http://" + this.url + ':' + this.port},  
    [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()  //使用动态key值(valueOf_1_2_3)此处将getAccounts()方法得到的数组[1,2,3]转化为字符串1_2_3
};
console.log(accountService);

好处：相当于直接将结果写进去，而不再必须 key：value

将toString: function(){}这种json形式转变为 toString() {}这样的函数(类)的形式
既可以直接分配getAccounts: getAccounts这样的json形式，也可以只需用一个getAccounts表达相同的意思

6.Arrow Functions in（箭头函数）

这些丰富的箭头是令人惊讶的因为它们将使许多操作变成现实，比如，
以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

ES5:

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

ES6: 就不需要用 _this = this：

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

再比如：

ES5:

var logUpperCase = function() {  
  var _this = this;   //this = Object {string: "ES6 ROCKS"}
  console.log('this指的是',this); //Object {string: "ES6 ROCKS"}
  console.log('_this指的是',_this);//Object {string: "ES6 ROCKS"}
  this.string = this.string.toUpperCase();  
  console.log(_this.string); //ES6 ROCKS  
  console.log(this.string);  //ES6 ROCKS
  return function () {  
    return console.log(_this.string); //ES6 ROCKS
    return console.log(_this.string); //如果return _this.string，将返回 undefined，因为

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

ES6：我们并不需要用_this浪费时间,现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this

var logUpperCase = function() {  
  this.string = this.string.toUpperCase();//this还是原来的this  
  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

好处：

并不需要用_this浪费时间，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。
=> 可以代替function关键字，当在一行用了箭头函数，可以省去{}，还可以省去return，它会暗地里返回的。

7.Promises

ES5：

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

ES6: 我们可以用promise重写

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

如果我们有更多的嵌套逻辑在setTimeout()回调函数中，好处会明显一点：
ES5：

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

ES6: 我们可以用promise重写

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

8 Block-Scoped(块作用域和构造let和const）

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

ES6: 用let限制块级作用域

function calculateTotalAmount(vip){
    var amouont  = 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。

谈到const，就更加容易了；它就是一个不变量，也是块级作用域就像let一样。

好处 ：我们用let限制块级作用域。而var是限制函数作用域。

9. Classes （类）

ES6没有用函数,而是使用原型实现类。我们创建一个类baseModel ，并且在这个类里定义了一个constructor 和一个 getName()方法：

class baseModel {  
    constructor(options, data) {// class constructor， 注意我们对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}`);  
    } 
    getUrl() { // class method  
         console.log(`Url: ${this.url}`);  
    }
}

AccountModel 从类baseModel 中继承而来:

class AccountModel extends baseModel {  
    constructor(options, data) { 
    super({private: true}, ['32', '5242']); 
    this.url +='/accounts/';  
    }
    get accountsData() {
        return this.data;  
    }  
} 
// 调用
let accounts = new AccountModel(5);  
accounts.getName();  // Class name:  Base
console.log('Data is %s', accounts.accountsData); 
// Data is 32,5242 

//子类必须在constructor方法中调用super方法，否则新建实例时会报错。
//这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。
//如果不调用super方法，子类就得不到this对象。

【注意】：

此处的继承中，子类必须在constructor方法中调用super方法，否则新建实例时会报错。
此处的super方法继承了父类的所有方法，包括不在父类的constructor中的其他方法，当然可以改写父类方法，比如上述例子，继承了getName(),getUrl()方法，以及constructor（）中的this.name等属性，同时改写了this.url，增加了accountsData，且新增的方法前边要加上get。
子类调用super方法可以传入参数，对应constructor()函数的形参。

10. Modules （模块）

ES5导出：

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

ES6导出：

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

ES5导入：

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

ES6导入：

我们需用import {name} from ‘my-module’语法

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

或者ES6整体导入：

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

这里还有许多ES6的其它特性你可能会使用到，排名不分先后：

全新的Math, Number, String, Array 和 Object 方法
二进制和八进制数据类型
默认参数不定参数扩展运算符
Symbols符号
tail调用
Generators (生成器)
New data structures like Map and Set(新的数据构造对像MAP和set)

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,816评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,729评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,300评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,780评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,890评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,084评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,151评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,912评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,355评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,666评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,809评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,504评论 4赞 334
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,150评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,882评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,121评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,628评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,724评论 2赞 351

一文看懂ES6十大特性

1.Default Parameters（默认参数）

2.Template Literals（模板对象）

3.Multi-line Strings （多行字符串）

4.Destructuring Assignment （解构赋值）

5.Enhanced Object Literals （增强的对象字面量）

6.Arrow Functions in（箭头函数）

7.Promises

8 Block-Scoped(块作用域和构造let和const）

9. Classes （类）

10. Modules （模块）

推荐阅读更多精彩内容