10個最佳ES6特性
ES6，正式名稱是 ECMAScript2015 ，但是 ES6 這個名稱更加簡潔。 ES6 已經不再是JavaScript最新的標準，但是它已經廣泛用于編程實踐中。如果你還沒用過 ES6 ，現在還不算太晚…
下面是10個ES6最佳特性，排名不分先后：
- 函數參數默認值
- 模板字符串
- 多行字符串
- 解構賦值
- 對象屬性簡寫
- 箭頭函數
- Promise
- Let與Const
- 類
- 模塊化
1. 函數參數默認值
不使用ES6
為函數的參數設置默認值：
function foo(height, color)
{
var height = height || 50;
var color = color || 'red';
//...
}
這樣寫一般沒問題，但是，當參數的布爾值為 false 時，是會出事情的！比如，我們這樣調用 foo 函數：
foo(0, "", "")
因為 0 的布爾值為 false ，這樣 height 的取值將是 50 。同理 color 的取值為 ‘red’ 。
使用ES6
function foo(height = 50, color = 'red')
{
// ...
}
2. 模板字符串
不使用ES6
使用 + 號將變量拼接為字符串：
var name = 'Your name is ' + first + ' ' + last + '.'
使用ES6
將變量放在大括號之中：
var name = `Your name is ${first} ${last}.`
ES6的寫法更加簡潔、直觀。
3. 多行字符串
不使用ES6
使用 “\n\t” 將多行字符串拼接起來：
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
使用ES6
將多行字符串放在反引號 `` 之間就好了：
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
4. 解構賦值
不使用ES6
當需要獲取某個對象的屬性值時，需要單獨獲取：
var data = $('body').data(); // data有house和mouse屬性
var house = data.house;
var mouse = data.mouse;
使用ES6
一次性獲取對象的子屬性：
var { house, mouse} = $('body').data()
對于數組也是一樣的：
var [col1, col2] = $('.column')；
5. 對象屬性簡寫
不使用ES6
對象中必須包含屬性和值，顯得非常多余：
var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = {
bar: bar,
foo: foo
};
使用ES6
對象中直接寫變量，非常簡單：
var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = { bar, foo };
6. 箭頭函數
不使用ES6
普通函數體內的 this ，指向調用時所在的對象。
function foo()
{
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出2
使用ES6
箭頭函數體內的 this ，就是定義時所在的對象，而不是調用時所在的對象。
var foo = () => {
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出1
7. Promise
不使用ES6
嵌套兩個 setTimeout 回調函數：
setTimeout(function()
{
console.log('Hello'); // 1秒后輸出"Hello"
setTimeout(function()
{
console.log('Fundebug'); // 2秒后輸出"Fundebug"
}, 1000);
}, 1000);
使用ES6
使用兩個 then 是異步編程串行化，避免了回調地獄：
var wait1000 = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000);
});
wait1000
.then(function()
{
console.log("Hello"); // 1秒后輸出"Hello"
return wait1000;
})
.then(function()
{
console.log("Fundebug"); // 2秒后輸出"Fundebug"
});
8. Let與Const
使用Var
var定義的變量未函數級作用域：
{
var a = 10;
}
console.log(a); // 輸出10
使用let與const
let定義的變量為塊級作用域，因此會報錯：(如果你希望實時監控JavaScript應用的錯誤，歡迎免費使用 Fundebug )
{
let a = 10;
}
console.log(a); // 報錯“ReferenceError: a is not defined”
const與 let 一樣，也是塊級作用域。
9. 類
不使用ES6
使用構造函數創建對象：
function Point(x, y)
{
this.x = x;
this.y = y;
this.add = function()
{
return this.x + this.y;
};
}
var p = new Point(1, 2);
console.log(p.add()); // 輸出3
使用ES6
使用 Class 定義類，更加規范，且你能夠繼承：
class Point
{
constructor(x, y)
{
this.x = x;
this.y = y;
}
add()
{
return this.x + this.y;
}
}
var p = new Point(1, 2);
console.log(p.add()); // 輸出3
10. 模塊化
JavaScript一直沒有官方的模塊化解決方案，開發者在實踐中主要采用 CommonJS 和 AMD 規范。而 ES6 制定了模塊(Module)功能。
不使用ES6
Node.js采用 CommenJS 規范實現了模塊化，而前端也可以采用，只是在部署時需要使用 Browserify 等工具打包。這里不妨介紹一下 CommenJS 規范。
module.js中使用 module.exports 導出 port 變量和 getAccounts 函數：
module.exports = {
port: 3000,
getAccounts: function(){
...
}
}
main.js中使用 require 導入 module.js ：
var service = require('module.js')
console.log(service.port) // 輸出3000
使用ES6
ES6中使用 export 與 import 關鍵詞實現模塊化。
module.js中使用 export 導出 port 變量和 getAccounts 函數：
export var port = 3000
export function getAccounts(url){
...
}
main.js中使用 import 導入 module.js ，可以指定需要導入的變量：
import {port, getAccounts} from 'module'
console.log(port) // 輸出3000
也可以將全部變量導入：
import * as service from 'module'
console.log(service.port) // 3000
來自：https://kiwenlau.com/2017/08/21/10-best-es6-feature/