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

学习最强大的 JavaScript 专业技巧，这将节省您的时间，提升工作效率。

1.复制内容到剪贴板

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

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

2.获取鼠标选择

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

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

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

3.打乱数组

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

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

4. 将rgba转换为十六进制

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

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

5.十六进制转换为rgba

consthexToRgba=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我们可以非常方便的得到一组数组的平均值。

constaverage=(...args)=>args.reduce((a,b)=>a+b,0)/args.lengthaverage(0,1,2,-1,9,10)// 3.5

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

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

constisEven=num=>num%2===0isEven(2)// trueisEven(1)// false

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

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

constuniqueArray=(arr)=>[...newSet(arr)]uniqueArray([1,1,2,3,4,5,-1,0])// [1, 2, 3, 4, 5, -1, 0]

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

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

constisEmpty=obj=>Reflect.ownKeys(obj).length===0&&obj.constructor===ObjectisEmpty({})// trueisEmpty({name:'fatfish'})// false

10.反转字符串

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

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

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

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

今天是2023年6月23日，那么今年是什么日子呢？

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

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

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

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

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

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

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

16.指定数字四舍五入

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

17.清除所有cookie

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

18.检测是否为深色模式

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

19.滚动到页面顶部

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

20.判断是否是苹果设备

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

21.随机布尔值

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

22.获取变量的类型

consttypeOf=(obj)=>Object.prototype.toString.call(obj).slice(8,-1).toLowerCase()typeOf('')// stringtypeOf(0)// numbertypeOf()// undefinedtypeOf(null)// nulltypeOf({})// objecttypeOf([])// arraytypeOf(0)// numbertypeOf(()=>{})// function

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

constcheckTabInView=()=>!document.hidden

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

constisFocus=(ele)=>ele===document.activeElement

25.随机IP

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

结论

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

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