<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

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

          共 9879字,需瀏覽 20分鐘

           ·

          2022-07-26 18:17

          英文 | https://medium.com/@daaaan

          翻譯整理 | web前端開發(fā)(ID:web_qdkf)


          JavaScript 有很多單行代碼的實(shí)用例子,它們可以做很多強(qiáng)大的事情,無(wú)論你是 JavaScript 新手還是經(jīng)驗(yàn)豐富的開發(fā)人員,學(xué)習(xí)些新東西總是好的。 
          在今天的文中,我們將分享一些 JavaScript 單行代碼,希望能幫助您解決一些日常開發(fā)中遇到的JavaScript 問(wèn)題,希望此列表中有一些您還不知道的單行代碼,也希望你能學(xué)到一兩技巧
          我們現(xiàn)在開始吧。

          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 = !value

          3、對(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)
          可以使用此單行代碼代替如下所示的代碼片段:

          Math.max() 解決方案更清潔,對(duì)吧?

          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 * miliseconds  return 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
          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ò)多種方式編寫代碼來(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)常遇到的開發(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)// 29
          daysInMonth(12, 2022)// 31

          19、 以一種很好的方式交換值

          交換兩個(gè)變量的值是你以前可能做過(guò)很多次的事情,執(zhí)行此操作的老式方法是使用臨時(shí)的第三個(gè)變量,如下所示:

          let personA = "Laura"let personB = "John"
          let temp = personApersonA = personBpersonB = 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)潔的單線,扁平化陣列可能是一個(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 })// 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è)充滿數(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è)字符串

          如果你想生成人類可讀的 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)

          瀏覽 31
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  一区二区视频在线播放 | 黄色毛片电影 | 亚洲色图一区二区 | 国产又爽 又黄 免费观看视频 | 久久三级电影 |