28 個 JavaScript 單行代碼讓你成為 JavaScript 大神
今天這篇文章，我將分享28個強大的 JavaScript 單行代碼，可以節省您的時間并提高您的工作效率。
1. 反轉字符串
const reversedString = str => str.split('').reverse().join('');
reversedString("Hello World"); // dlroW olleH此函數獲取一個字符串，將其拆分為一個字符數組，反轉該數組，然后將其重新合并為一個字符串，反轉原始字符串。
2. 標題大小寫字符串
const titleCase = sentence => sentence.replace(/\b\w/g, char => char.toUpperCase());
titleCase("hello world"); // Hello World它使用正則表達式匹配每個單詞的首字母并應用 toUpperCase()，將字符串中每個單詞的首字母轉換為大寫。
3. 在變量之間交換值
[a, b] = [b, a];使用解構賦值，我們可以交換兩個變量的值，而無需臨時變量。
4. 將數字轉換為布爾值
const isTruthy = num => !!num;
isTruthy(0) // False!! 運算符將任何數字轉換為其布爾值。
5. 從數組中獲取唯一值
const uniqueArray = arr => [...new Set(arr)];
uniqueArray([5,5,2,2,2,4,2]) // [ 5, 2, 4 ]這使用 Set 從數組中刪除重復值，返回一個唯一值數組。
6. 截斷字符串
const truncateString = (str, maxLength) => (str.length > maxLength) ? `${str.slice(0, maxLength)}...` : str;
truncateString("Hello World", 8); // Hello Wo...此函數將字符串縮短到指定的 maxLength，如果字符串長度超過限制，則添加省略號 (…)。
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.它將對象轉換為 JSON 字符串，然后再轉換為對象，從而創建深度克隆。它不處理循環引用或函數。
8. 查找數組中的最后一次出現
const lastIndexOf = (arr, item) => arr.lastIndexOf(item);
lastIndexOf([5, 5, 4 , 2 , 3 , 4], 5) // 1它使用 lastIndexOf() 方法查找數組中指定項最后一次出現的索引。
9. 合并數組
const mergeArrays = (...arrays) => [].concat(...arrays);
mergeArrays([5, 5, 4], [2 , 3 , 4]) // [5, 5, 4, 2, 3, 4]它使用 concat() 方法將多個數組合并為一個
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. 生成數字范圍
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]通過生成特定長度的數組并將其映射到正確的范圍，這將從頭到尾創建一個數字數組。
12. 檢查對象是否為空
const isEmptyObject = obj => Object.keys(obj).length === 0;
isEmptyObject({}) // true
isEmptyObject({ name: 'John' }) // false它通過使用 Object.keys() 驗證對象是否沒有鍵來檢查對象是否為空。
13. 計算數字的平均值
const average = arr => arr.reduce((acc, num) => acc + num, 0) / arr.length;
average([1, 2, 3, 4, 5, 6, 7, 8, 9]) // 5此單行代碼通過使用 reduce() 將所有值相加并除以數組的長度來計算數字數組的平均值。
14. 將對象轉換為查詢參數
const objectToQueryParams = obj => Object.entries(obj).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
objectToQueryParams({ page: 2, limit: 10 }) // page=2&limit=10它通過使用 encodeURIComponent() 對鍵和值進行編碼并使用 (&) 連接它們，將對象轉換為查詢字符串格式。
15. 計算數字的階乘
const factorial = num => num <= 1 ? 1 : num * factorial(num - 1);
factorial(4) // 24此代碼以遞歸方式計算數字的階乘，將其乘以每個小于它的數字，直到達到 1。
16. 計算字符串中的元音
const countVowels = str => (str.match(/[aeiou]/gi) || []).length;
countVowels('The quick brown fox jumps over the lazy dog') // 11此代碼使用正則表達式查找字符串中的所有元音并返回計數。如果未找到元音，則返回一個空數組。
17. 檢查電子郵件是否有效
const isValidEmail = email => /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(email);
isValidEmail("example@email.com") // true
isValidEmail("example") // false此示例再次使用正則表達式來檢查給定的字符串是否為有效的電子郵件格式。
18. 從字符串中刪除空格
const removeWhitespace = str => str.replace(/\s/g, '');
removeWhitespace("H el l o") // Hello此示例使用 replace() 方法和與所有空格字符匹配的正則表達式從字符串中刪除所有空格。
19. 檢查閏年
const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
isLeapYear(2023) // false
isLeapYear(2004) // true通過檢查年份是否能被 4 整除但不能被 100 整除（除非它也能被 400 整除）來確定年份是否為閏年。
20. 生成指定長度的隨機字符串
const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
generateRandomString(8) // 4hq4zm7y通過反復將隨機數轉換為 36 進制并選擇字符，生成指定長度的隨機字母數字字符串。
21. 將內容復制到剪貼板
const copyToClipboard = (content) => navigator.clipboard.writeText(content)
copyToClipboard("Hello World")使用 navigator.clipboard.writeText() 方法將指定內容復制到用戶的剪貼板。
22. 獲取 HH:MM:SS 格式的當前時間
const currentTime = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
currentTime() // 19:52:21使用 toLocaleTimeString() 并指定必要的選項，以 HH:MM:SS 格式檢索當前時間。
23. 檢查數字是偶數還是奇數
const isEven = num => num % 2 === 0
isEven(1) // false
isEven(2) // true使用模數運算符 (%) 檢查數字是否為偶數。如果除以 2 的余數為 0，則該數字為偶數；否則為奇數。
24. 檢測是否為暗色模式
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // false使用 window.matchMedia() 檢查用戶的系統或瀏覽器是否設置為暗色模式，以匹配暗色配色方案的媒體查詢。
25. 滾動到頁面頂部
const goToTop = () => window.scrollTo(0, 0)
goToTop()通過使用 window.scrollTo() 將 x 和 y 滾動位置都設置為 0，將窗口滾動回頁面頂部。
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（如果日期無效，則會出現 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 的日期數組。它計算兩個日期之間的總天數并將它們映射到日期數組。
28. 檢查數組相等性
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這將計算兩個日期之間的絕對差（以毫秒為單位），并將其除以一天中的毫秒數，將其轉換為天數。
總結
這些 JavaScript 單行代碼是有價值的函數，可以簡化復雜的任務并提高代碼的可讀性。通過理解和運用這些技術，您不僅可以展示自己的熟練程度，還可以展示編寫高效、清晰且可維護的代碼的能力。
我希望您在開發過程中發現這些單行代碼很有用。嘗試使用它們，將它們應用于您的項目，并考慮它們如何優化您的解決方案。
