今天這篇文章，我將分享28個強大的 JavaScript 單行代碼，可以節(jié)省您的時間并提高您的工作效率。const reversedString = str => str.split('').reverse().join('');reversedString("Hello World"); // dlroW olleH
此函數(shù)獲取一個字符串，將其拆分為一個字符數(shù)組，反轉(zhuǎn)該數(shù)組，然后將其重新合并為一個字符串，反轉(zhuǎn)原始字符串。const titleCase = sentence => sentence.replace(/\b\w/g, char => char.toUpperCase());titleCase("hello world"); // Hello World
它使用正則表達式匹配每個單詞的首字母并應(yīng)用 toUpperCase()，將字符串中每個單詞的首字母轉(zhuǎn)換為大寫。使用解構(gòu)賦值，我們可以交換兩個變量的值，而無需臨時變量。const isTruthy = num => !!num;isTruthy(0) // False
!! 運算符將任何數(shù)字轉(zhuǎn)換為其布爾值。const uniqueArray = arr => [...new Set(arr)];uniqueArray([5,5,2,2,2,4,2]) // [ 5, 2, 4 ]
這使用 Set 從數(shù)組中刪除重復值，返回一個唯一值數(shù)組。const truncateString = (str, maxLength) => (str.length > maxLength) ? `${str.slice(0, maxLength)}...` : str;truncateString("Hello World", 8); // Hello Wo...
此函數(shù)將字符串縮短到指定的 maxLength，如果字符串長度超過限制，則添加省略號 (…)。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àn)的索引。const mergeArrays = (...arrays) => [].concat(...arrays);mergeArrays([5, 5, 4], [2 , 3 , 4]) // [5, 5, 4, 2, 3, 4]
它使用 concat() 方法將多個數(shù)組合并為一個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() 查找并返回句子中最長的單詞。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)建一個數(shù)字數(shù)組。const isEmptyObject = obj => Object.keys(obj).length === 0;isEmptyObject({}) // trueisEmptyObject({ name: 'John' }) // false
它通過使用 Object.keys() 驗證對象是否沒有鍵來檢查對象是否為空。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ù)組的長度來計算數(shù)字數(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() 對鍵和值進行編碼并使用 (&) 連接它們，將對象轉(zhuǎn)換為查詢字符串格式。const factorial = num => num <= 1 ? 1 : num * factorial(num - 1);factorial(4) // 24
此代碼以遞歸方式計算數(shù)字的階乘，將其乘以每個小于它的數(shù)字，直到達到 1。const countVowels = str => (str.match(/[aeiou]/gi) || []).length;countVowels('The quick brown fox jumps over the lazy dog') // 11
此代碼使用正則表達式查找字符串中的所有元音并返回計數(shù)。如果未找到元音，則返回一個空數(shù)組。const isValidEmail = email => /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(email);isValidEmail("example@email.com") // trueisValidEmail("example") // false
此示例再次使用正則表達式來檢查給定的字符串是否為有效的電子郵件格式。const removeWhitespace = str => str.replace(/\s/g, '');removeWhitespace("H el l o") // Hello
此示例使用 replace() 方法和與所有空格字符匹配的正則表達式從字符串中刪除所有空格。const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);isLeapYear(2023) // falseisLeapYear(2004) // true
通過檢查年份是否能被 4 整除但不能被 100 整除（除非它也能被 400 整除）來確定年份是否為閏年。const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')generateRandomString(8) // 4hq4zm7y
通過反復將隨機數(shù)轉(zhuǎn)換為 36 進制并選擇字符，生成指定長度的隨機字母數(shù)字字符串。const copyToClipboard = (content) => navigator.clipboard.writeText(content)copyToClipboard("Hello World")
使用 navigator.clipboard.writeText() 方法將指定內(nèi)容復制到用戶的剪貼板。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. 檢查數(shù)字是偶數(shù)還是奇數(shù)const isEven = num => num % 2 === 0isEven(1) // falseisEven(2) // true
使用模數(shù)運算符 (%) 檢查數(shù)字是否為偶數(shù)。如果除以 2 的余數(shù)為 0，則該數(shù)字為偶數(shù)；否則為奇數(shù)。const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matchesconsole.log(isDarkMode) // false
使用 window.matchMedia() 檢查用戶的系統(tǒng)或瀏覽器是否設(shè)置為暗色模式，以匹配暗色配色方案的媒體查詢。const goToTop = () => window.scrollTo(0, 0)goToTop()
通過使用 window.scrollTo() 將 x 和 y 滾動位置都設(shè)置為 0，將窗口滾動回頁面頂部。const isValidDate = date => date instanceof Date && !isNaN(date);isValidDate(new Date("This is not date.")) // falseisValidDate(new Date("08-10-2023")) // true
這將檢查輸入是否為有效的 Date 對象，并確保它不是 NaN（如果日期無效，則會出現(xiàn) NaN）。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ù)組。它計算兩個日期之間的總天數(shù)并將它們映射到日期數(shù)組。const areArraysEqual = (arr1, arr2) => JSON.stringify(arr1) === JSON.stringify(arr2);areArraysEqual([1, 2, 3], [4, 5, 6]) // falseareArraysEqual([1, 2, 3], [1, 2, 3]) // false
這將計算兩個日期之間的絕對差（以毫秒為單位），并將其除以一天中的毫秒數(shù)，將其轉(zhuǎn)換為天數(shù)。
總結(jié)
這些 JavaScript 單行代碼是有價值的函數(shù)，可以簡化復雜的任務(wù)并提高代碼的可讀性。通過理解和運用這些技術(shù)，您不僅可以展示自己的熟練程度，還可以展示編寫高效、清晰且可維護的代碼的能力。
該文章在 2024/10/14 12:31:29 編輯過
400 186 1886
