英文 | https://medium.com/geekculture/9-neat-javascript-one-liners-for-algorithms-and-more-8dd3b0a0fb6d

翻譯 | 楊小愛(ài)

const wrap = (arr, steps) => arr[steps % arr.length];wrap(['a','b','c'], 0) // a wrap(['a','b','c'], 1) // bwrap(['a','b','c'], 2) // cwrap(['a','b','c'], 3) // a // etc ...

您可以根據(jù)步驟以不同的方式實(shí)現(xiàn)這一點(diǎn)，但要理解的關(guān)鍵是modulo。這是一個(gè)方便的小運(yùn)算符。在查看此類(lèi)“溢出”類(lèi)型問(wèn)題時(shí)請(qǐng)記住它。

02、用它的名字記錄一個(gè)變量

這是調(diào)試時(shí)的一個(gè)很好的技巧。多虧了對(duì)象速記符號(hào)，我們可以默認(rèn)用名稱注銷(xiāo)變量。

const someVar = 1;console.log({ someVar });// logs out { someVar: 1 }

如果您放入一堆日志（并且在調(diào)試時(shí)您完全會(huì)這樣做），則可能很難跟蹤哪個(gè)是哪個(gè)，所有異步、獲取和循環(huán)都在四處奔波。不必花時(shí)間輸入像 console.log('some var', someVar) 這樣的多個(gè)參數(shù)，而是在一些大括號(hào)中折騰并稱它為一天。

03、對(duì)象中的可選屬性

如果您不希望屬性指向 undefined 或 null ，您可以使用一些 if 語(yǔ)句來(lái)選擇性地添加屬性：

//...const obj = {  a: 'whatever',};if (b) {  obj.c = 'ok';}return obj;//...

然而，它太冗長(zhǎng)了，我一直討厭它。這可能很清楚，但很笨拙。好吧，由于對(duì)象傳播，這已成為過(guò)去：

return {  a: 'Whatever',  ...(b && { c: 'ok'}),};

我們可以使用擴(kuò)展和&&邏輯短路來(lái)動(dòng)態(tài)檢查是否通過(guò)擴(kuò)展來(lái)添加屬性。當(dāng)您只想返回一個(gè)對(duì)象而不想創(chuàng)建臨時(shí)變量時(shí)，這非常有用。

04、在 JavaScript 中睡眠

有幾次我不得不處理一個(gè)很糟糕的 API，它很慢，而且在它完成時(shí)沒(méi)有鉤子可以說(shuō)。因此，我們只需要等待一秒鐘以確保它已加載。我們還想使用 promises 而不是 setTimeout 回調(diào)，因此使用 sleep 函數(shù)是理想的。我們可以簡(jiǎn)單地等待一秒鐘，然后繼續(xù)前進(jìn)。不需要回調(diào)！

const sleep = (ms) => new Promise(r => setTimeout(r, ms));

這也是如何承諾 setInterval 。

05、交換變量值

在現(xiàn)代 JS 之前，如果你想切換兩個(gè)變量的值，你必須引入第三個(gè)“臨時(shí)”值?，F(xiàn)在我們有了數(shù)組解構(gòu)和賦值，我們可以在一行中完成：

a = 10;b = 5;[a,b] = [b,a];// a is 5, b is 10

06、四舍五入到最接近的 10、100、1000……

如果您需要將數(shù)字粗略計(jì)算到不同級(jí)別，這在算法中很有用。基本上，您要做的是先除以將小數(shù)向上移動(dòng)?！盁o(wú)用”數(shù)字現(xiàn)在是小數(shù)，您可以將它們四舍五入。要將數(shù)字恢復(fù)到所需大小，請(qǐng)將其相乘。被忽略的數(shù)字現(xiàn)在變成零。這是處理金錢(qián)或類(lèi)似對(duì)數(shù)的尺度的巧妙技巧，在某個(gè)點(diǎn)之后，小數(shù)字可以四舍五入。

const rounder = (val, place) => Math.round(val / place) * place;rounder(1549, 100); // 1500rounder(15590, 1000); // 16000

07、使用 Set 刪除重復(fù)項(xiàng)

我剛剛寫(xiě)了關(guān)于 Sets 的文章，顯然這是它們唯一的用途。如果您有一個(gè)數(shù)組并且想要?jiǎng)h除重復(fù)項(xiàng)，則可以使用 Set 來(lái)完成。

const val = [...new Set([1,2,1,3,1,4])];// [ 1, 2, 3, 4 ]

不要忘記將新 Set 散布回常規(guī)數(shù)組中。注意：處理大量列表時(shí)要小心，因?yàn)檫@可能不是性能最高的解決方案。

08、計(jì)數(shù)字符實(shí)例

如果您有一個(gè)數(shù)組（或來(lái)自字符串的數(shù)組）并且想知道字符出現(xiàn)了多少次，那么使用 reduce 有一種非常巧妙的方法可以做到這一點(diǎn)。

const charTotals = (arr) => arr.reduce((totals, char) => ({   ...totals, [char]: (totals[char] || 0) + 1, }), {});charTotals('Hi there!'.split(''));// { H: 1, i: 1, ' ': 1, t: 1, h: 1, e: 2, r: 1, '!': 1 }

這個(gè)可能不是那么有用，但是我想確保您知道兩種技術(shù)：動(dòng)態(tài)對(duì)象屬性和對(duì)象的隱式返回。這兩件事都是至關(guān)重要的知識(shí)，如果您不了解 reduce，請(qǐng)閱讀本文。

09、身份證制造商/柜臺(tái)

我想我需要為反應(yīng)組件動(dòng)態(tài)創(chuàng)建非數(shù)據(jù)庫(kù)臨時(shí) ID，并將經(jīng)典計(jì)數(shù)器壓縮到一行中。每次調(diào)用該函數(shù)時(shí)，計(jì)數(shù)器都會(huì)增加，并且沒(méi)有其他函數(shù)可以改變其內(nèi)部狀態(tài)。它使用閉包、立即調(diào)用函數(shù)表達(dá)式和默認(rèn)值來(lái)保持緊湊。

const counter = ((num = 1) => () => num++)();counter() // 1counter() // 2counter() // 3

還有一個(gè)額外提示，即在函數(shù)參數(shù)中使用默認(rèn)值以避免需要換行。如果你真的想讓起始數(shù)字變得動(dòng)態(tài)，你可以停止讓它成為 IIFE：

const startCounter = (num = 1) => () => num++);const counter100 = startCounter(100)counter100() // 100counter100() // 101counter100() // 102

總結(jié)

你得到了代碼的簡(jiǎn)潔，也有可能你失去代碼的可讀性。

最終如何取舍，這取決于您和您的團(tuán)隊(duì)喜歡什么，在編程的世界里，沒(méi)有完美，只有誰(shuí)更加符合需求，符合項(xiàng)目進(jìn)度。因此，請(qǐng)不要刻意追求簡(jiǎn)潔，保持代碼的可讀性依然重要。

最后，感謝您的閱讀，祝您編碼愉快。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)