前端開發不得不知的ES6十大新特性

es6排名前十的最佳特性列表

1. 默認參數 in es6
2. 模板文本 in es6
3. 多行字符串 in es6
4. 解構賦值 in es6
5. 加強的對象文本 in es6
6. 箭頭函數 in es6
7. Promise in es6
8. 塊做用域構造Let and Const
9. Classes 類 in es6
10. Modules 模塊 in es6

1.Default Parameters（默認參數） in ES6

還記得咱們之前(ES5)不得不經過下面方式來定義默認參數：

var link = function (height, color, url) {
  var height = height || 50;
  var color = color || 'red';
  var url = url || 'http://azat.co';
    ...
}
複製代碼

一切工做都是正常的，直到參數值是0後，就有問題了，由於在JavaScript中，0表示false 但在ES6，咱們能夠直接把默認值放在函數申明裏：

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

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.`;
複製代碼

4.Destructuring Assignment （解構賦值）in ES6

解構多是一個比較難以掌握的概念。先從一個簡單的賦值講起，其中house 和 mouse是key，同時house 和mouse也是一個變量，在ES5中是這樣：

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

在ES6，咱們能夠使用這些語句代替上面的ES5代碼：

// we'll get house and mouse variables var { house, mouse } = $('body').data(); 複製代碼

這個一樣也適用於數組，很是讚的用法：

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

5. 加強的對象字面量

對象字面量已獲得了加強。如今咱們能夠更容易地：

• 定義具備相同名稱的變量賦值字段
• 定義函數
• 定義動態屬性

const color = 'red'
const point = {
  x: 5,
  y: 10,
  color,
  toString() {
    return 'X=' + this.x + ', Y=' + this.y + ', color=' + this.color
  },
  [ 'prop_' + 42 ]: 42
}

console.log('The point is ' + point)
console.log('The dynamic property is ' + point.prop_42)
The point is X=5, Y=10, color=red 
The dynamic property is 42 
複製代碼

6.Arrow Functions in（箭頭函數） ES6

例如，下面的代碼用ES5就不是很優雅：

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

在ES6中就不須要用 _this = this：

$('.btn').click((event) => {
  this.sendData();
});
複製代碼

7. Promises in ES6

下面是一個簡單的用setTimeout()實現的異步延遲加載函數:

setTimeout(function() {
  console.log('Yay!');
}, 1000);
複製代碼

在ES6中，咱們能夠用promise重寫:

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000);
}).then(function() {
  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!')
  });
複製代碼

8.（塊做用域和構造let和const）

const用於定義常量。 let用於定義變量。可是JavaScript中不是已經有變量了嗎？ 是的，這很正確，但用var聲明的變量具備函數做用域，並會被提高到頂部。 這意味着在聲明以前就能夠使用這個變量。 let變量和常量具備塊做用域（用{}包圍），在聲明以前不能被使用。

9. Classes （類）in ES6

用ES5寫一個類，有不少種方法，這裏就先不說了。如今就來看看如何用ES6寫一個類吧。ES6沒有用函數, 而是使用原型實現類。咱們建立一個類baseModel ，而且在這個類裏定義了一個constructor 和一個 getName()方法：

class baseModel {  
  constructor(options, data) { // class constructor
    this.name = 'Base';  
    this.url = 'http://azat.co/api';  
    this.data = data;  
    this.options = options;  
   }  

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

10. Modules （模塊）in ES6

在ES6 Module出現以前，模塊化一直是前端開發者討論的重點，面對日益增加的需求和代碼，須要一種方案來將臃腫的代碼拆分紅一個個小模塊，從而推出了AMD,CMD和CommonJs這3種模塊化方案，前者用在瀏覽器端，後面2種用在服務端，直到ES6 Module出現 ES6 Module使用import關鍵字導入模塊，export關鍵字導出模塊，它還有如下特色：

• ES6 Module是靜態的，也就是說它是在編譯階段運行、編譯階段就能肯定模塊的依賴關係，以及輸入和輸出的變量
• ES6 Module支持使用export {<變量>}導出具名的接口，或者export default導出匿名的接口