28 個(gè) JavaScript 單行代碼讓你成為 JavaScript 大神
今天這篇文章，我將分享28個(gè)強(qiáng)大的 JavaScript 單行代碼，可以節(jié)省您的時(shí)間并提高您的工作效率。
1. 反轉(zhuǎn)字符串
const reversedString = str => str.split('').reverse().join('');
reversedString("Hello World"); // dlroW olleH此函數(shù)獲取一個(gè)字符串，將其拆分為一個(gè)字符數(shù)組，反轉(zhuǎn)該數(shù)組，然后將其重新合并為一個(gè)字符串，反轉(zhuǎn)原始字符串。
2. 標(biāo)題大小寫字符串
const titleCase = sentence => sentence.replace(/\b\w/g, char => char.toUpperCase());
titleCase("hello world"); // Hello World它使用正則表達(dá)式匹配每個(gè)單詞的首字母并應(yīng)用 toUpperCase()，將字符串中每個(gè)單詞的首字母轉(zhuǎn)換為大寫。
3. 在變量之間交換值
[a, b] = [b, a];使用解構(gòu)賦值，我們可以交換兩個(gè)變量的值，而無需臨時(shí)變量。
4. 將數(shù)字轉(zhuǎn)換為布爾值
const isTruthy = num => !!num;
isTruthy(0) // False!! 運(yùn)算符將任何數(shù)字轉(zhuǎn)換為其布爾值。
5. 從數(shù)組中獲取唯一值
const uniqueArray = arr => [...new Set(arr)];
uniqueArray([5,5,2,2,2,4,2]) // [ 5, 2, 4 ]這使用 Set 從數(shù)組中刪除重復(fù)值，返回一個(gè)唯一值數(shù)組。
6. 截?cái)嘧址?/h4>const truncateString = (str, maxLength) => (str.length > maxLength) ? `${str.slice(0, maxLength)}...` : str;
truncateString("Hello World", 8); // Hello Wo...
const truncateString = (str, maxLength) => (str.length > maxLength) ? `${str.slice(0, maxLength)}...` : str;
truncateString("Hello World", 8); // Hello Wo...此函數(shù)將字符串縮短到指定的 maxLength，如果字符串長度超過限制，則添加省略號(hào) (…)。
7. 深度克隆對象
const deepClone = obj => JSON.parse(JSON.stringify(obj));const obj1 = { name: "John", age: 40};
const obj2 = deepClone(obj1);
obj2.age = 20;
console.log(obj1.age); // 40
//This method works for most objects, but it has some limitations. Objects with circular references or functions cannot be converted to JSON, so this method will not work for those types of objects.它將對象轉(zhuǎn)換為 JSON 字符串，然后再轉(zhuǎn)換為對象，從而創(chuàng)建深度克隆。它不處理循環(huán)引用或函數(shù)。
8. 查找數(shù)組中的最后一次出現(xiàn)
const lastIndexOf = (arr, item) => arr.lastIndexOf(item);
lastIndexOf([5, 5, 4 , 2 , 3 , 4], 5) // 1它使用 lastIndexOf() 方法查找數(shù)組中指定項(xiàng)最后一次出現(xiàn)的索引。
9. 合并數(shù)組
const mergeArrays = (...arrays) => [].concat(...arrays);
mergeArrays([5, 5, 4], [2 , 3 , 4]) // [5, 5, 4, 2, 3, 4]它使用 concat() 方法將多個(gè)數(shù)組合并為一個(gè)
10. 查找句子中最長的單詞
const longestWord = sentence => sentence.split(' ').reduce((longest, word) => word.length > longest.length ? word : longest, '');
longestWord("The quick brown fox jumped over the lazy dog") // jumped它使用空格作為分隔符將句子拆分為單詞，然后使用 reduce() 查找并返回句子中最長的單詞。
11. 生成數(shù)字范圍
const range = (start, end) => [...Array(end - start + 1)].map((_, i) => i + start);
range(5, 15); // [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]通過生成特定長度的數(shù)組并將其映射到正確的范圍，這將從頭到尾創(chuàng)建一個(gè)數(shù)字?jǐn)?shù)組。
12. 檢查對象是否為空
const isEmptyObject = obj => Object.keys(obj).length === 0;
isEmptyObject({}) // true
isEmptyObject({ name: 'John' }) // false它通過使用 Object.keys() 驗(yàn)證對象是否沒有鍵來檢查對象是否為空。
13. 計(jì)算數(shù)字的平均值
const average = arr => arr.reduce((acc, num) => acc + num, 0) / arr.length;
average([1, 2, 3, 4, 5, 6, 7, 8, 9]) // 5此單行代碼通過使用 reduce() 將所有值相加并除以數(shù)組的長度來計(jì)算數(shù)字?jǐn)?shù)組的平均值。
14. 將對象轉(zhuǎn)換為查詢參數(shù)
const objectToQueryParams = obj => Object.entries(obj).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
objectToQueryParams({ page: 2, limit: 10 }) // page=2&limit=10它通過使用 encodeURIComponent() 對鍵和值進(jìn)行編碼并使用 (&) 連接它們，將對象轉(zhuǎn)換為查詢字符串格式。
15. 計(jì)算數(shù)字的階乘
const factorial = num => num <= 1 ? 1 : num * factorial(num - 1);
factorial(4) // 24此代碼以遞歸方式計(jì)算數(shù)字的階乘，將其乘以每個(gè)小于它的數(shù)字，直到達(dá)到 1。
16. 計(jì)算字符串中的元音
const countVowels = str => (str.match(/[aeiou]/gi) || []).length;
countVowels('The quick brown fox jumps over the lazy dog') // 11此代碼使用正則表達(dá)式查找字符串中的所有元音并返回計(jì)數(shù)。如果未找到元音，則返回一個(gè)空數(shù)組。
17. 檢查電子郵件是否有效
const isValidEmail = email => /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(email);
isValidEmail("example@email.com") // true
isValidEmail("example") // false此示例再次使用正則表達(dá)式來檢查給定的字符串是否為有效的電子郵件格式。
18. 從字符串中刪除空格
const removeWhitespace = str => str.replace(/\s/g, '');
removeWhitespace("H el l o") // Hello此示例使用 replace() 方法和與所有空格字符匹配的正則表達(dá)式從字符串中刪除所有空格。
19. 檢查閏年
const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
isLeapYear(2023) // false
isLeapYear(2004) // true通過檢查年份是否能被 4 整除但不能被 100 整除（除非它也能被 400 整除）來確定年份是否為閏年。
20. 生成指定長度的隨機(jī)字符串
const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
generateRandomString(8) // 4hq4zm7y通過反復(fù)將隨機(jī)數(shù)轉(zhuǎn)換為 36 進(jìn)制并選擇字符，生成指定長度的隨機(jī)字母數(shù)字字符串。
21. 將內(nèi)容復(fù)制到剪貼板
const copyToClipboard = (content) => navigator.clipboard.writeText(content)
copyToClipboard("Hello World")使用 navigator.clipboard.writeText() 方法將指定內(nèi)容復(fù)制到用戶的剪貼板。
22. 獲取 HH:MM:SS 格式的當(dāng)前時(shí)間
const currentTime = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
currentTime() // 19:52:21使用 toLocaleTimeString() 并指定必要的選項(xiàng)，以 HH:MM:SS 格式檢索當(dāng)前時(shí)間。
23. 檢查數(shù)字是偶數(shù)還是奇數(shù)
const isEven = num => num % 2 === 0
isEven(1) // false
isEven(2) // true使用模數(shù)運(yùn)算符 (%) 檢查數(shù)字是否為偶數(shù)。如果除以 2 的余數(shù)為 0，則該數(shù)字為偶數(shù)；否則為奇數(shù)。
24. 檢測是否為暗色模式
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // false使用 window.matchMedia() 檢查用戶的系統(tǒng)或?yàn)g覽器是否設(shè)置為暗色模式，以匹配暗色配色方案的媒體查詢。
25. 滾動(dòng)到頁面頂部
const goToTop = () => window.scrollTo(0, 0)
goToTop()通過使用 window.scrollTo() 將 x 和 y 滾動(dòng)位置都設(shè)置為 0，將窗口滾動(dòng)回頁面頂部。
26. 檢查日期是否有效
const isValidDate = date => date instanceof Date && !isNaN(date);
isValidDate(new Date("This is not date.")) // false
isValidDate(new Date("08-10-2023")) // true這將檢查輸入是否為有效的 Date 對象，并確保它不是 NaN（如果日期無效，則會(huì)出現(xiàn) NaN）。
27. 生成日期范圍
const generateDateRange = (startDate, endDate) => Array.from({ length: (endDate - startDate) / (24 * 60 * 60 * 1000) + 1 }, (_, index) => new Date(startDate.getTime() + index * 24 * 60 * 60 * 1000));
generateDateRange(new Date("2023-09-31"), new Date("2023-10-08")) // [Sun Oct 01 2023 05:30:00 GMT+0530 (India Standard Time), Mon Oct 02 2023 05:30:00 GMT+0530 (India Standard Time), Tue Oct 03 2023 05:30:00 GMT+0530 (India Standard Time), Wed Oct 04 2023 05:30:00 GMT+0530 (India Standard Time), Thu Oct 05 2023 05:30:00 GMT+0530 (India Standard Time), Fri Oct 06 2023 05:30:00 GMT+0530 (India Standard Time), Sat Oct 07 2023 05:30:00 GMT+0530 (India Standard Time), Sun Oct 08 2023 05:30:00 GMT+0530 (India Standard Time)]這將生成從 startDate 到 endDate 的日期數(shù)組。它計(jì)算兩個(gè)日期之間的總天數(shù)并將它們映射到日期數(shù)組。
28. 檢查數(shù)組相等性
const areArraysEqual = (arr1, arr2) => JSON.stringify(arr1) === JSON.stringify(arr2);
areArraysEqual([1, 2, 3], [4, 5, 6]) // false
areArraysEqual([1, 2, 3], [1, 2, 3]) // false這將計(jì)算兩個(gè)日期之間的絕對差（以毫秒為單位），并將其除以一天中的毫秒數(shù)，將其轉(zhuǎn)換為天數(shù)。
總結(jié)
這些 JavaScript 單行代碼是有價(jià)值的函數(shù)，可以簡化復(fù)雜的任務(wù)并提高代碼的可讀性。通過理解和運(yùn)用這些技術(shù)，您不僅可以展示自己的熟練程度，還可以展示編寫高效、清晰且可維護(hù)的代碼的能力。
我希望您在開發(fā)過程中發(fā)現(xiàn)這些單行代碼很有用。嘗試使用它們，將它們應(yīng)用于您的項(xiàng)目，并考慮它們?nèi)绾蝺?yōu)化您的解決方案。
