JavaScript6裏出現了哪些新語法、新特徵？

ES5是2009年就出來的，目前來講在我寫這篇文章的時候基本上ES6在瀏覽器上面尚未普及，不過Google瀏覽器是支持ES6語法的，誰讓Google是美國生產的呢。。。

ES6如今使用的地方其實仍是不少的，前端腳手架工具基本上都是支持ES6語法的，他們內部都有一套解析ES6的引擎。如vue、angular、react等。

想要了解ES6，學習ES6用法，最好仍是去看寫手冊，文章都是根據手冊官網來寫的。ES6手冊是   http://es6.ruanyifeng.com/

下面就看幾個簡單而實用的小特性。

一、模板文本

須要在字符串中加入變量時，一般作法就是使用字符串拼接，如

var param = 'b';
var str = 'a ' + param + ' c';

ES6中簡單了，能夠直接在字符串中添加變量

var str = `a ${param} c`;

注意，使用的是反引號 「，而不是 」

二、多行字符串

例如想定義一個html代碼片斷，放在一行很難看，想用多行，還得用字符串拼接

var html =
'<div>' +
'<span>test</span>' +
'</div>';

一堆加號和引號，很麻煩

ES6中的反引號就能簡單的解決

var html =
`<div>
<span>test</span>
</div>`;

很是清晰，裏面還能夠直接加變量，很方便

三、參數默認值

想給參數設置默認值時，須要咱們手工處理，例如

function (width, height) {
var height = height || 300;
var width = width || 600;
...
}

ES6能夠直接指定默認值

 

function (width=600, height=300) {
...
}

四、解構賦值

例若有一個json對象

var data = {name:'dys', age:1};

想取得name,age屬性的話，須要分別獲取

var name = data.name;
var age = data.age;

ES6能夠自動獲取並賦值

var {name, age} = data;

這幾個示例只是比較簡單的語法方面的便利特性，ES6還有一些比較深刻的改進，例如

箭頭函數、Promises、Classes ……

如何使用ES6

ES6是個新東西，兼容性仍是個大問題，直接使用確定是不可行了

還好，已經有了ES6的代碼轉換器，能夠把ES6的代碼轉爲ES5的代碼（例如 babel），可讓咱們使用ES6，又不擔憂兼容問題

我還沒實際應用，不知道實際兼容效果是否有那麼好

babel的官網 https://babeljs.io/

babel 示例

babel有gulp插件，下面是個簡單的ES6代碼轉換示例

（1）安裝環境

須要你的機器上已經裝了nodejs、gulp

而後安裝babel客戶端

$ npm install -g babel-cli

在項目目錄下安裝相關插件

$ npm install gulp
$ npm install --save-dev gulp-babel
$ npm install --save-dev babel-preset-es2015

（2）測試腳本

用ES6方式寫一個測試 a.js

var str = `hi ${name}`;

編寫 gulpfile.js

var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("a.js")
.pipe(babel({presets: ['es2015']}))
.pipe(gulp.dest("dist"));
});

這個腳本的意思是使用babel把a.js編譯並輸出到dist目錄下

（3）執行編譯

在項目目錄中執行

$ gulp

執行結束後，到dist目錄下查看編譯後的a.js

原文爲  http://www.techug.com/post/javascript6-new-features.html