今天這篇文章跟大家分享18個JS單行代碼，你只需花幾分鐘時間，即可幫助您了解一些您可能不知道的 JS 知識，如果您已經(jīng)知道了，就當(dāng)作復(fù)習(xí)一下，古人云，溫故而知新嘛。FbY28資訊網(wǎng)——每日最新資訊28at.com

FbY28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在，我們就開始今天的內(nèi)容。FbY28資訊網(wǎng)——每日最新資訊28at.com

1. 生成隨機(jī)字符串

我們可以使用Math.random來生成一個隨機(jī)字符串，當(dāng)我們需要唯一的ID時，這非常方便。FbY28資訊網(wǎng)——每日最新資訊28at.com

const randomString = () => Math.random().toString(36).slice(2)

randomString() // gi1qtdego0brandomString() // f3qixv40motrandomString() // eeelv1pm3ja

2.轉(zhuǎn)義HTML特殊字符

如果您了解 XSS，解決方案之一就是轉(zhuǎn)義 HTML 字符串。FbY28資訊網(wǎng)——每日最新資訊28at.com

const escape = (str) => str.replace(/[&<>"']/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))

escape('<class="medium">Hi Medium.</div>') // <class="medium">Hi Medium.</div>

3.將字符串中每個單詞的第一個字符大寫

此方法用于將字符串中每個單詞的第一個字符大寫。FbY28資訊網(wǎng)——每日最新資訊28at.com

const uppercaseWords = (str) => str.replace(/^(.)|/s+(.)/g, (c) => c.toUpperCase())

uppercaseWords('hello world'); // 'Hello World'

謝謝克里斯托弗·斯特羅利亞·戴維斯，以下是他提供的更簡單的方法。FbY28資訊網(wǎng)——每日最新資訊28at.com

const uppercaseWords = (str) => str.replace(/^(.)|/s+(.)/g, (c) => c.toUpperCase())

4.將字符串轉(zhuǎn)換為駝峰命名法

const toCamelCase = (str) => str.trim().replace(/[-_/s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));

toCamelCase('background-color'); // backgroundColortoCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumbtoCamelCase('_hello_world'); // HelloWorldtoCamelCase('hello_world'); // helloWorld

5.刪除數(shù)組中的重復(fù)值

去除數(shù)組的重復(fù)項是非常有必要的，使用“Set”就會變得非常簡單。FbY28資訊網(wǎng)——每日最新資訊28at.com

const removeDuplicates = (arr) => [...new Set(arr)]

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6])) // [1, 2, 3, 4, 5, 6]

6.展平數(shù)組

我們經(jīng)常在面試中受到考驗，這可以通過兩種方式來實現(xiàn)。FbY28資訊網(wǎng)——每日最新資訊28at.com

const flat = (arr) =>    [].concat.apply(        [],        arr.map((a) => (Array.isArray(a) ? flat(a) : a))    )

// Orconst flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])

flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']

7.從數(shù)組中刪除假值

使用此方法，您將能夠過濾掉數(shù)組中的所有虛假值。FbY28資訊網(wǎng)——每日最新資訊28at.com

const removeFalsy = (arr) => arr.filter(Boolean)

removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])// ['a string', true, 5, 'another string']

8.檢查數(shù)字是偶數(shù)還是奇數(shù)

超級簡單的任務(wù)可以通過使用模運(yùn)算符 (%) 來解決。FbY28資訊網(wǎng)——每日最新資訊28at.com

const isEven = num => num % 2 === 0

isEven(2) // trueisEven(1) // false

9.獲取兩個數(shù)字之間的隨機(jī)整數(shù)

該方法用于獲取兩個數(shù)字之間的隨機(jī)整數(shù)。FbY28資訊網(wǎng)——每日最新資訊28at.com

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)

random(1, 50) // 25random(1, 50) // 34

10. 獲取參數(shù)的平均值

我們可以使用reduce方法來獲取我們在此函數(shù)中提供的參數(shù)的平均值。FbY28資訊網(wǎng)——每日最新資訊28at.com

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5);   // 3

11.將數(shù)字截斷為固定小數(shù)點(diǎn)

使用 Math.pow() 方法，我們可以將數(shù)字截斷到函數(shù)中提供的某個小數(shù)點(diǎn)。FbY28資訊網(wǎng)——每日最新資訊28at.com

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01round(1.555, 2) //1.56

12.計算兩個日期相差天數(shù)

有時候我們需要計算兩個日期之間的天數(shù)，一行代碼就可以完成。FbY28資訊網(wǎng)——每日最新資訊28at.com

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

13.從日期中獲取一年中的第幾天

您想知道某個日期是一年中的第幾天嗎？FbY28資訊網(wǎng)——每日最新資訊28at.com

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))

dayOfYear(new Date()) // 74

14.生成隨機(jī)的十六進(jìn)制顏色

如果您需要隨機(jī)顏色值，這個函數(shù)就可以了。FbY28資訊網(wǎng)——每日最新資訊28at.com

const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`

randomColor() // #9dae4frandomColor() // #6ef10e

15.將RGB顏色轉(zhuǎn)換為十六進(jìn)制

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)

rgbToHex(255, 255, 255)  // '#ffffff'

16.清除所有cookie

const clearCookies = () => document.cookie.split(';').forEach((c) => (document.cookie = c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))

17.檢測深色模式

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

18.交換兩個變量

[foo, bar] = [bar, foo]

19. pause for a while

const pause = (millis) => new Promise(resolve => setTimeout(resolve, millis))

const fn = async () => {  await pause(1000)

console.log('fatfish') // 1s later}fn()

最后

以上就是我今天與你分享的關(guān)于JS的19個一行代碼技巧，希望能夠?qū)δ兴鶐椭兄x您的閱讀，祝編程愉快！FbY28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.rrqrq.com/showinfo-26-136-0.html19個 JavaScript 單行代碼技巧，讓你看起來像個專業(yè)人士

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 自動化在DevOps中的力量：簡化軟件開發(fā)和交付

下一篇： 一篇文章帶你了解 CSS 屬性選擇器