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)文章
親自教你TypeScript 項(xiàng)目搭建過(guò)程
這篇文章主要介紹了親自教你TypeScript 項(xiàng)目搭建過(guò)程,我記得前一天，我們配置過(guò)一份 webpack 配置，直接復(fù)制過(guò)來(lái)使用，這里就不多說(shuō)了，然后就是在項(xiàng)目中引入我們的 less，需要的朋友可以參考下2022-11-11
Javacript實(shí)現(xiàn)顏色梯度變化和漸變的效果代碼
用js對(duì)導(dǎo)航欄的顏色做了梯度的變化處理,通過(guò)處理..獲取兩種顏色在變化時(shí)的各種顏色字符串，并且字符串的個(gè)數(shù)，即獲取的頻率可以調(diào)節(jié)2013-05-05
encode腳本和normal腳本混用的問(wèn)題與解決方法
encode腳本和normal腳本混用的問(wèn)題與解決方法...2007-03-03
學(xué)習(xí)JavaScript設(shè)計(jì)模式(單例模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹單例模式，舉例說(shuō)明單例模式的技術(shù)、弊端等，對(duì)單例模式進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
SOSO地圖API使用(一)在地圖上畫圓實(shí)現(xiàn)思路與代碼
最近在做SOSO地圖相關(guān)開(kāi)發(fā)，遇到相關(guān)畫圓知識(shí)，特此簡(jiǎn)單記錄下來(lái),接下來(lái)講解如何在在地圖上畫圓，感興趣的朋友可以了解下2013-01-01
uniapp微信小程序自定義導(dǎo)航欄的全過(guò)程
最近一直在學(xué)習(xí)uni-app開(kāi)發(fā)，由于uniapp是基于vue.js技術(shù)開(kāi)發(fā)的,所以下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序自定義導(dǎo)航欄的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
javascript onclick事件改變選中行的顏色,方法簡(jiǎn)單，大家參考使用吧2013-12-12
手把手教你用JS實(shí)現(xiàn)回車評(píng)論功能
最近在寫一個(gè)問(wèn)答功能,類似于評(píng)論,下面這篇文章主要給大家介紹了關(guān)于如何用JS實(shí)現(xiàn)回車評(píng)論功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Chart.js與ECharts.js圖表使用過(guò)程組件對(duì)比
chartjs只能基于canvas,雖然只有英文文檔,但定制化程度更高,社區(qū)成熟,功能就更加穩(wěn)定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社區(qū)庫(kù),另外ECharts.js還支持3d效果的圖表,相當(dāng)炫酷,國(guó)內(nèi)開(kāi)發(fā)者大多數(shù)使用這個(gè),有中文文檔2023-10-10
微信小程序?qū)崿F(xiàn)列表?xiàng)l件篩選
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表?xiàng)l件篩選，篩選框的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07