JavaScript!震驚你,只需一行代碼!

語言: CN / TW / HK

前些年的段子裏,總有一些主考官的思想格局打不開,拋出這樣的問題:讓我在10秒鐘內記住你。於是就有了,被打耳光的,被親的,被扒衣服的,摔手機的······但作為程序員,要怎麼用代碼震驚的別人呢?

Talk is cheap, show me the code!

很簡單:用簡單的邏輯和儘可能少的代碼行來解決一個複雜的問題。隨着 ES6 箭頭函數的引入,可以創建看起來優雅而簡單的單行代碼。

在今天的文章中,我將與你一起來學習 11 個罕見但功能強大的單行代碼。現在,準備好,讓我們開始吧!

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、等待一段時間再執行

在這一行中,我們將通過一些異步編程來弄髒我們的代碼。這個想法很簡單,在運行代碼時,如果你想等待一定的時間,這裏是等待單行:

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

在等待單行中,我們創建一個承諾並在給定的時間後使用 setTimeout 函數解決它。

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

在開發 Web 應用程序時,日期通常是實現起來最令人困惑的部分,因為有許多概念很容易被誤算。

這是一個強大的單線計算兩個日期之間的天差。但還有更多事情要做,正如我所做的那樣,你可以創建自己的單線來計算月、年差異等。

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

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

5、重定向到另一個 URL

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

這個單線正是我上面提到的情況,但我認為你可以找到更多的用例。

const redirect = url => location.href = url

location 是全局窗口對象的方法,設置 href 屬性的行為與用户單擊鏈接相同。

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

隨着可以連接到互聯網的設備越來越多,創建響應式網站的必要性也在增加。20 年前,開發者應該考慮網站的桌面版本,但今天超過 50% 的網絡流量來自觸摸移動設備。因此,基於設備的觸控支持採取一些行動是一個非常重要的概念。

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

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

7、 在元素後插入 HTML 字符串

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

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

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

8、隨機排列數組

在開發中打亂一組數據是一個常見的情況,你可以隨時遇到,不幸的是,JavaScript 中沒有內置數組的 shuffle 方法。

但是,這裏有一個你可以每天使用的 shuffle one-liner:

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

它利用數組的排序方法,在數組的前一個元素之前或之後隨機排序。

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

瀏覽器在全局窗口對象上有一個名為 getSelection 的內置方法。使用此方法,你可以創建一個單行,返回網頁上突出顯示或選定的文本。

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

10、獲取隨機布爾值

在開發時,尤其是在寫遊戲代碼時,有時,我們會想隨機採取行動。在這些情況下,下面的單行代碼非常方便。

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

上面的單行代碼有 50/50 的機會返回真或假。因為生成的隨機數大於0.5的概率等於變小的概率。

然而,例如,如果你想得到一個概率為 70% 的隨機布爾值,那麼你可以簡單地將 0.5 更改為 0.7 等等。

11、計算數組的平均值

可以使用多種方法計算數組的平均值。但邏輯對所有人都是一樣的,我們必須得到數組及其長度的總和;然後,通過除法給出平均值。

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

在平均單行中,我們使用 reduce 來獲取一行中數組的總和,而不是使用循環。然後,我們將它除以數組長度,這是一個數組的平均值。

總結

現在,我想你應該知道了 11 個簡單但功能強大的 JavaScript 單行代碼。我之所以試着選擇那些不太流行和不太知名的技巧,主要是希望,這樣可以幫助你學習新的東西。那些我們每天使用的東西,我想你已經會了。

- End -