6個討喜的 ES6 小技巧

【編者按】本文做者爲 Axel Rauschmayer，主要介紹6個 ES6 小技巧。文章系國內 ITOM 管理平臺 OneAPM 編譯呈現。

在本文中，筆者將介紹6個由 ES6 新功能帶來的小技巧。在每一個技巧末尾，都會附上筆者的拙做「《探索 ES6》」中的相關閱讀材料（本書可在線上免費閱讀）。

##一、經過參數默認值實現強制參數 ES6 的參數默認值只有在真正使用時纔會求值。這可讓你強制確保提供參數：

/**
 * Called if a parameter is missing and
 * the default value is evaluated.
 */
function mandatory() {
    throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
    return mustBeProvided;
}

函數調用 mandatory() 只有當參數 mustBeProvided 缺失時纔會執行。

互動：

foo()    Error: Missing parameter
 foo(123)    123

更多信息：

• 」《探索 ES6》「中的」必需參數「一節

##二、經過 for-of 循環迭代數組索引與元素 forEach() 方法容許你迭代數組中的元素。若是你想的話，還能夠獲得每一個元素的索引：

var arr = ['a', 'b', 'c'];
arr.forEach(function (elem, index) {
    console.log('index = '+index+', elem = '+elem);
});    // Output:    // index = 0, elem = a    // index = 1, elem = b    // index = 2, elem = c

ES6 的 for-of 循環是支持 ES6 迭代（經過可迭代量與迭代器）與重構（destructuring）的循環。若是將重構與新的數組方法 entries() 相結合，能夠獲得：

const arr = ['a', 'b', 'c'];    for (const [index, elem] of arr.entries()) {        console.log(`index = ${index}, elem = ${elem}`);
}

arr.entries() 會爲索引元素對(index-element pair)返回一個可迭代量。而重構樣式 [index, elem] 讓咱們能夠直接訪問對中的兩個組成成分。console.log() 的參數是所謂的template literal(模板常量)，後者會給 JavaScript 帶去字符串插值。

###更多信息

• 」《探索 ES6》「中的」重構「一章
• 」《探索 ES6》「中的」可迭代量與迭代器「一章
• 」《探索 ES6》「中的」帶有重構樣式的迭代「一章
• 」《探索 ES6》「中的」模板常量「一章

##三、迭代統一碼(Unicode)代碼點 有些統一碼代碼點（大體上多爲字符）包含兩個 JavaScript 字符。好比，表情符：

字符串實現了 ES6 迭代。若是迭代字符串，會獲得編碼的代碼點（一或兩個 JavaScript 字符）。舉例以下：

for (const ch of 'x\uD83D\uDE80y') {
    console.log(ch.length);
}    // Output:    // 1    // 2    // 1

這樣，你就能夠計算一個字符串中的代碼點數量：

[...'x\uD83D\uDE80y'].length    3

散佈操做符 (…) 會將其操做數中的項目插入到一個數組中。

###更多信息

• 」《探索 ES6》「中的」ES6 中的統一碼「一章
• 」《探索 ES6》「中的」散佈操做符(…)「一節

##四、經過重構交換變量的值 若是你把兩個變量放到一個數組中，以後重構該數組爲相同的變量，你能夠交換變量的值，而不須要中間變量：

[a, b] = [b, a];

咱們有理由相信，JavaScript 引擎未來會優化這一模式從而避免建立數組。

###更多信息：

• 」《探索 ES6》「中的」重構「一章

##五、經過模板常量實現簡單模板 ES6 中的模板常量更像是字符串常量，而不是傳統的文本模板。可是，若是將它們做爲函數返回值，就能夠把它們用於模板。

const tmpl = addrs => `        <table>
    ${addrs.map(addr => `            <tr><td>${addr.first}</td></tr>            <tr><td>${addr.last}</td></tr>
    `).join('')}        </table>
`;

函數 tmpl (一個箭頭函數)會將數組的 addrs 映射到一個字符串。讓咱們對數組的 data 應用 tmpl() 函數：

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
// Output:
// <table>
//
//     <tr><td><Jane></td></tr>
//     <tr><td>Bond</td></tr>
//
//     <tr><td>Lars</td></tr>
//     <tr><td><Croft></td></tr>
//
// </table>

###更多信息：

• 文章：「《處理 ES6 模板常量中空格》」
• 」《探索 ES6》「中的」經過未加標籤的模板常量實現文本模板「一節
• 」《探索 ES6》「中的「箭頭函數」一章

##六、經過子類工廠實現簡單混合(mixins) 若是一個 ES6 類繼承了另外一個類，該類要經過一個任意的表達式動態指定（而不是經過某個標識符靜態指定）。

// Function id() simply returns its parameter
const id = x => x;    class Foo extends id(Object) {}

這容許你將一個 mixin 實現爲以下函數：該函數會把某個類 C 映射至一個新類（帶有 mixin 方法），且該新類的父類爲 C。例如，下面的 Storage 與 Validation 方法均爲 mixins:

const Storage = Sup => class extends Sup {
    save(database) { ··· }
};    const Validation = Sup => class extends Sup {
    validate(schema) { ··· }
};

你能夠將他們用於構建以下的 Employee 類：

class Person { ··· }    class Employee extends Storage(Validation(Person)) { ··· }

###更多信息：

• 」《探索 ES6》「中的「簡單 mixins」一節

##七、延伸閱讀 《探索 ES6》中的下面兩章完善地介紹了 ECMAScript 6：

• ES6 中新特性概覽
• ECMAScript 6 快速入門（簡單易學的新功能）

OneAPM 能幫助您輕鬆鎖定 Node.js 應用性能瓶頸，經過強大的 Trace 記錄逐層分析，直至鎖定行級問題代碼。以用戶角度展現系統響應速度，以地域和瀏覽器維度統計用戶使用狀況。想閱讀更多技術文章，請訪問 OneAPM 官方博客。

本文轉自 OneAPM 官方博客

原文地址：http://www.2ality.com/2016/05/six-nifty-es6-tricks.html