今天这篇文章，我将分享28个强大的 JavaScript 单行代码，可以节省您的时间并提高您的工作效率。const reversedString = str => str.split('').reverse().join('');reversedString("Hello World"); // dlroW olleH
此函数获取一个字符串，将其拆分为一个字符数组，反转该数组，然后将其重新合并为一个字符串，反转原始字符串。const titleCase = sentence => sentence.replace(/\b\w/g, char => char.toUpperCase());titleCase("hello world"); // Hello World
它使用正则表达式匹配每个单词的首字母并应用 toUpperCase()，将字符串中每个单词的首字母转换为大写。使用解构赋值，我们可以交换两个变量的值，而无需临时变量。const isTruthy = num => !!num;isTruthy(0) // False
const uniqueArray = arr => [...new Set(arr)];uniqueArray([5,5,2,2,2,4,2]) // [ 5, 2, 4 ]
这使用 Set 从数组中删除重复值，返回一个唯一值数组。const truncateString = (str, maxLength) => (str.length > maxLength) ? `${str.slice(0, maxLength)}...` : str;truncateString("Hello World", 8); // Hello Wo...
此函数将字符串缩短到指定的 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.
它将对象转换为 JSON 字符串，然后再转换为对象，从而创建深度克隆。它不处理循环引用或函数。const lastIndexOf = (arr, item) => arr.lastIndexOf(item);lastIndexOf([5, 5, 4 , 2 , 3 , 4], 5) // 1
它使用 lastIndexOf() 方法查找数组中指定项最后一次出现的索引。const mergeArrays = (...arrays) => [].concat(...arrays);mergeArrays([5, 5, 4], [2 , 3 , 4]) // [5, 5, 4, 2, 3, 4]
它使用 concat() 方法将多个数组合并为一个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]
通过生成特定长度的数组并将其映射到正确的范围，这将从头到尾创建一个数字数组。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() 将所有值相加并除以数组的长度来计算数字数组的平均值。const objectToQueryParams = obj => Object.entries(obj).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');objectToQueryParams({ page: 2, limit: 10 }) // page=2&limit=10
它通过使用 encodeURIComponent() 对键和值进行编码并使用 (&) 连接它们，将对象转换为查询字符串格式。const factorial = num => num <= 1 ? 1 : num * factorial(num - 1);factorial(4) // 24
此代码以递归方式计算数字的阶乘，将其乘以每个小于它的数字，直到达到 1。const countVowels = str => (str.match(/[aeiou]/gi) || []).length;countVowels('The quick brown fox jumps over the lazy dog') // 11
此代码使用正则表达式查找字符串中的所有元音并返回计数。如果未找到元音，则返回一个空数组。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
通过反复将随机数转换为 36 进制并选择字符，生成指定长度的随机字母数字字符串。const copyToClipboard = (content) => navigator.clipboard.writeText(content)copyToClipboard("Hello World")
使用 navigator.clipboard.writeText() 方法将指定内容复制到用户的剪贴板。const currentTime = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })currentTime() // 19:52:21
使用 toLocaleTimeString() 并指定必要的选项，以 HH:MM:SS 格式检索当前时间。const isEven = num => num % 2 === 0isEven(1) // falseisEven(2) // true
使用模数运算符 (%) 检查数字是否为偶数。如果除以 2 的余数为 0，则该数字为偶数；否则为奇数。const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matchesconsole.log(isDarkMode) // false
使用 window.matchMedia() 检查用户的系统或浏览器是否设置为暗色模式，以匹配暗色配色方案的媒体查询。const goToTop = () => window.scrollTo(0, 0)goToTop()
通过使用 window.scrollTo() 将 x 和 y 滚动位置都设置为 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（如果日期无效，则会出现 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 的日期数组。它计算两个日期之间的总天数并将它们映射到日期数组。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
这将计算两个日期之间的绝对差（以毫秒为单位），并将其除以一天中的毫秒数，将其转换为天数。
总结
这些 JavaScript 单行代码是有价值的函数，可以简化复杂的任务并提高代码的可读性。通过理解和运用这些技术，您不仅可以展示自己的熟练程度，还可以展示编写高效、清晰且可维护的代码的能力。
该文章在 2024/10/14 12:31:29 编辑过
400 186 1886
