25個(gè)讓你眼前一亮的JavaScript代碼技巧分享
更新時(shí)間：2023年07月17日 10:04:06 作者：前端小智
學(xué)習(xí)強(qiáng)大的JavaScript一行代碼，能夠節(jié)省你的時(shí)間和代碼量，所以本文為大家整理了25個(gè)JavaScript實(shí)用代碼技巧，感興趣的小伙伴可以了解一下
1. 將內(nèi)容復(fù)制到剪貼板
為了提高網(wǎng)站的用戶體驗(yàn)，我們經(jīng)常需要將內(nèi)容復(fù)制到剪貼板，以便用戶可以將其粘貼到指定位置。
const?copyToClipboard?=?(content)?=>?navigator.clipboard.writeText(content)
copyToClipboard("Hello?fatfish")2. 獲取鼠標(biāo)選中內(nèi)容
你以前遇到過(guò)這種情況嗎？我們需要獲取用戶選擇的內(nèi)容。
const?getSelectedText?=?()?=>?window.getSelection().toString() getSelectedText()
3. 打亂一個(gè)數(shù)組
打亂一個(gè)數(shù)組？這在彩票程序中非常常見(jiàn)，但它并不是真正的隨機(jī)。
const?shuffleArray?=?array?=>?array.sort(()?=>?Math.random()?-?0.5) shuffleArray([?1,?2,3,4,?-1,?0?])?//?[3,?1,?0,?2,?4,?-1]
4.將rgba轉(zhuǎn)換為十六進(jìn)制
我們可以將rgba和十六進(jìn)制顏色值互相轉(zhuǎn)換。
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)?//#ff007f5.將十六進(jìn)制轉(zhuǎn)換為rgba
const?hexToRgba?=?hex?=>?{
??const?[r,?g,?b]?=?hex.match(/\w\w/g).map(val?=>?parseInt(val,?16))
??return?`rgba(${r},?${g},?$,?1)`;
}
hexToRgba('#000000')?//?rgba(0,?0,?0,?1)
hexToRgba('#ff007f')?//?rgba(255,?0,?127,?1)6.獲取多個(gè)數(shù)字的平均值
使用reduce函數(shù)，我們可以非常方便地得到一組數(shù)組的平均值。
const?average?=?(...args)?=>?args.reduce((a,?b)?=>?a?+?b,?0)?/?args.length average(0,?1,?2,?-1,?9,?10)?//?3.5
7.檢查一個(gè)數(shù)字是偶數(shù)還是奇數(shù)
怎么判斷一個(gè)數(shù)字是奇數(shù)還是偶數(shù)？
const?isEven?=?num?=>?num?%?2?===?0 isEven(2)?//?true isEven(1)?//?false
8.在數(shù)組中去重元素
使用Set來(lái)刪除數(shù)組中的重復(fù)元素，會(huì)讓這個(gè)過(guò)程變得非常簡(jiǎn)單。
const?uniqueArray?=?(arr)?=>?[...new?Set(arr)] uniqueArray([?1,?1,?2,?3,?4,?5,?-1,?0?])?//?[1,?2,?3,?4,?5,?-1,?0]
9.檢查一個(gè)對(duì)象是否為空對(duì)象
const?isEmpty?=?obj?=>?Reflect.ownKeys(obj).length?===?0?&&?obj.constructor?===?Object
isEmpty({})?//?true
isEmpty({?name:?'fatfish'?})?//?false10.反轉(zhuǎn)字符串
const?reverseStr?=?str?=>?str.split('').reverse().join('')
reverseStr('fatfish')?//?hsiftaf11.計(jì)算兩個(gè)日期之間的間隔
const?dayDiff?=?(d1,?d2)?=>?Math.ceil(Math.abs(d1.getTime()?-?d2.getTime())?/?86400000)
dayDiff(new?Date("2023-06-23"),?new?Date("1997-05-31"))?//?951912. 找出日期所在的年份中的天數(shù)
const?dayInYear?=?(d)?=>?Math.floor((d?-?new?Date(d.getFullYear(),?0,?0))?/?1000?/?60?/?60?/?24)
dayInYear(new?Date('2023/06/23'))//?17413.將字符串的首字母大寫
const?capitalize?=?str?=>?str.charAt(0).toUpperCase()?+?str.slice(1)
capitalize("hello?fatfish")??//?Hello?fatfish14.生成指定長(zhǎng)度的隨機(jī)字符串
const?generateRandomString?=?length?=>?[...Array(length)].map(()?=>?Math.random().toString(36)[2]).join('')
generateRandomString(12)?//?cysw0gfljoyx
generateRandomString(12)?//?uoqaugnm8r4s15.在兩個(gè)整數(shù)之間獲取一個(gè)隨機(jī)整數(shù)
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.指定位數(shù)四舍五入
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.清除所有的cookies
const?clearCookies?=?document.cookie.split(';').forEach(cookie?=>?document.cookie?=?cookie.replace(/^?+/,?'').replace(/=.*/,?`=;expires=${new?Date(0).toUTCString()};path=/`))18.檢測(cè)是否為暗黑模式
const?isDarkMode?=?window.matchMedia?&&?window.matchMedia('(prefers-color-scheme:?dark)').matches
console.log(isDarkMode)19.滾動(dòng)到頁(yè)面頂部
const?goToTop?=?()?=>?window.scrollTo(0,?0) goToTop()
20.判斷是否為蘋果設(shè)備
const?isAppleDevice?=?()?=>?/Mac|iPod|iPhone|iPad/.test(navigator.platform) isAppleDevice()
21.隨機(jī)布爾值
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(()?=>?{})??//?function23.判斷當(dāng)前選項(xiàng)卡是否處于活動(dòng)狀態(tài)
const?checkTabInView?=?()?=>?!document.hidden
24.檢查元素是否處于焦點(diǎn)狀態(tài)
const?isFocus?=?(ele)?=>?ele?===?document.activeElement
25. 隨機(jī)IP
const?generateRandomIP?=?()?=>?{
??return?Array.from({length:?4},?()?=>?Math.floor(Math.random()?*?256)).join('.');
}
generateRandomIP()?//?220.187.184.113
generateRandomIP()?//?254.24.179.151總結(jié)
JavaScript一行代碼是節(jié)省時(shí)間和代碼的強(qiáng)大方式。它們可以用來(lái)在一行代碼中執(zhí)行復(fù)雜的任務(wù)，這對(duì)其他開(kāi)發(fā)人員來(lái)說(shuō)非常令人印象深刻。
在本文中，我們向您展示了25個(gè)厲害的JavaScript一行代碼，這些代碼將讓您看起來(lái)像個(gè)專家。我們還提供了一些關(guān)于如何編寫自己的JavaScript一行代碼的技巧。
以上就是25個(gè)讓你眼前一亮的JavaScript代碼技巧分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章
相關(guān)文章
小程序?qū)崿F(xiàn)錨點(diǎn)滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)錨點(diǎn)滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
javascript可以通過(guò)四個(gè)屬性可以獲得元素的偏移量，分別是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我們就來(lái)具體談一下獲取頁(yè)面元素偏移量的最佳方法。2015-04-04
js實(shí)現(xiàn)簡(jiǎn)單分頁(yè)導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單分頁(yè)導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果實(shí)例【附demo源碼】
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果,結(jié)合具體實(shí)例形式分析了基于BootStrap實(shí)現(xiàn)柵格布局的完整步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
javascript經(jīng)典特效分享 手風(fēng)琴、輪播圖、圖片滑動(dòng)
這篇文章主要介紹了javascript經(jīng)典特效，手風(fēng)琴、輪播圖、圖片滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。這篇文章主要介紹了使用BootStrap進(jìn)行輪播圖的制作的相關(guān)資料,需要的朋友可以參考下2017-01-01
相信大家都遇到過(guò),在各種圖表框架中經(jīng)常會(huì)有將一段折線平滑的需求,不僅能給用戶帶來(lái)一種柔和的感覺(jué),還能美化界面,讓折線看起來(lái)沒(méi)那么生硬,這篇文章主要給大家介紹了關(guān)于如何利用Javascript生成平滑曲線的相關(guān)資料,需要的朋友可以參考下2021-07-07
js如何計(jì)算斐波那契數(shù)列第n項(xiàng)的值
這篇文章主要介紹了js如何計(jì)算斐波那契數(shù)列第n項(xiàng)的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了javascript輪播圖算法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10