6個討喜的 ES6 小技巧

【編者按】本文作者為 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 字符坎怪。比如,表情符:

6個討喜的 ES6 小技巧

字符串實現(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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末诗祸,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子轴总,更是在濱河造成了極大的恐慌贬媒,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肘习,死亡現(xiàn)場離奇詭異际乘,居然都是意外死亡,警方通過查閱死者的電腦和手機漂佩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門脖含,熙熙樓的掌柜王于貴愁眉苦臉地迎上來罪塔,“玉大人,你說我怎么就攤上這事养葵≌骺埃” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵关拒,是天一觀的道長佃蚜。 經常有香客問我,道長着绊,這世上最難降的妖魔是什么谐算? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮归露,結果婚禮上洲脂,老公的妹妹穿的比我還像新娘。我一直安慰自己剧包,他們只是感情好恐锦,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疆液,像睡著了一般一铅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上堕油,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天潘飘,我揣著相機與錄音,去河邊找鬼馍迄。 笑死福也,一個胖子當著我的面吹牛局骤,可吹牛的內容都是我干的攀圈。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼峦甩,長吁一口氣:“原來是場噩夢啊……” “哼赘来!你這毒婦竟也來了?” 一聲冷哼從身側響起凯傲,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤犬辰,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冰单,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體幌缝,經...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年诫欠,在試婚紗的時候發(fā)現(xiàn)自己被綠了涵卵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浴栽。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖轿偎,靈堂內的尸體忽然破棺而出典鸡,到底是詐尸還是另有隱情,我是刑警寧澤坏晦,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響瓣戚,放射性物質發(fā)生泄漏撞蜂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一挖诸、第九天 我趴在偏房一處隱蔽的房頂上張望汁尺。 院中可真熱鬧,春花似錦多律、人聲如沸痴突。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辽装。三九已至,卻和暖如春相味,著一層夾襖步出監(jiān)牢的瞬間拾积,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工丰涉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拓巧,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓一死,卻偏偏與公主長得像肛度,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子投慈,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容

  • 一承耿、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,085評論 8 25
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy閱讀 9,523評論 1 51
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點點福利:阿里云產品券伪煤,享受所有官網優(yōu)惠加袋,并抽取幸運大...
    HetfieldJoe閱讀 2,902評論 0 16
  • 三,字符串擴展 3.1 Unicode表示法 ES6 做出了改進抱既,只要將碼點放入大括號职烧,就能正確解讀該字符。有了這...
    eastbaby閱讀 1,539評論 0 8
  • 所謂個人,就是矛盾體蚀之。明知不可為而為之跋理,做很多自己都覺得不可思議的事情,事后懊悔不已恬总,但已經無法挽回前普。 所謂我,...
    三勢閱讀 309評論 0 3