ES6經常使用語法整合

ES6也出來有一會時間了，他新增的語法糖也的確大大提升了開發者的效率，今天就總結一些本身用到最多的。

說到ES6確定是先介紹Babel了，據阮一峯老師介紹到，Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。這意味着，你能夠如今就用ES6編寫程序，而不用擔憂現有環境是否支持。

1、 Babel

Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。
該文件用來設置轉碼規則和插件，基本格式以下。

{
  "presets": [],
  "plugins": []
}

presets 字段設定轉碼規則，官方提供如下的規則集，你能夠根據須要安裝。

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

而後，將這些規則加入.babelrc

{
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

想更深刻了解Babel的話能夠去阮一峯老師的Babel 入門教程看更詳細的。

接下來就是咱們開發中用到最多的ES6語法。

2、 ECMAScript6

爲了讓你們能快速理解ES6語法，部分我會拿ES5的來對比，你會發現大有不一樣O(∩_∩)O~。

1. Class

ES6中添加了對類的支持，引入了class關鍵字，想了解ES5對象語法的能夠敲這裏javascript中的面向對象

//定義類
 
class Cons{

  constructor(name,age){

    this.name = name;
    
    this.age = age;

  }

  getMes(){

    console.log(`hello ${this.name} !`);

  }

}

let mesge = new Cons('啦啦啦~',21);
mesge.getMes();

//繼承

class Ctrn extends Cons{

  constructor(name,anu){

    super(name);  //等同於super.constructor(x)
    this.anu = anu;

  }

  ingo(){
    console.log(`my name is ${this.name},this year ${this.anu}`);
  }

}

let ster = new Ctrn('will',21);
ster.ingo();
ster.getMes();

1. 箭頭操做符

新增的箭頭操做符=>便有殊途同歸之妙。它簡化了函數的書寫

var arr = [1, 2, 3];

//ES5

arr.forEach(function(x) {

    console.log(x);
    
});

//ES6

arr.forEach(x = > console.log(x));

1. 解構賦值

數組中的值會自動被解析到對應接收該值的變量中

var [name,,age] = ['will','lala','21'];

console.log('name:'+name+', age:'+age);
//輸出： name:will, age:21

1. 默認參數

定義函數的時候指定參數的默認值

//ES5

function fn(name){
    
    var name=name||'will';
    console.log('my name is '+name);
}

//ES6

function fn(name='will'){

    console.log(`my name is ${name}`);
    
}

1. 多行字符串

使用反引號`來建立字符串

//ES5

var str = 'The 3.1 work extends XPath and'
  +'XQuery with map and array data structures'
  +'along with additional functions and operators'
  +'for manipulating them; a primary motivation'
  +'was to enhance JSON support.';

//ES6

var roadPoem = `The 3.1 work extends XPath and
  XQuery with map and array data structures
  along with additional functions and operators
  for manipulating them; a primary motivation
  was to enhance JSON support.`;

1. 字符串模板

由美圓符號加花括號包裹的變量${name}

var name = 'will';

console.log(`my name is ${name}`);

1. 擴展運算符

在函數中使用命名參數同時接收不定數量的未命名參數，在之前的JavaScript代碼中咱們能夠經過arguments變量來達到這一目的。而ES6中是以下實現的

function add(...x){

    return x.reduce((m,n)=>m+n);
    
}

console.log(add(1,2,3));//輸出：6
console.log(add(1,2,3,4,5));//輸出：15

1. 塊級做用域

let與const 關鍵字！能夠把let當作var，它定義的變量被限定在了特定範圍內。const則用來定義常量，即沒法被更改值的變量。共同點都是塊級做用域。

//let

for (let i=0;i<2;i++){

  console.log(i);//輸出: 0,1
  
}
console.log(i);//輸出：undefined

//const

const name='a';
name='b';   //報錯

1. 模塊

在ES6標準中支持module了,將不一樣功能的代碼分別寫在不一樣文件中，各模塊只需使用export導出公共接口部分，而後經過使用module模塊的導入的方式能夠在其餘地方使用

// b.js
function fn(){
    console.log('hello world');
}
export fn;  


// a.js

module { fn } from "./b";
 
fn();

//而後在HTML引入a文件運行瀏覽器

1. for or

咱們都知道for in循環用於遍歷數組，類數組或對象，ES6中新引入的for of循環功能類似，不一樣的是每次循環它提供的不是序號而是值。

var arr = [ "a", "b", "c" ];
 
for (v of arr) {
    console.log(v);//輸出 a,b,c
}

其餘還有Map、Set等能夠查看阮一峯的ECMAScript 6 入門