【編者按】本文作者為 Axel Rauschmayer瘾带,主要介紹6個 ES6 小技巧串慰。文章系國內 ITOM 管理平臺 OneAPM 編譯呈現(xiàn)厚满。
在本文中夺谁,筆者將介紹6個由 ES6 新功能帶來的小技巧菜职。在每個技巧末尾青抛,都會附上筆者的拙作“《探索 ES6》”中的相關閱讀材料(本書可在線上免費閱讀)。
1酬核、通過參數(shù)默認值實現(xiàn)強制參數(shù)
ES6 的參數(shù)默認值只有在真正使用時才會求值蜜另。這可以讓你強制確保提供參數(shù):
/**
* 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;
}
函數(shù)調用 mandatory() 只有當參數(shù) mustBeProvided
缺失時才會執(zhí)行。
互動:
foo() Error: Missing parameter
foo(123) 123
更多信息:
- ”《探索 ES6》“中的”必需參數(shù)“一節(jié)
2嫡意、通過 for-of 循環(huán)迭代數(shù)組索引與元素
forEach() 方法允許你迭代數(shù)組中的元素举瑰。如果你想的話,還可以得到每個元素的索引:
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 循環(huán)是支持 ES6 迭代(通過可迭代量與迭代器)與重構(destructuring)的循環(huán)蔬螟。如果將重構與新的數(shù)組方法 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() 的參數(shù)是所謂的template literal(模板常量)耸序,后者會給 JavaScript 帶去字符串插值。
更多信息
- ”《探索 ES6》“中的”重構“一章
- ”《探索 ES6》“中的”可迭代量與迭代器“一章
- ”《探索 ES6》“中的”帶有重構樣式的迭代“一章
- ”《探索 ES6》“中的”模板常量“一章
3鲁猩、迭代統(tǒng)一碼(Unicode)代碼點
有些統(tǒng)一碼代碼點(大致上多為字符)包含兩個 JavaScript 字符坎怪。比如,表情符:
字符串實現(xiàn)了 ES6 迭代廓握。如果迭代字符串搅窿,會得到編碼的代碼點(一或兩個 JavaScript 字符)嘁酿。舉例如下:
for (const ch of 'x\uD83D\uDE80y') {
console.log(ch.length);
} // Output: // 1 // 2 // 1
這樣,你就可以計算一個字符串中的代碼點數(shù)量:
[...'x\uD83D\uDE80y'].length 3
散布操作符 (…) 會將其操作數(shù)中的項目插入到一個數(shù)組中男应。
更多信息
- ”《探索 ES6》“中的”ES6 中的統(tǒng)一碼“一章
- ”《探索 ES6》“中的”散布操作符(…)“一節(jié)
4闹司、通過重構交換變量的值
如果你把兩個變量放到一個數(shù)組中,之后重構該數(shù)組為相同的變量殉了,你可以交換變量的值开仰,而不需要中間變量:
[a, b] = [b, a];
我們有理由相信,JavaScript 引擎將來會優(yōu)化這一模式從而避免創(chuàng)建數(shù)組薪铜。
更多信息:
- ”《探索 ES6》“中的”重構“一章
5众弓、通過模板常量實現(xiàn)簡單模板
ES6 中的模板常量更像是字符串常量,而不是傳統(tǒng)的文本模板隔箍。但是谓娃,如果將它們作為函數(shù)返回值,就可以把它們用于模板蜒滩。
const tmpl = addrs => ` <table>
${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr>
`).join('')} </table>
`;
函數(shù) tmpl (一個箭頭函數(shù))會將數(shù)組的 addrs
映射到一個字符串滨达。讓我們對數(shù)組的 data
應用 tmpl() 函數(shù):
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》“中的”通過未加標簽的模板常量實現(xiàn)文本模板“一節(jié)
- ”《探索 ES6》“中的“箭頭函數(shù)”一章
6、通過子類工廠實現(xiàn)簡單混合(mixins)
如果一個 ES6 類繼承了另一個類俯艰,該類要通過一個任意的表達式動態(tài)指定(而不是通過某個標識符靜態(tài)指定)捡遍。
// Function id() simply returns its parameter
const id = x => x; class Foo extends id(Object) {}
這允許你將一個 mixin 實現(xiàn)為如下函數(shù):該函數(shù)會把某個類 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”一節(jié)
7、延伸閱讀
《探索 ES6》中的下面兩章完善地介紹了 ECMAScript 6:
- ES6 中新特性概覽
- ECMAScript 6 快速入門(簡單易學的新功能)
OneAPM 能幫助您輕松鎖定 Node.js 應用性能瓶頸啦辐,通過強大的 Trace 記錄逐層分析谓传,直至鎖定行級問題代碼。以用戶角度展示系統(tǒng)響應速度芹关,以地域和瀏覽器維度統(tǒng)計用戶使用情況续挟。想閱讀更多技術文章,請訪問 OneAPM 官方博客侥衬。
本文轉自 OneAPM 官方博客
原文地址:http://www.2ality.com/2016/05/six-nifty-es6-tricks.html