[[438770]]

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

在本文中，我將與你分享11 種罕見(jiàn)但功能強(qiáng)大的 one-liner。你準(zhǔn)備好了嗎？讓我們從第一個(gè)開(kāi)始吧！

1、獲取字符串中的字符數(shù)

獲取字符數(shù)是一個(gè)有用的實(shí)用程序，在許多情況下都很有用。你可以使用它來(lái)獲取空格數(shù)和隨后的單詞數(shù)，或者這可用于獲取字符串中某個(gè)分隔符的計(jì)數(shù)。

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

這個(gè)想法非常簡(jiǎn)單。我們使用傳遞的參數(shù) char 拆分字符串并獲得返回?cái)?shù)組的長(zhǎng)度。因?yàn)槊恳淮畏指钭址?，都?huì)比分割器多一根；所以減去 1，我們有一個(gè) characterCount 單行。

2、 檢查對(duì)象是否為空

檢查對(duì)象的空性實(shí)際上比看起來(lái)要困難得多。每次檢查對(duì)象是否等于 {} 都會(huì)返回 false，即使該對(duì)象為空。

幸運(yùn)的是，下面的單行代碼正是我們想要的。

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

在這一行中，我們檢查對(duì)象的鍵的長(zhǎng)度是否等于 0，以及傳遞的參數(shù)是否為實(shí)際對(duì)象。

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

在這個(gè)單行代碼中，我們將接觸一些異步編程。這個(gè)想法很簡(jiǎn)單。

在運(yùn)行代碼時(shí)，如果你想等待一定的時(shí)間，這里是wait one-liner：

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

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

4、獲取兩個(gè)日期之間的天差

在開(kāi)發(fā) Web 應(yīng)用程序時(shí)，日期通常是最容易混淆的部分，因?yàn)橛性S多概念很容易被誤算。

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

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

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

5、重定向到另一個(gè) URL

如果你曾經(jīng)創(chuàng)建過(guò)一個(gè)真實(shí)的網(wǎng)站，我敢肯定你會(huì)遇到身份驗(yàn)證邏輯。例如，非管理員用戶(hù)不應(yīng)該能夠訪(fǎng)問(wèn) /admin 路由。如果用戶(hù)嘗試，那么，你必須將其重定向到另一個(gè) URL。

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

const redirect = url => location.href = url 

location 是全局 window 對(duì)象上的一個(gè)方法，設(shè)置 href 屬性的行為與用戶(hù)點(diǎn)擊鏈接的行為相同。

6、檢查設(shè)備上的觸摸支持

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

因此，基于設(shè)備的觸摸支持采取一些行動(dòng)是一個(gè)如此重要的概念。

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

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

7、在元素后插入一串 HTML

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

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

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

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

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

它利用數(shù)組的排序方法，在數(shù)組的前一個(gè)元素之前或之后進(jìn)行隨機(jī)排序。

9、在網(wǎng)頁(yè)上獲取選定的文本

瀏覽器在全局 windows 對(duì)象上有一個(gè)名為 getSelection 的內(nèi)置方法。

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

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

10、 獲取一個(gè)隨機(jī)布爾值

在編程時(shí)，尤其是在編寫(xiě)游戲時(shí)，有時(shí)你會(huì)想要隨機(jī)采取行動(dòng)。在這種情況下，下面的單行非常方便。

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

上面的單行有 50/50 的機(jī)會(huì)返回 true 或 false。因?yàn)樯傻碾S機(jī)數(shù)大于 0.5 的概率等于較小的概率。

但是，例如，如果你想獲得一個(gè)概率為 70% 錯(cuò)誤的隨機(jī)布爾值，那么，你可以簡(jiǎn)單地將 0.5 更改為 0.7，依此類(lèi)推。

11、計(jì)算數(shù)組的平均值

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

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

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

寫(xiě)在最后

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