文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

25 个 JavaScript 专业技巧,让你看起来更专业

2024-11-30 11:22

关注

1.复制内容到剪贴板

为了提高网站的用户体验,我们经常需要将内容复制到剪贴板,以便用户粘贴到指定的地方。

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

2.获取鼠标选择

您以前遇到过这种情况吗?

我们需要获取用户选择的内容。

const getSelectedText = () => window.getSelection().toString()
getSelectedText()

3.打乱数组

打乱数组?这在彩票项目中很常见,但它并不是真正随机的。

const shuffleArray = array => array.sort(() => Math.random() - 0.5)
shuffleArray([ 1, 2,3,4, -1, 0 ]) // [3, 1, 0, 2, 4, -1]

4. 将rgba转换为十六进制

我们可以将 RGBA 和十六进制颜色值相互转换。

const rgbaToHex = (r, g, b) => "#" + [r, g, b].map(num => parseInt(num).toString(16).padStart(2, '0')).join('')
rgbaToHex(0, 0 ,0) // #000000
rgbaToHex(255, 0, 127) //#ff007f

5.十六进制转换为rgba

const hexToRgba = hex => {
  const [r, g, b] = hex.match(/\w\w/g).map(val => parseInt(val, 16))
  return `rgba(${r}, ${g}, ${b}, 1)`;
}
hexToRgba('#000000') // rgba(0, 0, 0, 1)
hexToRgba('#ff007f') // rgba(255, 0, 127, 1)

6.获取多个数的平均值

使用reduce我们可以非常方便的得到一组数组的平均值。

const average = (...args) => args.reduce((a, b) => a + b, 0) / args.length
average(0, 1, 2, -1, 9, 10) // 3.5

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

如何判断一个数是奇数还是偶数?

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

8.删除数组中的重复元素

要删除数组中的重复元素,使用 Set 将变得非常容易。

const uniqueArray = (arr) => [...new Set(arr)]
uniqueArray([ 1, 1, 2, 3, 4, 5, -1, 0 ]) // [1, 2, 3, 4, 5, -1, 0]

9.检查一个对象是否为空对象

判断一个对象是否为空容易吗?

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object
isEmpty({}) // true
isEmpty({ name: 'fatfish' }) // false

10.反转字符串

const reverseStr = str => str.split('').reverse().join('')
reverseStr('fatfish') // hsiftaf

11.计算两个日期之间的间隔

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() - d2.getTime()) / 86400000)
dayDiff(new Date("2023-06-23"), new Date("1997-05-31")) // 9519

12.查找该日期是一年中的第几天

今天是2023年6月23日,那么今年是什么日子呢?

const dayInYear = (d) => Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayInYear(new Date('2023/06/23'))// 174

13.将字符串的第一个字母大写

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello fatfish")  // Hello fatfish

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

const generateRandomString = length => [...Array(length)].map(() => Math.random().toString(36)[2]).join('')
generateRandomString(12) // cysw0gfljoyx
generateRandomString(12) // uoqaugnm8r4s

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

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
random(1, 100) // 27
random(1, 100) // 84
random(1, 100) // 55

16.指定数字四舍五入

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(3.1415926, 3) //3.142
round(3.1415926, 1) //3.1

17.清除所有cookie

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

18.检测是否为深色模式

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

19.滚动到页面顶部

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

20.判断是否是苹果设备

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform)
isAppleDevice()

21.随机布尔值

const randomBoolean = () => Math.random() >= 0.5
randomBoolean()

22.获取变量的类型

const typeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
typeOf('')     // string
typeOf(0)      // number
typeOf()       // undefined
typeOf(null)   // null
typeOf({})     // object
typeOf([])     // array
typeOf(0)      // number
typeOf(() => {})  // function

23.判断当前选项卡是否处于活动状态

const checkTabInView = () => !document.hidden

24.检查某个元素是否获得焦点

const isFocus = (ele) => ele === document.activeElement

25.随机IP

const generateRandomIP = () => {
  return Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join('.');
}
generateRandomIP() // 220.187.184.113
generateRandomIP() // 254.24.179.151

结论

JavaScript 行话是一种节省时间和代码的强大方法。它们可用于在一行代码中执行复杂的任务,这对其他开发人员来说可能非常令人印象深刻。

在本文中,我们向您展示了 25 个杀手级 JavaScript 俏皮话,它们会让您看起来像个专业人士。我们还提供了一些有关如何编写自己的 JavaScript 行话的提示。

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

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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