學習最強大的 JavaScript 專業(yè)技巧，這將節(jié)省您的時間，提升工作效率。

1.復制內(nèi)容到剪貼板

為了提高網(wǎng)站的用戶體驗，我們經(jīng)常需要將內(nèi)容復制到剪貼板，以便用戶粘貼到指定的地方。

【資料圖】

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

2.獲取鼠標選擇

您以前遇到過這種情況嗎？

我們需要獲取用戶選擇的內(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) // #000000rgbaToHex(255, 0, 127) //#ff007f

5.十六進制轉(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ù)組的平均值。

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

7.檢查數(shù)字是偶數(shù)還是奇數(shù)

如何判斷一個數(shù)是奇數(shù)還是偶數(shù)？

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

8.刪除數(shù)組中的重復元素

要刪除數(shù)組中的重復元素，使用 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 === ObjectisEmpty({}) // trueisEmpty({ name: "fatfish" }) // false

10.反轉(zhuǎn)字符串

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) // cysw0gfljoyxgenerateRandomString(12) // uoqaugnm8r4s

15.獲取兩個整數(shù)之間的隨機整數(shù)

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

16.指定數(shù)字四舍五入

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)round(3.1415926, 3) //3.142round(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)").matchesconsole.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.5randomBoolean()

22.獲取變量的類型

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

23.判斷當前選項卡是否處于活動狀態(tài)

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.113generateRandomIP() // 254.24.179.151

結論

JavaScript 行話是一種節(jié)省時間和代碼的強大方法。它們可用于在一行代碼中執(zhí)行復雜的任務，這對其他開發(fā)人員來說可能非常令人印象深刻。

在本文中，我們向您展示了 25 個殺手級 JavaScript 俏皮話，它們會讓您看起來像個專業(yè)人士。我們還提供了一些有關如何編寫自己的 JavaScript 行話的提示。

關鍵詞：