25個(gè)有用的 JavaScript 單行代碼

英文 | https://medium.com/@daaaan
翻譯整理 | web前端開發(fā)(ID:web_qdkf)
1、生成一個(gè)范圍內(nèi)的隨機(jī)數(shù)
使用 Math.random() 函數(shù)可以輕松地在 JavaScript 中獲取隨機(jī)值。但是某個(gè)范圍內(nèi)的隨機(jī)數(shù)呢?沒(méi)有標(biāo)準(zhǔn)的 JavaScript 函數(shù)。下面的函數(shù)可以用來(lái)解決這個(gè)問(wèn)題。
請(qǐng)注意,最大值包含在范圍內(nèi), 如果要從范圍中排除最大值,可以從函數(shù)中刪除 + 1。
const randomNumberInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;2、切換布爾值
切換布爾值是所有編程書籍中最古老的技巧之一。一個(gè)非常基本的編程問(wèn)題,可以通過(guò)很多不同的方式來(lái)解決。與其使用 if 語(yǔ)句來(lái)確定將布爾值設(shè)置為什么值,不如使用下面的函數(shù)——在我看來(lái),這是最簡(jiǎn)潔的方法。
const toggle = (value) => value = !value3、對(duì)數(shù)組元素進(jìn)行隨機(jī)排序
可以使用 Math.random() 函數(shù)以隨機(jī)順序?qū)?shù)組元素進(jìn)行排序。這是一個(gè)常見問(wèn)題。但是,不應(yīng)該使用這種排序方式來(lái)實(shí)現(xiàn)完全隨機(jī)性,不應(yīng)為此使用 sort() 函數(shù)。
const sortRandom = (arr) => arr.sort(() => Math.random() - 0.5)4、 字符串大寫
與 Python、C# 和 PHP 等其他流行的編程語(yǔ)言不同,JavaScript 沒(méi)有允許將字符串大寫的函數(shù)。但是,這是一個(gè)非常基本的功能,經(jīng)常被使用。我們可以在這個(gè)函數(shù)中輸入一個(gè)單詞或一個(gè)完整的句子,只要它是一個(gè)字符串。
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)5、檢查變量是否為數(shù)組
有幾種方法可以檢查變量是否為數(shù)組,但這是我的首選方法——干凈且易于理解。
const isArray = (arr) => Array.isArray(arr)6、從 URL 中提取主機(jī)名
盡管這在技術(shù)上不是單行的,但它仍然是一個(gè)非常有用的功能。這對(duì)于檢查鏈接是外部的還是內(nèi)部的很有用。基于此,我們可以為某些鏈接添加不同的行為或樣式。
此函數(shù)也適用于包含端口號(hào)或查詢字符串的 URL。
const extractHostname = (url) => {let hostname = (url.indexOf("http://") > -1) ? url.split('/')[2] : url.split('/')[0]// Remove port number.hostname = hostname.split(':')[0]// Remove querystring.hostname = hostname.split('?')[0]return hostname}
7、 獲取數(shù)組中的唯一值
一個(gè)非常簡(jiǎn)單但非常巧妙的技巧,可以從數(shù)組中刪除所有重復(fù)值。這個(gè)技巧將我們用作第一個(gè)參數(shù)的數(shù)組轉(zhuǎn)換為 Set,然后再轉(zhuǎn)換回?cái)?shù)組。
const uniqueValues = (arr) => [...new Set(arr)]8、檢查數(shù)組中的所有項(xiàng)是否滿足某個(gè)條件
every 方法檢查數(shù)組中的所有項(xiàng)是否滿足某個(gè)條件, 此方法將回調(diào)作為其唯一參數(shù)并返回一個(gè)布爾值。
提示:如果只需要一個(gè)數(shù)組中的一個(gè)元素來(lái)滿足某個(gè)條件,可以使用 some() 方法。
const isOldEnough = (age) => age >= 18const ages = [7, 19, 12, 33, 15, 49]ages.every(isOldEnough) // Results in falseconst olderPeople = [39, 51, 33, 65, 49]olderPeople.every(isOldEnough) // Results in true
9、 根據(jù)語(yǔ)言環(huán)境格式化浮點(diǎn)數(shù)
格式化浮點(diǎn)數(shù)可以通過(guò)多種方式完成。但是,如果正在開發(fā)支持多種語(yǔ)言環(huán)境的應(yīng)用程序,則格式可能會(huì)有所不同,以下單行代碼支持不同語(yǔ)言環(huán)境的格式化浮點(diǎn)數(shù)。
提示:如果我們需要支持多種語(yǔ)言環(huán)境,我們可以為該語(yǔ)言環(huán)境添加第三個(gè)參數(shù)。
const formatFloat = (floatValue, decimals) => parseFloat(floatValue.toFixed(decimals)).toLocaleString("en-US")10、更新查詢字符串
例如,在使用過(guò)濾器時(shí),更新查詢字符串會(huì)非常有用,這是一個(gè)如何使用 JavaScript 的 URLSearchParams 接口更新查詢字符串的示例。
const searchParams = new URLSearchParams(window.location.search)searchParams.set('key', 'value')history.replaceState(null, null, '?' + searchParams.toString())
請(qǐng)注意,傳遞給 URLSearchParams 的 window.location.search 將保持當(dāng)前查詢字符串不變。這意味著,在本例中,key=value 將被添加到當(dāng)前查詢字符串中。如果您想從頭開始構(gòu)建查詢字符串,請(qǐng)忽略 window.location.search 參數(shù)。
11、只允許正數(shù)
有時(shí),我們希望變量只包含正數(shù)。不必使用 if 語(yǔ)句來(lái)檢查數(shù)字是否為負(fù)數(shù),可以使用以下單行:
const getPositiveNumber = (number) => Math.max(number, 0)
12、顯示打印對(duì)話框
以下代碼行將顯示打印對(duì)話框,如果想為用戶提供一種用戶友好的方式來(lái)打印網(wǎng)站上的某個(gè)頁(yè)面,這將很有幫助。
const showPrintDialog = () => window.print()13、將文本復(fù)制到剪貼板
將文本復(fù)制到剪貼板是一個(gè)可以通過(guò)多種方式解決的問(wèn)題。
如果你只關(guān)心支持現(xiàn)代瀏覽器,以下示例就足夠了:
const copyTextToClipboard = async (text) => {await navigator.clipboard.writeText(text)}
這是一個(gè)非常干凈的解決方案,不依賴任何 DOM 元素。
請(qǐng)注意,此函數(shù)是異步的,因?yàn)?writeText 函數(shù)返回一個(gè) Promise。
但是,如果您想支持 Internet Explorer 等舊版瀏覽器,則必須采用以下方法:此解決方案依賴于輸入字段,而不是之前的基于 Promise 的解決方案。
// HTML<input id="input" type="text" value="This is the text that gets copied"><button id="copy">Copy the text</button>// JavaScriptconst copy = () => {const copyText = document.querySelector('#input')copyText.select()document.execCommand('copy')}document.querySelector('#copy').addEventListener('click', copy)
14、將所有值轉(zhuǎn)換為數(shù)組
我們可以在數(shù)組上使用 map 函數(shù)將其所有項(xiàng)轉(zhuǎn)換為某種類型。 在示例中,您將看到我們首先將字符串?dāng)?shù)組轉(zhuǎn)換為數(shù)字?jǐn)?shù)組。 之后,我們將數(shù)字?jǐn)?shù)組轉(zhuǎn)換為布爾值。
const arrayToNumbers = (arr) => arr.map(Number)const numbers = arrayToNumbers(['0', '1', '2', '3'])const arrayToBooleans = (arr) => arr.map(Boolean)const booleans = arrayToBooleans(numbers)
15、計(jì)算兩個(gè)日期之間的天數(shù)
計(jì)算兩個(gè)日期之間的天數(shù),這是開發(fā)中經(jīng)常遇到的事情之一,如果你經(jīng)常使用 JavaScript 編程,使用 Math.abs(),日期參數(shù)的順序無(wú)關(guān)緊要。
const daysBetweenDates = (dateA, dateB) => {const timeDifference = Math.abs(dateA.getTime() - dateB.getTime())// Seconds * hours * milisecondsreturn Math.floor(timeDifference / (3600 * 24 * 1000))}daysBetweenDates(new Date('2020/10/21'), new Date('2020/10/29'))// Result: 8daysBetweenDates(new Date('2020/10/21'), new Date('2021/10/29'))// Result: 373
const people = [{ firstName: 'Laura', lastName: 'Smith' },{ firstName: 'John', lastName: 'Wilson' },{ firstName: 'Ted', lastName: 'Jonhson' }]people.sort((firstEl, secondEl) => {const property = 'lastName'if (firstEl[property] < secondEl[property]) {return -1} else if (firstEl[property] > secondEl[property]) {return 1}return 0})// [{firstName: 'Ted', lastName: 'Jonhson'},// {firstName: 'Laura', lastName: 'Smith'},// {firstName: 'John', lastName: 'Wilson'}]
如果你愿意,你也可以重構(gòu)它,您可能必須在多個(gè)地方使用比較功能。在這種情況下,我建議您使用以下實(shí)現(xiàn),以便您可以重用 compareNames 函數(shù)。
const people = [{ firstName: 'Laura', lastName: 'Smith' },{ firstName: 'John', lastName: 'Wilson' },{ firstName: 'Ted', lastName: 'Jonhson' }]const compareNames = (firstEl, secondEl) => {const property = 'lastName'if (firstEl[property] < secondEl[property]) {return -1} else if (firstEl[property] > secondEl[property]) {return 1}return 0}people.sort(compareNames)// [{firstName: 'Ted', lastName: 'Jonhson'},// {firstName: 'Laura', lastName: 'Smith'},// {firstName: 'John', lastName: 'Wilson'}]
當(dāng)然,正如標(biāo)題已經(jīng)揭示的那樣,您甚至可以在一行中完成此操作。盡管如果您有一個(gè)包含大量邏輯的比較函數(shù),這可能會(huì)很快變得混亂。如果比較功能相當(dāng)簡(jiǎn)單,我只會(huì)選擇這個(gè)實(shí)現(xiàn)。
const people = [{ firstName: 'Laura', lastName: 'Smith' },{ firstName: 'John', lastName: 'Wilson' },{ firstName: 'Ted', lastName: 'Jonhson' }]people.sort((firstEl, secondEl) => (firstEl['lastName'] < secondEl['lastName']) ? -1 : (firstEl['lastName'] > secondEl['lastName']) ? 1 : 0)// [{firstName: 'Ted', lastName: 'Jonhson'},// {firstName: 'Laura', lastName: 'Smith'},// {firstName: 'John', lastName: 'Wilson'}]
17、獲取數(shù)組的交集
獲取數(shù)組的交集可能是我們經(jīng)常遇到的開發(fā)問(wèn)題之一,這可能會(huì)讓您頭疼。但沒(méi)有必要,因?yàn)檫@一切都可以用這個(gè)單線來(lái)完成——這可以是一個(gè)真正的頭痛保護(hù)者。
const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)))intersection([1, 2, 3], [2, 3, 4, 7, 8])// [2, 3]intersection([1, 2, 3], [2, 3, 4, 7, 8], [1, 3, 9])// [3]
請(qǐng)注意,此函數(shù)一次能夠獲得兩個(gè)以上數(shù)組的交集。
18、獲取一個(gè)月的天數(shù)
在沒(méi)有任何外部庫(kù)幫助的情況下在 JavaScript 中處理日期有時(shí)會(huì)很痛苦。但是您是否知道有一個(gè)干凈簡(jiǎn)單的單行線可以幫助您獲得一個(gè)月的天數(shù)?
const daysInMonth = (month, year) => new Date(year, month, 0).getDate()daysInMonth(2, 2024)// 29daysInMonth(12, 2022)// 31
19、 以一種很好的方式交換值
交換兩個(gè)變量的值是你以前可能做過(guò)很多次的事情,執(zhí)行此操作的老式方法是使用臨時(shí)的第三個(gè)變量,如下所示:
let personA = "Laura"let personB = "John"let temp = personApersonA = personBpersonB = tempconsole.log(personA)// "John"console.log(personB)// "Laura"
但是,我們知道在 JavaScript 中交換兩個(gè)變量的值有更簡(jiǎn)單的解決方案嗎?看看下面的代碼行,實(shí)際的交換只發(fā)生在一行中。
let personA = "Laura"let personB = "John"[personA, personB] = [personB, personA]console.log(personA)// 'John'console.log(personB)// 'Laura'
這個(gè)解決方案看起來(lái)更干凈,不是嗎?
20、展平數(shù)組
使用這種簡(jiǎn)潔的單線,扁平化陣列可能是一個(gè)真正的挑戰(zhàn)的日子已經(jīng)結(jié)束。
const flatten = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flatten(b)] : [...a, b]), [])flatten([[1, 2], [3, 4], [5, 6]])// [1, 2, 3, 4, 5, 6]flatten([["some", "text"], "and", ["some", "more"]])// ['some', 'text', 'and', 'some', 'more']
但是還有一種更短的方法可以實(shí)現(xiàn)這一點(diǎn)。我們可以在數(shù)組上調(diào)用 flat 方法并獲得相同的結(jié)果。但是,此功能尚不完全支持。尤其是在老版本的幾個(gè)瀏覽器中,缺乏對(duì)這個(gè)功能的支持。
[[1, 2], [3, 4], [5, 6]].flat()// [1, 2, 3, 4, 5, 6][["some", "text"], "and", ["some", "more"]].flat()// ['some', 'text', 'and', 'some', 'more']
21、用一個(gè)空格替換多個(gè)空格
處理空格可能很煩人,空格最常見的問(wèn)題之一是必須處理多個(gè)空格。幸運(yùn)的是,我們可以用單個(gè)空格替換它們。
const replaceSpaces = (str) => str.replace(/\s\s+/g, ' ')replaceSpaces('Too many spaces')// 'Too many spaces'
有時(shí),我們可能還想替換其他空白字符,例如制表符和換行符。我們也可以在一行中用一個(gè)空格替換它們。
const replaceSpaces = (str) => str.replace(/\s\s+/g, ' ')replaceSpaces('too\n many \twhitespaces \rin here')// 'too many whitespaces in here'
22、 以隨機(jī)順序?qū)?shù)組的元素進(jìn)行排序
有時(shí),希望對(duì)數(shù)組的元素進(jìn)行洗牌。例如,在洗牌時(shí)。沒(méi)有標(biāo)準(zhǔn)的 JavaScript 函數(shù)可以為執(zhí)行此操作。但它可以通過(guò)非常短但功能強(qiáng)大的代碼行來(lái)完成。
請(qǐng)注意,數(shù)組的項(xiàng)目不必是相同的類型。
const sortRandom = (arr) => arr.sort(() => Math.random() - 0.5)sortRandom([1, 2, 3, 4, 5])// [4, 3, 2, 5, 1]sortRandom(["Some text", 2, true, 4, 94.12])// ['Some text', 94.12, 2, true, 4]
23、檢查兩個(gè)對(duì)象是否相等
比較對(duì)象并檢查它們是否相等,在大多數(shù)情況下,比較對(duì)象比只做 objectA === objectB 要復(fù)雜一些。但是,它可以在一行代碼中完成。
這個(gè)函數(shù)的美妙之處在于這個(gè)函數(shù)還可以檢查兩個(gè)以上的對(duì)象。
const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))isEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 })// trueisEqual({ name: 'Frank', age: 41 }, { name: 'Frank', age: 32 })// falseisEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 }, { name: 'Frank', age: 32 })// trueisEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 }, { name: 'Lisa', age: 32 })// false
24、從數(shù)組中獲取隨機(jī)項(xiàng)
從數(shù)組中獲取隨機(jī)項(xiàng)是有時(shí)可以派上用場(chǎng)的另一種強(qiáng)大的單行代碼。不管你是否試圖從一個(gè)充滿數(shù)字的數(shù)組中獲取一個(gè)隨機(jī)值,對(duì)象都是兩者的組合。
const getRandomItem = arr => arr[Math.floor(Math.random() * arr.length)]getRandomItem([1, 7, 9, 3, 6])// 6getRandomItem([{ name: "Ted" }, { name: "Philip" }, { name: "Jack" }])// { name: "Philip" }getRandomItem([{ name: "Ted" }, 1, "Some text", 4, { name: "Jack" }])// 'Some text'
25、Slugify 一個(gè)字符串
如果你想生成人類可讀的 URL,你可以使用slugify 。slug 是代表字符串的規(guī)范化版本。大多數(shù)時(shí)候,標(biāo)題被用于slug。
https://mywebsite.com/my-first-blog-post這就是slug的樣子。my-first-blog-post 源自博客標(biāo)題“我的第一篇博客文章”。
const slugify = (str) => str.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '')slugify('The first post: What is going on?') // 'the-first-post-what-is-going-on'
你可能會(huì)一直看到這些 URL,因?yàn)樗莿?chuàng)建人類可讀 URL 的最常用方法。但是你知道在 JavaScript 中只需要一行代碼就可以對(duì)一個(gè)字符串進(jìn)行 slugify 處理嗎?
寫在最后
以上就是我們匯總整理的25個(gè)關(guān)于 JavaScript的單行代碼列表。希望你學(xué)會(huì)了一兩個(gè)新知識(shí),如果您還知道更多單行代碼技巧,請(qǐng)記得在留言區(qū)與我們分享。
如果你覺(jué)得我今天的內(nèi)容對(duì)你有用的話,請(qǐng)記得點(diǎn)贊我,關(guān)注我,并將它分享給你身邊做開發(fā)的朋友,也許能夠幫助到他們。
最后,感謝你的閱讀,祝編程愉快,我們下次見。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
![]()

