搜尋
首頁頭條11個令人驚訝的JavaScript One-Liner!

如果你想給專業開發人員留下深刻印象,你會怎麼做?很簡單:用簡單的邏輯和盡可能少的程式碼來解決一個複雜的問題。隨著 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刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境