文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

19个杀手级 JavaScript 单行代码,让你看起来像专业人士

2024-12-01 14:12

关注

1.生成随机字符串

我们可以使用 Math.random() 来生成一个随机字符串,当我们需要一个唯一的 ID 时非常方便。

const randomString = () => Math.random().toString(36).slice(2)
randomString() // gi1qtdego0b
randomString() // f3qixv40mot
randomString() // eeelv1pm3ja

2.转义HTML特殊字符

如果你了解 XSS,其中一种解决方案是转义 HTML 字符串。

const escape = (str) => str.replace(/[&<>"']/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))
escape('
Hi Medium.
'
)
// <div class="medium">Hi Medium.</div>

3.大写字符串中每个单词的第一个字符

此方法用于将字符串中每个单词的第一个字符大写。

const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())
uppercaseWords('hello world'); // 'Hello World'

4.将字符串转换为camelCase

const toCamelCase = (str) => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
toCamelCase('background-color'); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld

5.删除数组中的重复值

删除数组的重复项是非常有必要的,使用“Set”会变得非常简单。

const removeDuplicates = (arr) => [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]))
// [1, 2, 3, 4, 5, 6]

6. 展平数组

我们经常在面试中受到考验,这可以通过两种方式来实现。

const flat = (arr) =>
[].concat.apply(
[],
arr.map((a) => (Array.isArray(a) ? flat(a) : a))
)
// Or
const flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])
flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']

7.从数组中删除虚假值

使用此方法,你将能够过滤掉数组中的所有虚假值。

const removeFalsy = (arr) => arr.filter(Boolean)
removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// ['a string', true, 5, 'another string']

8.检查一个数字是偶数还是奇数

一个超级简单的任务,可以通过使用模运算符 (%) 来解决。

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

9. 获取两个数字之间的随机整数

此方法用于获取两个数字之间的随机整数。

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
random(1, 50) // 25
random(1, 50) // 34

10. 获取参数的平均值

我们可以使用 reduce 方法来获取我们在此函数中提供的参数的平均值。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5); // 3

11. 将数字截断为固定小数点

使用 Math.pow() 方法,我们可以将一个数字截断为我们在函数中提供的某个小数点。

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56

12.计算两个日期之间的不同天数

有时候我们需要计算两个日期之间的天数,一行代码就可以搞定。

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
diffDays(new Date("2021-11-3"), new Date("2022-2-1")) // 90

13. 从日期获取一年中的哪一天

你想知道某个日期是一年中的哪一天吗?

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
dayOfYear(new Date()) // 74

14.生成随机十六进制颜色

如果你需要一个随机的颜色值,这个函数就可以了。

const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
randomColor() // #9dae4f
randomColor() // #6ef10e

15.将RGB颜色转换为十六进制

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
rgbToHex(255, 255, 255) // '#ffffff'

16.清除所有cookies

const clearCookies = () => document.cookie.split(';').forEach((c) => (document.cookie = c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))

17.检测暗模式

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

18.交换两个变量

[foo, bar] = [bar, foo]

19.暂停一会儿

const pause = (millis) => new Promise(resolve => setTimeout(resolve, millis))
const fn = async () => {
await pause(1000)
console.log('fatfish') // 1s later
}
fn()

最后

以上就是我今天跟你分享的19个JavaScript的单行代码,希望对你有用,如果你觉得有帮助的话,请点赞我,关注我,并与你的开作者朋友分享这篇文章,最后,感谢你的阅读,祝编程愉快!

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯