ES6也出來有一會時間了，他新增的語法糖也的確大大提高了開發者的效率，今天就總結一些自己用到最多的。
說到ES6肯定是先介紹Babel了，據阮一峰老師介紹到，Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。這意味着，你可以現在就用ES6編寫程序，而不用擔心現有環境是否支持。
一、 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語法。
二、 ECMAScript6
為了讓大家能快速理解ES6語法，部分我會拿ES5的來對比，你會發現大有不同O(∩_∩)O~。
- 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();
- 箭頭操作符
新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫
var arr = [1, 2, 3];
//ES5
arr.forEach(function(x) {
console.log(x);
});
//ES6
arr.forEach(x = > console.log(x));
- 解構賦值
數組中的值會自動被解析到對應接收該值的變量中
var [name,,age] = ['will','lala','21'];
console.log('name:'+name+', age:'+age);
//輸出： name:will, age:21
- 默認參數
定義函數的時候指定參數的默認值
//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}`);
}
- 多行字符串
使用反引號`來創建字符串
//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.`;
- 字符串模板
由美元符號加花括號包裹的變量${name}
var name = 'will';
console.log(`my name is ${name}`);
- 擴展運算符
在函數中使用命名參數同時接收不定數量的未命名參數，在以前的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
- 塊級作用域
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'; //報錯
- 模塊
在ES6標准中支持module了,將不同功能的代碼分別寫在不同文件中，各模塊只需使用export導出公共接口部分，然后通過使用module模塊的導入的方式可以在其他地方使用
// b.js
function fn(){
console.log('hello world');
}
export fn;
// a.js
module { fn } from "./b";
fn();
//然后在HTML引入a文件運行瀏覽器
- 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 入門