25個(gè)有用的JavaScript代碼
JavaScript 有很多單行代碼的實(shí)用例子，它們可以做很多強(qiáng)大的事情，無(wú)論你是 JavaScript 新手還是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，學(xué)習(xí)些新東西總是好的。
在今天的文中，我們將分享一些 JavaScript 單行代碼，希望能幫助您解決一些日常開(kāi)發(fā)中遇到的JavaScript 問(wèn)題，希望此列表中有一些您還不知道的單行代碼，也希望你能學(xué)到一兩技巧！
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、切換布爾值
切換布爾值是所有編程書(shū)籍中最古老的技巧之一。一個(gè)非?；镜木幊虇?wèn)題，可以通過(guò)很多不同的方式來(lái)解決。與其使用 if 語(yǔ)句來(lái)確定將布爾值設(shè)置為什么值，不如使用下面的函數(shù)——在我看來(lái)，這是最簡(jiǎn)潔的方法。
const toggle = (value) => value = !value
3、對(duì)數(shù)組元素進(jìn)行隨機(jī)排序
可以使用 Math.random() 函數(shù)以隨機(jī)順序?qū)?shù)組元素進(jìn)行排序。這是一個(gè)常見(jiàn)問(wèn)題。但是，不應(yīng)該使用這種排序方式來(lái)實(shí)現(xiàn)完全隨機(jī)性，不應(yīng)為此使用 sort() 函數(shù)。
const sortRandom = (arr) => arr.sort(() => Math.random() - 0.5)
4、 字符串大寫(xiě)
與 Python、C# 和 PHP 等其他流行的編程語(yǔ)言不同，JavaScript 沒(méi)有允許將字符串大寫(xiě)的函數(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)或查詢(xún)字符串的 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)是否滿(mǎn)足某個(gè)條件
every 方法檢查數(shù)組中的所有項(xiàng)是否滿(mǎn)足某個(gè)條件， 此方法將回調(diào)作為其唯一參數(shù)并返回一個(gè)布爾值。
提示：如果只需要一個(gè)數(shù)組中的一個(gè)元素來(lái)滿(mǎn)足某個(gè)條件，可以使用 some() 方法。
const isOldEnough = (age) => age >= 18
const ages = [7, 19, 12, 33, 15, 49]
ages.every(isOldEnough) // Results in false
const olderPeople = [39, 51, 33, 65, 49]
olderPeople.every(isOldEnough) // Results in true
9、 根據(jù)語(yǔ)言環(huán)境格式化浮點(diǎn)數(shù)
格式化浮點(diǎn)數(shù)可以通過(guò)多種方式完成。但是，如果正在開(kāi)發(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、更新查詢(xún)字符串
例如，在使用過(guò)濾器時(shí)，更新查詢(xún)字符串會(huì)非常有用，這是一個(gè)如何使用 JavaScript 的 URLSearchParams 接口更新查詢(xún)字符串的示例。
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)前查詢(xún)字符串不變。這意味著，在本例中，key=value 將被添加到當(dāng)前查詢(xún)字符串中。如果您想從頭開(kāi)始構(gòu)建查詢(xún)字符串，請(qǐng)忽略 window.location.search 參數(shù)。
11、只允許正數(shù)
有時(shí)，我們希望變量只包含正數(shù)。不必使用 if 語(yǔ)句來(lái)檢查數(shù)字是否為負(fù)數(shù)，可以使用以下單行：
const getPositiveNumber = (number) => Math.max(number, 0)
可以使用此單行代碼代替如下所示的代碼片段：
Math.max() 解決方案更清潔，對(duì)吧？
12、顯示打印對(duì)話(huà)框
以下代碼行將顯示打印對(duì)話(huà)框，如果想為用戶(hù)提供一種用戶(hù)友好的方式來(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è)非常干凈的解決方案，不依賴(lài)任何 DOM 元素。
請(qǐng)注意，此函數(shù)是異步的，因?yàn)?writeText 函數(shù)返回一個(gè) Promise。
但是，如果您想支持 Internet Explorer 等舊版瀏覽器，則必須采用以下方法：此解決方案依賴(lài)于輸入字段，而不是之前的基于 Promise 的解決方案。
// HTML
<input id="input" type="text" value="This is the text that gets copied">
<button id="copy">Copy the text</button>
// JavaScript
const 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)換為某種類(lèi)型。在示例中，您將看到我們首先將字符串?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ù)，這是開(kāi)發(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 * miliseconds
return Math.floor(timeDifference / (3600 * 24 * 1000))
}
daysBetweenDates(new Date('2020/10/21'), new Date('2020/10/29'))
// Result: 8
daysBetweenDates(new Date('2020/10/21'), new Date('2021/10/29'))
// Result: 373
16、對(duì)對(duì)象數(shù)組進(jìn)行排序
在以特定順序呈現(xiàn)數(shù)據(jù)時(shí)，了解如何根據(jù)特定屬性對(duì)對(duì)象數(shù)組進(jìn)行排序可能很有用，假設(shè)我們想根據(jù)字母順序在頁(yè)面上呈現(xiàn)結(jié)果。這可以在 JavaScript 中很容易地完成，盡管我們可以通過(guò)多種方式編寫(xiě)代碼來(lái)對(duì)數(shù)組進(jìn)行排序。在所有示例中，我們都使用了 JavaScript 的排序方法。第一個(gè)示例使用箭頭函數(shù)。
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)常遇到的開(kāi)發(fā)問(wèn)題之一，這可能會(huì)讓您頭疼。但沒(méi)有必要，因?yàn)檫@一切都可以用這個(gè)單線(xiàn)來(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)單的單行線(xiàn)可以幫助您獲得一個(gè)月的天數(shù)？
const daysInMonth = (month, year) => new Date(year, month, 0).getDate()
daysInMonth(2, 2024)
// 29
daysInMonth(12, 2022)
// 31
19、 以一種很好的方式交換值
交換兩個(gè)變量的值是你以前可能做過(guò)很多次的事情，執(zhí)行此操作的老式方法是使用臨時(shí)的第三個(gè)變量，如下所示：
let personA = "Laura"
let personB = "John"
let temp = personA
personA = personB
personB = temp
console.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)潔的單線(xià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è)空格
處理空格可能很煩人，空格最常見(jiàn)的問(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)目不必是相同的類(lèi)型。
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 })
// true
isEqual({ name: 'Frank', age: 41 }, { name: 'Frank', age: 32 })
// false
isEqual({ name: 'Frank', age: 32 }, { name: 'Frank', age: 32 }, { name: 'Frank', age: 32 })
// true
isEqual({ 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è)充滿(mǎn)數(shù)字的數(shù)組中獲取一個(gè)隨機(jī)值，對(duì)象都是兩者的組合。
const getRandomItem = arr => arr[Math.floor(Math.random() * arr.length)]
getRandomItem([1, 7, 9, 3, 6])
// 6
getRandomItem([{ name: "Ted" }, { name: "Philip" }, { name: "Jack" }])
// { name: "Philip" }
getRandomItem([{ name: "Ted" }, 1, "Some text", 4, { name: "Jack" }])
// 'Some text'
25、Slugify 一個(gè)字符串
如果你想生成人類(lèi)可讀的 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)建人類(lèi)可讀 URL 的最常用方法。但是你知道在 JavaScript 中只需要一行代碼就可以對(duì)一個(gè)字符串進(jìn)行 slugify 處理嗎？
往期干貨：
26個(gè)經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費(fèi)）
干貨~~~2021最新前端學(xué)習(xí)視頻~~速度領(lǐng)取
前端書(shū)籍-前端290本高清pdf電子書(shū)打包下載
點(diǎn)贊和在看就是最大的支持??