首页 > 编程语言 >28 个 JavaScript 单行代码让你成为 JavaScript 大神

28 个 JavaScript 单行代码让你成为 JavaScript 大神

时间:2025-01-05 11:01:29浏览次数:3  
标签:const str JavaScript 28 单行 length 数组 2023 字符串

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 单行代码是有价值的函数,可以简化复杂的任务并提高代码的可读性。通过理解和运用这些技术,您不仅可以展示自己的熟练程度,还可以展示编写高效、清晰且可维护的代码的能力。
我希望您在开发过程中发现这些单行代码很有用。尝试使用它们,将它们应用于您的项目,并考虑它们如何优化您的解决方案。
最后,感谢您的阅读,祝编程愉快!

标签:const,str,JavaScript,28,单行,length,数组,2023,字符串
From: https://blog.csdn.net/qq_16242613/article/details/144942522

相关文章

  • JavaScript 观察者模式:前端开发必备技能
    一、什么是观察者模式?        观察者模式(ObserverPattern),也称为发布-订阅模式(Publish/Subscribe),定义了一种一对多的依赖关系。当一个对象(被观察对象或主题Subject)的状态发生变化时,所有依赖于它的对象(观察者Observer)都会得到通知,并自动进行相应的更新。     ......
  • 使用javascript实现一个EventBus
    在前端开发中,实现一个简单的EventBus可以通过以下方式来完成。这里是一个基本的EventBus类的实现,你可以根据自己的需要进行修改或扩展。classEventBus{constructor(){this.subscribers={};}//注册事件subscribe(event,callback){......
  • JavaScript语言的计算机基础
    JavaScript语言的计算机基础引言自1995年由网景公司(Netscape)推出以来,JavaScript已经从一个简单的客户端脚本语言发展成为一种广泛使用的编程语言。如今,它不仅在网页开发中扮演着不可或缺的角色,还成为后端开发、移动应用开发、甚至桌面应用开发的一部分。在本文中,我们将探......
  • leetCode 283.移动零
    题目给定一个数组nums,编写一个函数将所有0移动到数组的末尾,同时保持非零元素的相对顺序。请注意,必须在不复制数组的情况下原地对数组进行操作。示例1:输入:nums=[0,1,0,3,12]输出:[1,3,12,0,0]示例2:输入:nums=[0]输出:[0]思路:双指针。如果数组没有0,......
  • JavaScript介绍
    JavaScript是一种高级的、解释型的编程语言,在网页开发和许多其他应用场景中发挥着关键作用。一、起源与发展JavaScript诞生于1995年,由Netscape公司的BrendanEich开发。最初它的设计目的是为了让网页能够具有交互性,能够在浏览器端进行一些简单的表单验证、动画效果等操作......
  • 要做到单行文本超出时,中间部分显示...有什么方法?
    在前端开发中,如果你想要实现单行文本超出容器宽度时,中间部分显示省略号(...)的效果,可以通过结合CSS的text-overflow、overflow、white-space属性来实现。不过,通常情况下,text-overflow:ellipsis是用于文本超出容器时在尾部显示省略号的。若要在中间显示省略号,可能需要一些额外的技巧......
  • JavaScript的引用数据类型(Reference Data Types)
    Python基础Python是一种广泛使用的高级编程语言,凭借其简单易读的语法、丰富的库和框架、以及强大的社区支持,Python在数据科学、机器学习、网络开发、自动化脚本等多个领域中得到了广泛应用。本文将介绍Python的基础知识,包括语法、数据结构、控制结构、函数、模块与包等内容......
  • JavaScript的变量声明(Variable Declaration)
    Python基础引言在当今科技高速发展的时代,编程语言的学习变得愈加重要。作为一种简单易学而功能强大的编程语言,Python受到越来越多编程爱好者和专业人士的青睐。《Python基础》这一文旨在为初学者提供一个全面的Python入门指南,帮助读者从零开始,逐步掌握这门语言的基本概念......
  • JavaScript的数据封装(Data Encapsulation)
    Python基础Python是一种高级编程语言,由GuidovanRossum于1991年首次发布。由于其简单易读的语法、强大的功能和丰富的库,Python已经成为当今最受欢迎的编程语言之一。无论您是初学者还是有经验的开发者,掌握Python都将为您的编程之路打开新的大门。在本文中,我们将探讨Python......
  • JavaScript的继承(Inheritance)
    Python基础Python是一种广泛使用的高级编程语言,因其简洁的语法和强大的功能而受到许多开发者的青睐。Python不仅适合初学者入门编程,也能满足高级专业人士的需求。本文将为您详细介绍Python的基础知识,包括Python的基本概念、数据类型、控制结构、函数和模块等。1.Python简......