25個讓你眼前一亮的JavaScript代碼技巧分享
更新時間：2023年07月17日 10:04:06 作者：前端小智
學習強大的JavaScript一行代碼，能夠節(jié)省你的時間和代碼量，所以本文為大家整理了25個JavaScript實用代碼技巧，感興趣的小伙伴可以了解一下
1. 將內(nèi)容復(fù)制到剪貼板
為了提高網(wǎng)站的用戶體驗，我們經(jīng)常需要將內(nèi)容復(fù)制到剪貼板，以便用戶可以將其粘貼到指定位置。
const?copyToClipboard?=?(content)?=>?navigator.clipboard.writeText(content)
copyToClipboard("Hello?fatfish")2. 獲取鼠標選中內(nèi)容
你以前遇到過這種情況嗎？我們需要獲取用戶選擇的內(nèi)容。
const?getSelectedText?=?()?=>?window.getSelection().toString() getSelectedText()
3. 打亂一個數(shù)組
打亂一個數(shù)組？這在彩票程序中非常常見，但它并不是真正的隨機。
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)換為十六進制
我們可以將rgba和十六進制顏色值互相轉(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.將十六進制轉(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.獲取多個數(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.檢查一個數(shù)字是偶數(shù)還是奇數(shù)
怎么判斷一個數(shù)字是奇數(shù)還是偶數(shù)？
const?isEven?=?num?=>?num?%?2?===?0 isEven(2)?//?true isEven(1)?//?false
8.在數(shù)組中去重元素
使用Set來刪除數(shù)組中的重復(fù)元素，會讓這個過程變得非常簡單。
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'?})?//?false10.反轉(zhuǎn)字符串
const?reverseStr?=?str?=>?str.split('').reverse().join('')
reverseStr('fatfish')?//?hsiftaf11.計算兩個日期之間的間隔
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.生成指定長度的隨機字符串
const?generateRandomString?=?length?=>?[...Array(length)].map(()?=>?Math.random().toString(36)[2]).join('')
generateRandomString(12)?//?cysw0gfljoyx
generateRandomString(12)?//?uoqaugnm8r4s15.在兩個整數(shù)之間獲取一個隨機整數(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.檢測是否為暗黑模式
const?isDarkMode?=?window.matchMedia?&&?window.matchMedia('(prefers-color-scheme:?dark)').matches
console.log(isDarkMode)19.滾動到頁面頂部
const?goToTop?=?()?=>?window.scrollTo(0,?0) goToTop()
20.判斷是否為蘋果設(shè)備
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(()?=>?{})??//?function23.判斷當前選項卡是否處于活動狀態(tài)
const?checkTabInView?=?()?=>?!document.hidden
24.檢查元素是否處于焦點狀態(tài)
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總結(jié)
JavaScript一行代碼是節(jié)省時間和代碼的強大方式。它們可以用來在一行代碼中執(zhí)行復(fù)雜的任務(wù)，這對其他開發(fā)人員來說非常令人印象深刻。
在本文中，我們向您展示了25個厲害的JavaScript一行代碼，這些代碼將讓您看起來像個專家。我們還提供了一些關(guān)于如何編寫自己的JavaScript一行代碼的技巧。
以上就是25個讓你眼前一亮的JavaScript代碼技巧分享的詳細內(nèi)容，更多關(guān)于JavaScript技巧的資料請關(guān)注腳本之家其它相關(guān)文章
相關(guān)文章
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)錨點滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
javascript可以通過四個屬性可以獲得元素的偏移量，分別是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我們就來具體談一下獲取頁面元素偏移量的最佳方法。2015-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單分頁導(dǎo)航欄效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
IE11下CKEditor在Bootstrap Modal中下拉問題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Bootstrap實現(xiàn)的經(jīng)典柵格布局效果實例【附demo源碼】
這篇文章主要介紹了Bootstrap實現(xiàn)的經(jīng)典柵格布局效果,結(jié)合具體實例形式分析了基于BootStrap實現(xiàn)柵格布局的完整步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
javascript經(jīng)典特效分享 手風琴、輪播圖、圖片滑動
這篇文章主要介紹了javascript經(jīng)典特效，手風琴、輪播圖、圖片滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點添加滑塊的方式。這篇文章主要介紹了使用BootStrap進行輪播圖的制作的相關(guān)資料,需要的朋友可以參考下2017-01-01
相信大家都遇到過,在各種圖表框架中經(jīng)常會有將一段折線平滑的需求,不僅能給用戶帶來一種柔和的感覺,還能美化界面,讓折線看起來沒那么生硬,這篇文章主要給大家介紹了關(guān)于如何利用Javascript生成平滑曲線的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了js如何計算斐波那契數(shù)列第n項的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了javascript輪播圖算法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10