11 個讓你驚嘆的罕見 JavaScript One-Liner

如果你想給專業(yè)開發(fā)人員留下深刻印象，你會怎么做？很簡單：用簡單的邏輯和盡可能少的代碼來解決一個復雜的問題。隨著 ES6 箭頭函數的引入，可以創(chuàng)建看起來優(yōu)雅和簡單的單行代碼。

在本文中，我將與你分享11 種罕見但功能強大的 one-liner。你準備好了嗎？讓我們從第一個開始吧！

1、獲取字符串中的字符數

獲取字符數是一個有用的實用程序，在許多情況下都很有用。你可以使用它來獲取空格數和隨后的單詞數，或者這可用于獲取字符串中某個分隔符的計數。

const characterCount = (str, char) => str.split(char).length - 1

這個想法非常簡單。我們使用傳遞的參數 char 拆分字符串并獲得返回數組的長度。因為每一次分割字符串，都會比分割器多一根；所以減去 1，我們有一個 characterCount 單行。

2、 檢查對象是否為空

檢查對象的空性實際上比看起來要困難得多。每次檢查對象是否等于 {} 都會返回 false，即使該對象為空。

幸運的是，下面的單行代碼正是我們想要的。

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

在這一行中，我們檢查對象的鍵的長度是否等于 0，以及傳遞的參數是否為實際對象。

3、等待一定時間后執(zhí)行

在這個單行代碼中，我們將接觸一些異步編程。這個想法很簡單。

在運行代碼時，如果你想等待一定的時間，這里是wait one-liner：

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

在wait one-liner中，我們創(chuàng)建一個promise并在給定的時間后使用setTimeout函數解決它。

4、獲取兩個日期之間的天差

在開發(fā) Web 應用程序時，日期通常是最容易混淆的部分，因為有許多概念很容易被誤算。

這是一個強大的單行程序來計算兩個日期之間的天差。但還有更多的事情要做。和我一樣，你可以創(chuàng)建自己的單線來計算月、年差等。

const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))

這種單行背后的邏輯很容易理解。當兩個日期相減時，返回值是以毫秒為單位的差值。要將毫秒轉換為天，我們必須將其分別除以毫秒、秒、分鐘和小時。

5、重定向到另一個 URL

如果你曾經創(chuàng)建過一個真實的網站，我敢肯定你會遇到身份驗證邏輯。例如，非管理員用戶不應該能夠訪問 /admin 路由。如果用戶嘗試，那么，你必須將其重定向到另一個 URL。

這種單線正好適用于我上面提到的情況，但我認為你可以找到更多的用例。

const redirect = url => location.href = url

location 是全局 window 對象上的一個方法，設置 href 屬性的行為與用戶點擊鏈接的行為相同。

6、檢查設備上的觸摸支持

隨著可以連接到互聯(lián)網的設備越來越多，創(chuàng)建響應式網站的必要性也越來越高。20 年前，開發(fā)者應該考慮過桌面版網站，但今天超過 50% 的網絡流量來自觸摸設備。

因此，基于設備的觸摸支持采取一些行動是一個如此重要的概念。

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

在這一行中，我們正在檢查文檔是否支持 touchstart 事件。

7、在元素后插入一串 HTML

開發(fā) Web 應用程序，使用 JavaScript 更新 DOM 是一件很常見的事情。有一些基本的方法可以完成工作，但是當情況變得復雜時，就很難克服。

這是在 HTML 元素之后立即注入一串 HTML 的單行代碼。通過幾分鐘的思考和谷歌搜索，我相信你可以找到這個單行的之前版本。

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

8、打亂數組在開發(fā)中混洗一組數據是你隨時可能遇到的常見情況，不幸的是，JavaScript 中沒有內置數組的混洗方法。但是，這是你可以每天使用的 shuffle one-liner：

const shuffle = arr => arr.sort(() => 0.5 - Math.random())

它利用數組的排序方法，在數組的前一個元素之前或之后進行隨機排序。

9、在網頁上獲取選定的文本

瀏覽器在全局 windows 對象上有一個名為 getSelection 的內置方法。

使用此方法，你可以創(chuàng)建一個單行，返回網頁上突出顯示或選定的文本。

const getSelectedText = () => window.getSelection().toString()

10、 獲取一個隨機布爾值

在編程時，尤其是在編寫游戲時，有時你會想要隨機采取行動。在這種情況下，下面的單行非常方便。

const getRandomBoolean = () => Math.random() >= 0.5

上面的單行有 50/50 的機會返回 true 或 false。因為生成的隨機數大于 0.5 的概率等于較小的概率。

但是，例如，如果你想獲得一個概率為 70% 錯誤的隨機布爾值，那么，你可以簡單地將 0.5 更改為 0.7，依此類推。

11、計算數組的平均值

可以使用多種方法計算數組的平均值。但道理對所有人都是一樣的。你必須獲得數組及其長度的總和；然后除法給出平均值。

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length

在平均單行中，我們使用 reduce 來獲取一行中的數組的總和，而不是使用循環(huán)。然后，我們將其除以數組長度，這是數組的平均值。

寫在最后

今天的內容，就是這樣，現(xiàn)在，我想你已經了解了 11 個簡單但功能強大的 JavaScript 單行程序。我試著選擇那些不是很受歡迎和知名度的東西，這樣你就可以學習新東西。我每天都在使用它們，我想對你也會有所幫助。

感謝你的閱讀，如果你喜歡它，一定要點贊，如果你對這篇文章有什么想說的，請在留言區(qū)告訴我們。

翻譯 | 楊小二

來自：Web前端開發(fā)