原文: Top 10 ES6 Features Every Busy JavaScript Developer Must Know
譯者: Fundebug
為了保證可讀性，本文采用意譯而非直譯盗迟，并且對源代碼進行了大量修改脂新。另外，本文版權(quán)歸原作者所有谒府，翻譯僅用于學(xué)習(xí)拼坎。
ES6浮毯，正式名稱是ECMAScript2015，但是ES6這個名稱更加簡潔泰鸡。ES6已經(jīng)不再是JavaScript最新的標(biāo)準(zhǔn)债蓝，但是它已經(jīng)廣泛用于編程實踐中。如果你還沒用過ES6盛龄，現(xiàn)在還不算太晚...
下面是10個ES6最佳特性惦蚊，排名不分先后：
- 函數(shù)參數(shù)默認值
- 模板字符串
- 多行字符串
- 解構(gòu)賦值
- 箭頭函數(shù)
- Promise
- Let與Const
- 類
- 模塊化
1. 函數(shù)參數(shù)默認值
不使用ES6
為函數(shù)的參數(shù)設(shè)置默認值：
function foo(height, color)
{
var height = height || 50;
var color = color || 'red';
//...
}
這樣寫一般沒問題，但是讯嫂，當(dāng)參數(shù)的布爾值為false時蹦锋，是會出事情的！比如欧芽，我們這樣調(diào)用foo函數(shù)：
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
使用"nt"將多行字符串拼接起來：
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. 解構(gòu)賦值
不使用ES6
當(dāng)需要獲取某個對象的屬性值時曲楚，需要單獨獲壤逋佟：
var data = $('body').data(); // data有house和mouse屬性
var house = data.house;
var mouse = data.mouse;
使用ES6
一次性獲取對象的子屬性：
var { house, mouse} = $('body').data()
對于數(shù)組也是一樣的：
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. 箭頭函數(shù)
不使用ES6
普通函數(shù)體內(nèi)的this，指向調(diào)用時所在的對象趟大。
function foo()
{
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出2
使用ES6
箭頭函數(shù)體內(nèi)的this鹤树，就是定義時所在的對象，而不是調(diào)用時所在的對象逊朽。
var foo = () => {
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出1
7. Promise
不使用ES6
嵌套兩個setTimeout回調(diào)函數(shù)：
setTimeout(function()
{
console.log('Hello'); // 1秒后輸出"Hello"
setTimeout(function()
{
console.log('Fundebug'); // 2秒后輸出"Fundebug"
}, 1000);
}, 1000);
使用ES6
使用兩個then是異步編程串行化罕伯，避免了回調(diào)地獄：
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
不使用ES6
var定義的變量未函數(shù)級作用域：
{
var a = 10;
}
console.log(a); // 輸出10
使用ES6
let定義的變量為塊級作用域，因此會報錯：(如果你希望實時監(jiān)控JavaScript應(yīng)用的錯誤叽讳，歡迎免費使用Fundebug)
{
let a = 10;
}
console.log(a); // 報錯“ReferenceError: a is not defined”
9. 類
不使用ES6
使用構(gòu)造函數(shù)創(chuàng)建對象：
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 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一直沒有官方的模塊化解決方案追他，開發(fā)者在實踐中主要采用CommonJS和AMD規(guī)范。而ES6制定了模塊(Module)功能岛蚤。
不使用ES6
Node.js采用CommenJS規(guī)范實現(xiàn)了模塊化邑狸，而前端也可以采用，只是在部署時需要使用Browserify等工具打包灭美。這里不妨介紹一下CommenJS規(guī)范推溃。
module.js中使用module.exports導(dǎo)出port變量和getAccounts函數(shù)：
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
main.js中使用require導(dǎo)入module.js：
var service = require('module.js')
console.log(service.port) // 輸出3000
使用ES6
ES6中使用export與import關(guān)鍵詞實現(xiàn)模塊化。
module.js中使用export導(dǎo)出port變量和getAccounts函數(shù)：
export var port = 3000
export function getAccounts(url) {
...
}
main.js中使用import導(dǎo)入module.js，可以指定需要導(dǎo)入的變量：
import {port, getAccounts} from 'module'
console.log(port) // 輸出3000
也可以將全部變量導(dǎo)入：
import * as service from 'module'
console.log(service.port) // 3000
參考鏈接
ES6/ECMAScript2015 Cheatsheet(PDF)
Understanding ECMAScript 6
Exploring ES6
ECMAScript 6 入門
Javascript的this用法
