30 个 JavaScript 单行代码,让你成为 JavaScript 奇才
创始人
2025-07-03 12:00:53
0

今天这篇文章,我想跟大家分享一些强大的 JavaScript 单行代码,因为使用这些单行代码可以帮助你提升工作效率,在这篇文章中,我总结了30个实用的代码技巧,希望这些代码技巧对你有用。

那么,我们现在就开始吧。

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

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 ]

6. 截断字符串

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

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.

8. 查找数组中最后一次出现的位置

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

9. 合并数组

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

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

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

13. 计算数字的平均值

const average = arr => arr.reduce((acc, num) => acc + num, 0) / arr.length;
average([1, 2, 3, 4, 5, 6, 7, 8, 9]) // 5

14. 将对象转换为查询参数

const objectToQueryParams = obj => Object.entries(obj).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
objectToQueryParams({ page: 2, limit: 10 }) // page=2&limit=10

15. 计算数字的阶乘

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

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

19. 检查闰年

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

20.生成指定长度的随机字符串

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

21.复制内容到剪贴板

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

22. 获取 HH:MM:SS 格式的当前时间

const currentTime = () => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
currentTime() // 19:52:21

23. 检查数字是偶数还是奇数

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

24.检测是否为深色模式

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

25. 滚动到页面顶部

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.计算两个日期之间的间隔

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.检查数组是否相等

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 行话是很有价值的工具,可以简化复杂的任务并提高代码的可读性。通过理解和利用这些技术,不仅展示了自己的熟练程度,还展示了编写高效、清晰和可维护代码的能力。

我希望你能发现它们有用之处,让它们适应你的项目,帮助你提升开发效率,不断优化你的解决方案。

相关内容

热门资讯

PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候,笔者扑哧笑了,不是笑这款笔记本,而是笑这款产品的颜色...
什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力,更是有效的利用了资源,提高了效率。那么我们现在来说一下网络负载...
如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
30分钟搞定iOS自定义相机 最近公司的项目中用到了相机,由于不用系统的相机,UI给的相机切图,必须自定义才可以。就花时间简单研究...
Intel将Moblin社区控... 本周二,非营利机构Linux基金会宣布,他们将担负起Moblin社区的管理工作,而这之前,Mobli...