介紹
JavaScript眾所周知是弱型別語言，這是缺點，也是優點，缺點是如果使用的人不嚴謹那么專案級的開發可以最終演變成在BUG中寫代碼…10行代碼11個BUG，一言難盡，但如果使用的人嚴謹、邏輯性強，對JavaScript的理解透徹，那么這有變成了另外一種效果，看著這些大神的代碼極為灑脫，隨心所欲，直呼牛皮…大喊666666…
希望有一天我們也能到達這種境界…加油，打工人…
?
下面是個人收藏的一些牛皮代碼以及專案中經常會使用到的工具函式，使用的好，可以讓你的瞬間看起來像個高手（求關注，求收藏，求點贊）；
?下載
這些代碼都已經上傳至gitee，具體地址如下：gitee代碼地址
一行代碼
型別判斷
這個其實在專案中非常常用，很多時候都需要對變數進行型別判斷，比如介面回傳的是用戶資訊，我們要取 res.name，但如果介面回傳的是null，那么此時介面就會報錯，這時候我們往往要寫一些防御性代碼，也就是型別判斷：
// 判斷是否是字串
const isString = (value)=> Object.prototype.toString.call(value) === "[object String]";
// 判斷是否是布林值
const isBoolean = (value)=> Object.prototype.toString.call(value) === "[object Boolean]";
// 判斷是否是數字
const isNumber = (value)=> Object.prototype.toString.call(value) === "[object Number]";
// 判斷是否是underfined
const isUndefined = (value)=> Object.prototype.toString.call(value) === "[object Undefined]";
// 判斷是否是null
const isNull = (value)=> Object.prototype.toString.call(value) === "[object Null]";
// 判斷是否是NaN
const isNaN = (value)=> Number.isNaN(value);
// 判斷是否是null
const isObject = (value)=> Object.prototype.toString.call(value) === "[object Object]";
// 判斷是否是null
const isFunction = (value)=> Object.prototype.toString.call(value) === "[object Function]";
// 判斷是否是NaN
const isArray = (value)=> Object.prototype.toString.call(value) === "[object Array]";
型別獲取
有型別判斷，自然就有對應的型別獲取，獲取當前變數的型別
// 獲取變數的型別
const getType = (value) => Object.prototype.toString.call(value);
// Result: '[object Function]'
getType(()=>{});
Date 物件中獲取時間
const timeDate = date => date.toTimeString().slice(0, 8);
// Result: "09:38:11"
console.log(timeDate(new Date(0, 0, 0, 09, 38, 11)))
// Result: 回傳當前時間
console.log(timeFromDate(new Date()));
判斷當前日期是一年中的第幾天
判斷當前的日期屬于一年中的第幾天
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
// Result: 355
dayOfYear(new Date());
計算兩個日期之間的間隔時間
計算兩個日期的間隔時間，比如2021-10-31和2021-12-15間隔了多少天
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
// Result: 410
console.log(dayDif(new Date("2021-10-31"), new Date("2022-12-15")))
檢查元素是否處于聚焦狀態
使用 document.activeElement 來檢查元素是否處于聚焦狀態
const elementIsInFocus = (el) => (el === document.activeElement);
// Result: 引數為DOM元素，如果還元素處于焦點狀態會回傳 True 否則回傳 False
elementIsInFocus(Element)
滾動至頁面頂部
使用window.scrollTo() 會滾動至指定的坐標，如果設定坐標為（0，0），就會回到頁面頂部
const goToTop = () => window.scrollTo(0, 0);
// Result: 將會滾動至頂部
goToTop();
檢查當前用戶是否是蘋果設備
使用 navigator.platform 判斷當前用戶是否是蘋果設備
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
// Result: 是蘋果設備會回傳 True
console.log(isAppleDevice);
復制到粘貼板
使用navigator.clipboard.writeText復制到剪貼板
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello Oliver");
判斷當前標簽頁是否為可視狀態
通過下方代碼可以判斷當前的頁簽是否處于激活狀態，有時候我們在頁簽失焦的時候需要停止某些操作
const isBrowserTabInView = () => document.hidden;
// Result: true/false
isBrowserTabInView();
獲取選中的文本
該方法通過內置的getSelection()屬性獲取用戶選擇的文本
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
檢測是否是黑暗模式
使用以下代碼檢查用戶的設備是否處于暗模式
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
反轉字串
其實反轉字串有很多種方法，這里是我之前看到一位大佬的寫法，使用了 split()，reverse() 和 join()后僅一行代碼就實作了：
// 反轉字串
const reverse = str => str.split('').reverse().join('');
// Result: 'revilo olleh'
reverse('hello oliver');
首字母大寫
將英文單字首字母大寫后并回傳
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
// Result: 'Hello Oliver'
capitalize("hello Oliver")
將RGB顏色轉化為十六進制
將RGB顏色轉成十六進制的顏色，比如：rgb(255,255,255)將會變成#ffffff
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
// Result: '#ffffff'
rgbToHex(255, 255, 255);
隨機十六進制顏色
隨機生成16進制的顏色
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
// Result: 隨機十六進制顏色，比如:#b6c349
randomHex();
數字的奇偶數判斷
通過%號直接判斷數字是奇數還是偶數
const isEven = num => num % 2 === 0;
// Result: true
console.log(isEven(2));
// Result: false
console.log(isEven(3));
兩個整數之間的隨機整數
在兩個整數之間生成一個隨機整數
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
// Result: 1-50之間的隨機整數
random(1, 50);
陣列去重
陣列去重的方法有很多，這里直接采用了ES6中的方法
const removeDuplicates = (arr) => [...new Set(arr)];
// Result: [1, 2, 3, 4, 5, 6]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
判斷陣列是否為空
該方法用來判斷一個陣列是否為空，回傳值是一個布爾型
const isEmpty = arr => Array.isArray(arr) && arr.length === 0;
// Result: false
isEmpty([1, 2, 3]);
小結
都是平時看CSDN等一些大神們的文章時，看到的一些神奇的代碼收藏下來的，如果有小伙伴還有別的看到的一些代碼，麻煩告知博主，我及時更新，謝謝
最后附上所有代碼：
const Utils = {
// 反轉字串
reverse = str => str.split('').reverse().join(''),
// 是否是字串
isString = (value)=> Object.prototype.toString.call(value) === "[object String]",
// 是否是布林值
isBoolean = (value)=> Object.prototype.toString.call(value) === "[object Boolean]",
// 是否是數字
isNumber = (value)=> Object.prototype.toString.call(value) === "[object Number]",
// 是否是Underfined
isUndefined = (value)=> Object.prototype.toString.call(value) === "[object Undefined]",
// 是否是null
isNull = (value)=> Object.prototype.toString.call(value) === "[object Null]",
// 是否是NaN
isNaN = (value)=> Number.isNaN(value),
// 是否是物件
isObject = (value)=> Object.prototype.toString.call(value) === "[object Object]",
// 是否是函式
isFunction = (value)=> Object.prototype.toString.call(value) === "[object Function]",
// 是否是陣列
isArray = (value)=> Object.prototype.toString.call(value) === "[object Array]",
// 獲取變數型別
getType = (value) => Object.prototype.toString.call(value),
// Date 物件中獲取時間
timeDate = date => date.toTimeString().slice(0, 8),
// 數字的奇偶數判斷
isEven = num => num % 2 === 0,
// 判斷當前日期是一年中的第幾天
dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24),
// 計算兩個日期之間的間隔時間
dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000),
// 滾動至頁面頂部
goToTop = () => window.scrollTo(0, 0),
// 檢查元素是否處于聚焦狀態
elementIsInFocus = (el) => (el === document.activeElement),
// 檢查當前用戶是否是蘋果設備
isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform),
// 判斷當前標簽頁是否為可視狀態
isBrowserTabInView = () => document.hidden,
// 獲取選中的文本
getSelectedText = () => window.getSelection().toString(),
// 檢測是否是黑暗模式
isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
// 首字母大寫
capitalize = str => str.charAt(0).toUpperCase() + str.slice(1),
// 將RGB顏色轉化為十六進制
rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1),
// 隨機十六進制顏色
randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`,
// 兩個整數之間的隨機整數
random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min),
// 陣列去重
removeDuplicates = (arr) => [...new Set(arr)],
// 判斷陣列是否為空
isEmpty = arr => Array.isArray(arr) && arr.length === 0
};
export default Utils;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/390372.html
標籤：其他
下一篇：關于異步的詳解