知識星球作者：AlloyTeam
網址：http://www.alloyteam.com/2015/08/its-time-to-use-es2015/
在Web中使用ES 2015
想要在瀏覽器端使用ES 2015最新語法，其實很簡單，只需要一個轉換器即可，Babel是ES 2015最流行的轉換器之一，Babel加上各種外掛和polyfill能基本上支援絕大部分新語法。
在你的構建中，插入一步使用Babel將ES 2015的程式碼轉換成完全相容ES5的程式碼的任務，你甚至都不必瞭解Babel的具體用法，就可以爽爽的開始寫ES 2015程式碼了。
使用gulp-babel在需要的地方轉換一下即可。
var gulp = require(‘gulp’);
var babel = require(‘gulp-babel’);
gulp.task(‘babel’, function () {
return gulp.src(‘src/js/*.js’)
.pipe(babel())
.pipe(gulp.dest(‘dist’));
});
筆者在實際生產中已使用到一些ES 2015新特性，透過Babel轉換成完全相容ES5的語法，然後釋出到正式環境，大大提高了開發體驗。下麵將一部分使用的較多，能改善編碼體驗的點列出來，當然也有一些坑，希望讀者能儘早熟悉儘早投入ES 2015的懷抱。
最基本的：let和const
let a = 1;
const A = 2;
轉換成
var a = 1;
var A = 2;
Babel只是單純將let和const轉換成了var，並沒有真正實現塊作用域和常量的功能，也沒有消除變數提升的問題，這樣避免了引入一些額外的程式碼，而且也已經完全與ES5相容了。
模板字串
const name = ‘Jarvis’;
const template = `My name is ${name}`;
轉換成
var name = ‘Jarvis’;
var template = ‘My name is ‘ + name;
模板字串（兩個反丿號）是ES 2015的一個重要的新功能，允許模板字串裡面透過${variable}的方式直接嵌變數，可以替代老舊的字串拼接方法，而且裡面可以任意使用單雙引號。
這個改進很實用，現在就可以用起來了，再也不用擔心單雙引號誰該寫在誰的外面了。
模板字串還直接支援多行文字，如：
const tmpl = `text line 1,
text line 2,
textline 3`;
在拼接html的時候特別有用。
箭頭函式
箭頭函式語法：
const fn = () => {
console.log(‘hello world’);
};
轉換成
var fn = function() {
console.log(‘hello world’);
};
箭頭函式通常比匿名函式還要簡潔，幾乎可以取代所有使用function的地方，不過用起來別太嗨了，下麵有這個坑還是值得註意。
箭頭函式最大的特點在於this關鍵字在宣告或者定義箭頭函式的時候就已經被系結好了，而且不會改變，這個特性用來解決setTimeout等一些非同步函式this會改變的問題很爽，但下麵這個卻是個大問題：
$(‘#selector’).on(‘tap’, () => {
$(this).addClass(‘new’);
});
將會轉換成
var _this = this;
$(‘#selector’).on(‘tap’, function() {
$(_this).addClass(‘new’);
});
看出問題了吧，相當於箭頭函式是在事件監聽器外面就先定義好了，這時候的this指向的全域性變數，並非我們期望中的那個dom元素。
這時候就不適合用箭頭函式了，除非你明確知道this指向的誰或者根本用不上this。
…args
我在前面的文章介紹過V8新的Strong Mode已經不允許使用arguments關鍵字了，取而代之是…args。
function (…args) {
console.log(args);
}
這裡的args是個真正的陣列了，使用到arguments的地方推薦都換成…args吧，還能避免一些意想不到的坑，比如下麵這個。
箭頭函式裡面是獲取不到argunents變數的，如果你這樣寫
const fn = () => {
console.log(arguments);
};
將被轉換成
var _arguments = arguments;
var fn = function() {
console.log(_arguments);
};
這時候的arguments對映的是外層函式的arguments，如果使用…args就不會有這個問題。
預設引數
預設函式引數我想用處非常大了，從此再也不用寫一大堆引數判斷的程式碼了。
function fn(params = {}, options = {}, callback = () => {}) {
// TODO
}
再也不用去費力判斷哪一個引數才是callback了。 Babel已經完全支援預設引數一些強大的語法，如
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
return x + y + z;
}
物件屬性縮寫
const url = ‘http://www.alloyteam.com’;
const type = ‘GET’;
const timeout = 10000;
$.ajax({
url, type, timeout
});
轉換成
var url = ‘http://www.alloyteam.com’;
var type = ‘GET’;
var timeout = 10000;
$.ajax({
url: url,
type: type,
timeout: timeout
});
屬性縮寫還可與解構賦值搭配使用
// options: {url: url, type: type, timeout: timeout}
const {url, type} = options;
const opt = {url, type};
這樣輕鬆就能讓opt成為options的一個子集了，在做欄位過濾和引數白名單過濾的時候很有用。
好了，時間已經很晚了，本期就先寫到這裡了。