30 個(gè) JavaScript 單行代碼，讓你成為 JavaScript 奇才

作者：佚名 2023-10-10 16:20:38

今天這篇文章，我想跟大家分享一些強(qiáng)大的 JavaScript 單行代碼，因?yàn)槭褂眠@些單行代碼可以幫助你提升工作效率，在這篇文章中，我總結(jié)了30個(gè)實(shí)用的代碼技巧，希望這些代碼技巧對(duì)你有用。

那么，我們現(xiàn)在就開始吧。

1. 反轉(zhuǎn)字符串

const reversedString = str => str.split('').reverse().join('');
reversedString("Hello World"); // dlroW olleH

2.標(biāo)題大小寫為字符串

const titleCase = sentence => sentence.replace(/\b\w/g, char => char.toUpperCase());
titleCase("hello world"); // Hello World

3. 在變量之間交換值

[a, b] = [b, a];

4. 將數(shù)字轉(zhuǎn)換為布爾值

const isTruthy = num => !!num;
isTruthy(0) // False

5. 從數(shù)組中獲取唯一值

const uniqueArray = arr => [...new Set(arr)];
uniqueArray([5,5,2,2,2,4,2]) // [ 5, 2, 4 ]

6. 截?cái)嘧址?/h4>

const truncateString = (str, maxLength) => (str.length > maxLength) ? `${str.slice(0, maxLength)}...` : str;
truncateString("Hello World", 8); // Hello Wo...

7. 深度克隆對(duì)象

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.

8. 查找數(shù)組中最后一次出現(xiàn)的位置

const lastIndexOf = (arr, item) => arr.lastIndexOf(item);
lastIndexOf([5, 5, 4 , 2 , 3 , 4], 5) // 1

9. 合并數(shù)組

const mergeArrays = (...arrays) => [].concat(...arrays);
mergeArrays([5, 5, 4], [2 , 3 , 4]) // [5, 5, 4, 2, 3, 4]

10.找到句子中最長(zhǎng)的單詞

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

11. 生成一個(gè)數(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]

12. 檢查對(duì)象是否為空

const isEmptyObject = obj => Object.keys(obj).length === 0;
isEmptyObject({}) // true
isEmptyObject({ name: 'John' }) // false

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

14. 將對(duì)象轉(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

15. 計(jì)算數(shù)字的階乘

const factorial = num => num <= 1 ? 1 : num * factorial(num - 1);
factorial(4) // 24

16. 計(jì)算字符串中的元音數(shù)

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

19. 檢查閏年

const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
isLeapYear(2023) // false
isLeapYear(2004) // true

20.生成指定長(zhǎng)度的隨機(jī)字符串

const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
generateRandomString(8) // 4hq4zm7y

21.復(fù)制內(nèi)容到剪貼板

const copyToClipboard = (content) => navigator.clipboard.writeText(content)
copyToClipboard("Hello World")

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

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

const isEven = num => num % 2 === 0
isEven(1) // false
isEven(2) // true

24.檢測(cè)是否為深色模式

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

25. 滾動(dòng)到頁(yè)面頂部

const goToTop = () => window.scrollTo(0, 0)
goToTop()

26. 檢查有效日期

const isValidDate = date => date instanceof Date && !isNaN(date);
isValidDate(new Date("This is not date.")) // false
isValidDate(new Date("08-10-2023")) // true

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)]

28.計(jì)算兩個(gè)日期之間的間隔

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)
dayDiff(new Date("2023-10-08"), new Date("1999-04-31")) // 8926

29. 找出該日期是一年中的第幾天

const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayInYear(new Date('2023/10/08'))// 281

30.檢查數(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