首頁  >  文章  >  11個令人驚訝的JavaScript One-Liner!

11個令人驚訝的JavaScript One-Liner!

藏色散人
藏色散人轉載
2021-12-06 15:15:262827瀏覽

如果你想給專業開發人員留下深刻印象,你會怎麼做?很簡單:用簡單的邏輯和盡可能少的程式碼來解決一個複雜的問題。隨著 ES6 箭頭函數的引入,可以創建看起來優雅和簡單的單行程式碼。

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

1、取得字串中的字元數

取得字元數是一個有用的實用程序,在許多情況下都很有用。你可以使用它來取得空格數和隨後的單字數,或者這可用於取得字串中某個分隔符號的計數。

11個令人驚訝的JavaScript One-Liner!

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

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

2、 檢查物件是否為空

檢查物件的空性實際上比看起來困難得多。每次檢查物件是否等於 {} 都會傳回 false,即使該物件為空。

幸運的是,下面的單行程式碼正是我們想要的。

11個令人驚訝的JavaScript One-Liner!

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

在這一行中,我們檢查物件的鍵的長度是否等於 0,以及傳遞的參數是否為實際物件。

3、等待一定時間後執行

在這個單行程式碼中,我們將接觸一些非同步程式設計。這個想法很簡單。

在執行程式碼時,如果你想等待一定的時間,這裡是wait one-liner:

11個令人驚訝的JavaScript One-Liner!

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

在wait one-liner中,我們建立一個promise並在給定的時間後使用setTimeout函數解決它。

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

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

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

11個令人驚訝的JavaScript One-Liner!

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

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

5、重定向到另一個 URL

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

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

11個令人驚訝的JavaScript One-Liner!

const redirect = url => location.href = url

location 是全域 window 物件上的一個方法,設定 href 屬性的行為與使用者點擊連結的行為相同。

6、檢查裝置上的觸控支援

隨著可以連接到網路的裝置越來越多,創建響應式網站的必要性也越來越高。 20 年前,開發者應該考慮過桌面版網站,但今天超過 50% 的網路流量來自觸控裝置。

因此,基於裝置的觸控支援採取一些行動是一個如此重要的概念。

11個令人驚訝的JavaScript One-Liner!

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

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

7、在元素後面插入一串 HTML

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

這是在 HTML 元素之後立即註入一串 HTML 的單行程式碼。透過幾分鐘的思考和谷歌搜索,我相信你可以找到這個單行的先前版本。

11個令人驚訝的JavaScript One-Liner!

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

8、打亂陣列在開發中混洗一組資料是你隨時可能遇到的常見情況,不幸的是,JavaScript中沒有內建數組的混洗方法。但是,這是你可以每天使用的 shuffle one-liner:

11個令人驚訝的JavaScript One-Liner!

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

它利用数组的排序方法,在数组的前一个元素之前或之后进行随机排序。

9、在网页上获取选定的文本

浏览器在全局 windows 对象上有一个名为 getSelection 的内置方法。

使用此方法,你可以创建一个单行,返回网页上突出显示或选定的文本。

11個令人驚訝的JavaScript One-Liner!

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

10、 获取一个随机布尔值

在编程时,尤其是在编写游戏时,有时你会想要随机采取行动。在这种情况下,下面的单行非常方便。

11個令人驚訝的JavaScript One-Liner!

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

上面的单行有 50/50 的机会返回 true 或 false。因为生成的随机数大于 0.5 的概率等于较小的概率。

但是,例如,如果你想获得一个概率为 70% 错误的随机布尔值,那么,你可以简单地将 0.5 更改为 0.7,依此类推。

11、计算数组的平均值

可以使用多种方法计算数组的平均值。但道理对所有人都是一样的。你必须获得数组及其长度的总和;然后除法给出平均值。

11個令人驚訝的JavaScript One-Liner!

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

在平均单行中,我们使用 reduce 来获取一行中的数组的总和,而不是使用循环。然后,我们将其除以数组长度,这是数组的平均值。

写在最后

今天的内容,就是这样,现在,我想你已经了解了 11 个简单但功能强大的 JavaScript 单行程序。我试着选择那些不是很受欢迎和知名度的东西,这样你就可以学习新东西。我每天都在使用它们,我想对你也会有所帮助。

感谢你的阅读,如果你喜欢它,一定要点赞,如果你对这篇文章有什么想说的,请在留言区告诉我们。

翻译: 杨小二

英文:

https://betterprogramming.pub/11-rare-javascript-one-liners-that-will-amaze-you-331659832301

陳述:
本文轉載於:Web前端开发。如有侵權,請聯絡admin@php.cn刪除