ES6+ 如今就用系列（一)：爲何使用ES6+

系列目錄

ES6+ 如今就用系列（一)：爲何使用ES6+
ES6+ 如今就用系列（二)：let 命令
ES6+ 如今就用系列（三)：const 命令
ES6+ 如今就用系列（四)：箭頭函數 =>
ES6+ 如今就用系列（五)：模板字面量 (Template Literals)
ES6+ 如今就用系列（六)：解構賦值 (Destructuring )
ES6+ 如今就用系列（七)：Promise
ES6+ 如今就用系列（八)：類 (Class)，繼承，對象的擴展
ES6+ 如今就用系列（九)：模塊
ES6+ 如今就用系列（十)：Async 異步編程
ES6+ 如今就用系列（十一)：ES7 Async in Browser Today

ES6+

如今主流的瀏覽器都是支持到ES5, 爲了表述方便，我在此發明一個名詞"ES6+" 就是ES5之後的版本，包括ES6, ES7. 爲何說如今就用，雖然主流的瀏覽器只支持到ES5, 可是如今有不少的轉換器，能夠把一些ES6和ES7的代碼轉換爲ES5的代碼。這就意味着咱們如今就可使用這些新特性，而後使用轉碼器讓代碼能夠運行在主流的瀏覽器上。

爲何當即開始使用ES6, ES7的新特性？

JavaScript語言的一些糟糕的實現

先不說JavaScript語言自己設計是否有問題，現有JavaScript語言的實現裏有不少很是糟糕或者詭異的實現，就是你覺得代碼的結果是這樣，可是他恰恰是那樣，這給咱們程序帶了不少的意向不到的Bug和煩惱，若是你要是JavaScript大牛，你須要瞭解他內部的實現的Bug, 並且要知道哪些詭異的寫法輸出了什麼詭異的結果，我我的對了解這種東西實在提不起太大的興趣，由於我只想用「語言」來實現個人項目讓人很好的使用我開發的軟件，可是因爲歷史這樣或那樣的緣由，致使JavaScript語言成爲瀏覽器的霸主，咱們不得不忍受這些糟糕的問題。下面我來展現一些讓你以爲詭異的問題 （若是你不不以爲詭異，恭喜你，你已是JavaScript的「高手」)

示例1:

(function() {
    return NaN === NaN;
})();
    
輸出: false

示例2:

(function() {
    return (0.1 + 0.2 === 0.3);
})();

輸出: false

示例3:

[5, 12, 9, 2, 18, 1, 25].sort();

輸出: [1, 12, 18, 2, 25, 5, 9]

示例4:

var a = "1"
var b = 2
var c = a + b

輸出：c = "12" 

var a = "1"
var b = 2
var c = +a + b

輸出：c = 3

示例5:

(function() {
    return ['10','10','10','10'].map(parseInt);
})();

輸出: [10, NaN, 2, 3]

示例6:

(function() {
    return 9999999999999999;
})();

輸出: 10000000000000000

示例7:

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
    console.log(i);
};
}
a[1](); 
a[2]();
a[3]();

輸出: 10,10,10

我是以爲若是按正常人的理解，代碼不能獲得想要的結果，那就算是語言自己的問題。若是一個程序執行的和人指望的不同，或者還須要一些Hack的方法，那麼是很糟糕的。

ES5 一些語言特性的缺失

因爲上面的不少問題，因此ES 須要不斷的改進, 固然新的版本確定不可能一會兒解決以前全部的問題。

已有JavaScript的問題這一塊就不細說了，由於能來看這篇文章的人，應該對下面我列的幾個突出的問題都有感覺。

• 沒有塊級做用域，這個致使上面示例7的問題
• 全局變量的污染
• 類的寫法比較怪異
• 沒有模塊管理
• 異步調用寫法容易產生 「回調地獄」

爲何能夠當即使用？

由於如今不少轉換器已經能夠把ES6全部的特性以及ES7的部分特性轉換爲ES5，Babel就是一個很是好的轉換器，因此我這裏建議凡是能被Babel轉換的新特性均可以當即在項目裏適用。

ES6和ES7的一些新特性，能夠大大提升項目的健壯性，同時讓代碼更易讀，同時也能夠避免不少ES5以前的不少詭異的東西。Gulp裏能夠很好的使用babel, 若是你對Gulp不熟悉，能夠參考我博客裏的Gulp系列。

這裏簡單說一Gulp和babel如何結合使用

$ npm install -g gulp-babel

var gulp=require('gulp'), babel=require('gulp-babel');

gulp.task('build',function(){
    return gulp.src('src/app.js')
               .pipe(babel())
               .pipe(gulp.dest('build'))    
})

後面的系列，我將以此介紹ES6, ES7的一些能夠如今就用的主要特性。