建站
咨詢
售后
建站咨詢
新聞中心
JavaScript 有很多單行代碼的實用例子，它們可以做很多強大的事情，無論你是 JavaScript 新手還是經(jīng)驗豐富的開發(fā)人員，學(xué)習(xí)些新東西總是好的。
創(chuàng)新互聯(lián)建站是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序設(shè)計、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10余年以來，已經(jīng)為1000+成都小攪拌車各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的1000+客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。
在今天的文中，我們將分享一些 JavaScript 單行代碼，希望能幫助您解決一些日常開發(fā)中遇到的JavaScript 問題，希望此列表中有一些您還不知道的單行代碼，也希望你能學(xué)到一兩技巧！
1、生成一個范圍內(nèi)的隨機數(shù)
使用 Math.random() 函數(shù)可以輕松地在 JavaScript 中獲取隨機值。但是某個范圍內(nèi)的隨機數(shù)呢？沒有標準的 JavaScript 函數(shù)。下面的函數(shù)可以用來解決這個問題。
請注意，最大值包含在范圍內(nèi)， 如果要從范圍中排除最大值，可以從函數(shù)中刪除 + 1。
const randomNumberInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
2、切換布爾值
切換布爾值是所有編程書籍中最古老的技巧之一。一個非?；镜木幊虇栴}，可以通過很多不同的方式來解決。與其使用 if 語句來確定將布爾值設(shè)置為什么值，不如使用下面的函數(shù)——在我看來，這是最簡潔的方法。
const toggle = (value) => value = !value
3、對數(shù)組元素進行隨機排序
可以使用 Math.random() 函數(shù)以隨機順序?qū)?shù)組元素進行排序。這是一個常見問題。但是，不應(yīng)該使用這種排序方式來實現(xiàn)完全隨機性，不應(yīng)為此使用 sort() 函數(shù)。
const sortRandom = (arr) => arr.sort(() => Math.random() - 0.5)
4、 字符串大寫
與 Python、C# 和 PHP 等其他流行的編程語言不同，JavaScript 沒有允許將字符串大寫的函數(shù)。但是，這是一個非?；镜墓δ埽?jīng)常被使用。我們可以在這個函數(shù)中輸入一個單詞或一個完整的句子，只要它是一個字符串。
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
5、檢查變量是否為數(shù)組
有幾種方法可以檢查變量是否為數(shù)組，但這是我的首選方法——干凈且易于理解。
const isArray = (arr) => Array.isArray(arr)
6、從 URL 中提取主機名
盡管這在技術(shù)上不是單行的，但它仍然是一個非常有用的功能。這對于檢查鏈接是外部的還是內(nèi)部的很有用。基于此，我們可以為某些鏈接添加不同的行為或樣式。
此函數(shù)也適用于包含端口號或查詢字符串的 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ù)組中的唯一值
一個非常簡單但非常巧妙的技巧，可以從數(shù)組中刪除所有重復(fù)值。這個技巧將我們用作第一個參數(shù)的數(shù)組轉(zhuǎn)換為 Set，然后再轉(zhuǎn)換回數(shù)組。
const uniqueValues = (arr) => [...new Set(arr)]
8、檢查數(shù)組中的所有項是否滿足某個條件
every 方法檢查數(shù)組中的所有項是否滿足某個條件， 此方法將回調(diào)作為其唯一參數(shù)并返回一個布爾值。
提示：如果只需要一個數(shù)組中的一個元素來滿足某個條件，可以使用 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ù)語言環(huán)境格式化浮點數(shù)
格式化浮點數(shù)可以通過多種方式完成。但是，如果正在開發(fā)支持多種語言環(huán)境的應(yīng)用程序，則格式可能會有所不同，以下單行代碼支持不同語言環(huán)境的格式化浮點數(shù)。
提示：如果我們需要支持多種語言環(huán)境，我們可以為該語言環(huán)境添加第三個參數(shù)。
const formatFloat = (floatValue, decimals) => parseFloat(floatValue.toFixed(decimals)).toLocaleString("en-US")
10、更新查詢字符串
例如，在使用過濾器時，更新查詢字符串會非常有用，這是一個如何使用 JavaScript 的 URLSearchParams 接口更新查詢字符串的示例。
const searchParams = new URLSearchParams(window.location.search)
searchParams.set('key', 'value')
history.replaceState(null, null, '?' + searchParams.toString())
請注意，傳遞給 URLSearchParams 的 window.location.search 將保持當前查詢字符串不變。這意味著，在本例中，key=value 將被添加到當前查詢字符串中。如果您想從頭開始構(gòu)建查詢字符串，請忽略 window.location.search 參數(shù)。
11、只允許正數(shù)
有時，我們希望變量只包含正數(shù)。不必使用 if 語句來檢查數(shù)字是否為負數(shù)，可以使用以下單行：
const getPositiveNumber = (number) => Math.max(number, 0)
可以使用此單行代碼代替如下所示的代碼片段：
Math.max() 解決方案更清潔，對吧？
12、顯示打印對話框
以下代碼行將顯示打印對話框，如果想為用戶提供一種用戶友好的方式來打印網(wǎng)站上的某個頁面，這將很有幫助。
const showPrintDialog = () => window.print()
13、將文本復(fù)制到剪貼板
將文本復(fù)制到剪貼板是一個可以通過多種方式解決的問題。
如果你只關(guān)心支持現(xiàn)代瀏覽器，以下示例就足夠了：
const copyTextToClipboard = async (text) => {
await navigator.clipboard.writeText(text)
}這是一個非常干凈的解決方案，不依賴任何 DOM 元素。
請注意，此函數(shù)是異步的，因為 writeText 函數(shù)返回一個 Promise。
但是，如果您想支持 Internet Explorer 等舊版瀏覽器，則必須采用以下方法：此解決方案依賴于輸入字段，而不是之前的基于 Promise 的解決方案。
// HTML
// 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ù)將其所有項轉(zhuǎn)換為某種類型。在示例中，您將看到我們首先將字符串數(shù)組轉(zhuǎn)換為數(shù)字數(shù)組。之后，我們將數(shù)字數(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、計算兩個日期之間的天數(shù)
計算兩個日期之間的天數(shù)，這是開發(fā)中經(jīng)常遇到的事情之一，如果你經(jīng)常使用 JavaScript 編程，使用 Math.abs()，日期參數(shù)的順序無關(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、對對象數(shù)組進行排序
在以特定順序呈現(xiàn)數(shù)據(jù)時，了解如何根據(jù)特定屬性對對象數(shù)組進行排序可能很有用，假設(shè)我們想根據(jù)字母順序在頁面上呈現(xiàn)結(jié)果。這可以在 JavaScript 中很容易地完成，盡管我們可以通過多種方式編寫代碼來對數(shù)組進行排序。在所有示例中，我們都使用了 JavaScript 的排序方法。第一個示例使用箭頭函數(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)它，您可能必須在多個地方使用比較功能。在這種情況下，我建議您使用以下實現(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'}]
當然，正如標題已經(jīng)揭示的那樣，您甚至可以在一行中完成此操作。盡管如果您有一個包含大量邏輯的比較函數(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ā)問題之一，這可能會讓您頭疼。但沒有必要，因為這一切都可以用這個單線來完成——這可以是一個真正的頭痛保護者。
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]
請注意，此函數(shù)一次能夠獲得兩個以上數(shù)組的交集。
18、獲取一個月的天數(shù)
在沒有任何外部庫幫助的情況下在 JavaScript 中處理日期有時會很痛苦。但是您是否知道有一個干凈簡單的單行線可以幫助您獲得一個月的天數(shù)？
const daysInMonth = (month, year) => new Date(year, month, 0).getDate()
daysInMonth(2, 2024)
// 29
daysInMonth(12, 2022)
// 31
19、 以一種很好的方式交換值
交換兩個變量的值是你以前可能做過很多次的事情，執(zhí)行此操作的老式方法是使用臨時的第三個變量，如下所示：
let personA = "Laura"
let personB = "John"
let temp = personA
personA = personB
personB = temp
console.log(personA)
// "John"
console.log(personB)
// "Laura"
但是，我們知道在 JavaScript 中交換兩個變量的值有更簡單的解決方案嗎？看看下面的代碼行，實際的交換只發(fā)生在一行中。
let personA = "Laura"
let personB = "John"
[personA, personB] = [personB, personA]
console.log(personA)
// 'John'
console.log(personB)
// 'Laura'
這個解決方案看起來更干凈，不是嗎？
20、展平數(shù)組
使用這種簡潔的單線，扁平化陣列可能是一個真正的挑戰(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']
但是還有一種更短的方法可以實現(xiàn)這一點。我們可以在數(shù)組上調(diào)用 flat 方法并獲得相同的結(jié)果。但是，此功能尚不完全支持。尤其是在老版本的幾個瀏覽器中，缺乏對這個功能的支持。
[[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、用一個空格替換多個空格
處理空格可能很煩人，空格最常見的問題之一是必須處理多個空格。幸運的是，我們可以用單個空格替換它們。
const replaceSpaces = (str) => str.replace(/\s\s+/g, ' ')
replaceSpaces('Too many spaces')
// 'Too many spaces'
有時，我們可能還想替換其他空白字符，例如制表符和換行符。我們也可以在一行中用一個空格替換它們。
const replaceSpaces = (str) => str.replace(/\s\s+/g, ' ')
replaceSpaces('too\n many \twhitespaces \rin here')
// 'too many whitespaces in here'
22、 以隨機順序?qū)?shù)組的元素進行排序
有時，希望對數(shù)組的元素進行洗牌。例如，在洗牌時。沒有標準的 JavaScript 函數(shù)可以為執(zhí)行此操作。但它可以通過非常短但功能強大的代碼行來完成。
請注意，數(shù)組的項目不必是相同的類型。
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、檢查兩個對象是否相等
比較對象并檢查它們是否相等，在大多數(shù)情況下，比較對象比只做 objectA === objectB 要復(fù)雜一些。但是，它可以在一行代碼中完成。
這個函數(shù)的美妙之處在于這個函數(shù)還可以檢查兩個以上的對象。
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ù)組中獲取隨機項
從數(shù)組中獲取隨機項是有時可以派上用場的另一種強大的單行代碼。不管你是否試圖從一個充滿數(shù)字的數(shù)組中獲取一個隨機值，對象都是兩者的組合。
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 一個字符串
如果你想生成人類可讀的 URL，你可以使用slugify 。slug 是代表字符串的規(guī)范化版本。大多數(shù)時候，標題被用于slug。
https://mywebsite.com/my-first-blog-post
這就是slug的樣子。my-first-blog-post 源自博客標題“我的第一篇博客文章”。
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'
你可能會一直看到這些 URL，因為它是創(chuàng)建人類可讀 URL 的最常用方法。但是你知道在 JavaScript 中只需要一行代碼就可以對一個字符串進行 slugify 處理嗎？
分享文章：25個有用的JavaScript代碼
網(wǎng)站鏈接：http://m.5511xx.com/article/djgpdpi.html
