譯者按: ** 人生苦短，我用ES6**。
原文:
Top 10 ES6 Features Every Busy JavaScript Developer Must Know 譯者: Fundebug為了保證可讀性，本文采用意譯而非直譯，并且對源代碼進行了大量修改。另外，本文版權歸原作者所有，翻譯僅用于學習。
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. 模闆字元串
使用+号将變量拼接為字元串：
var name = 'Your name is ' + first + ' ' + last + '.'
将變量放在大括号之中：
var name = `Your name is ${first} ${last}.`
ES6的寫法更加簡潔、直覺。
3. 多行字元串
使用"\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'
将多行字元串放在反引号``之間就好了：
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. 解構指派
當需要擷取某個對象的屬性值時，需要單獨擷取：
var data = $('body').data(); // data有house和mouse屬性
var house = data.house;
var mouse = data.mouse;
一次性擷取對象的子屬性：
var { house, mouse} = $('body').data()
對于數組也是一樣的：
var [col1, col2] = $('.column')；
5. 對象屬性簡寫
對象中必須包含屬性和值，顯得非常多餘：
var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = {
bar: bar,
foo: foo
};
對象中直接寫變量，非常簡單：
var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = { bar, foo };
6. 箭頭函數
普通函數體内的this，指向調用時所在的對象。
function foo()
{
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出2
箭頭函數體内的this，就是定義時所在的對象，而不是調用時所在的對象。
var foo = () => {
console.log(this.id);
}
var id = 1;
foo(); // 輸出1
foo.call({ id: 2 }); // 輸出1
7. Promise
嵌套兩個setTimeout回調函數：
setTimeout(function()
{
console.log('Hello'); // 1秒後輸出"Hello"
setTimeout(function()
{
console.log('Fundebug'); // 2秒後輸出"Fundebug"
}, 1000);
}, 1000);
使用兩個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應用的錯誤，歡迎免費使用
)
{
let a = 10;
}
console.log(a); // 報錯“ReferenceError: a is not defined”
const與let一樣，也是塊級作用域。
9. 類
使用構造函數建立對象：
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
使用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)功能。
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中使用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
參考連結
- ES6/ECMAScript2015 Cheatsheet ( PDF
- Understanding ECMAScript 6
- Exploring ES6
- ECMAScript 6 入門
- Javascript的this用法
版權聲明:
轉載時請注明作者
以及本文位址：
https://blog.fundebug.com/2017/08/21/10-best-es6-feature/![Windows下VS開發環境環境安裝工程項目設定關于Debug和Release的提示[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)