一文分享50個極致實(shí)用JavaScript單行代碼(收藏即用)
50個原生JS/TS高頻單行工具函數(shù)！零依賴、生產(chǎn)可用，告別重復(fù)造輪子
前言
作為前端開發(fā)者，日常業(yè)務(wù)開發(fā)中，字符串處理、數(shù)組運(yùn)算、日期格式化、瀏覽器API、對象數(shù)據(jù)清洗等基礎(chǔ)邏輯幾乎無處不在。
很多小伙伴為了省事，項(xiàng)目里習(xí)慣性引入 Lodash、Dayjs 等第三方工具庫。但絕大多數(shù)場景下，完全不需要引入龐大依賴。
幾行原生 JS/TS 代碼，就能優(yōu)雅實(shí)現(xiàn)需求，不僅可以減少項(xiàng)目打包體積、降低項(xiàng)目依賴，還能提升代碼熟練度，寫出更簡潔優(yōu)雅的業(yè)務(wù)代碼。
今天給大家整理了 50個生產(chǎn)可用的原生單行代碼片段，覆蓋前端9大高頻開發(fā)場景。
告別玩具代碼，全部適配瀏覽器/Node.js/Vue/React 所有前端項(xiàng)目，開箱即用，建議收藏！
一、字符串操作（最高頻）
所有方法默認(rèn)空值兜底，防止傳參 undefined 導(dǎo)致代碼報錯
1. 字符串首字母大寫
const capitalize = (str = '') => str.charAt(0).toUpperCase() + str.slice(1);
2. 反轉(zhuǎn)字符串
const reverseString = (str = '') => str.split('').reverse().join('');
3. 判斷字符串是否為回文
const isPalindrome = (str = '') => str === str.split('').reverse().join('');
二、數(shù)組操作
1. 數(shù)組扁平化一層
const flatArr = arr => arr.flat(1);
2. 移除數(shù)組所有假值
自動過濾：false、0、空字符串、null、undefined、NaN
const removeFalsy = arr => arr.filter(Boolean);
3. 快速生成 0-99 連續(xù)數(shù)組
const createArr = () => Array.from({length: 100}, (_, i) => i);
4. 隨機(jī)打亂數(shù)組（標(biāo)準(zhǔn)洗牌算法）
Fisher–Yates 算法
const shuffleArr = arr => {
const list = [...arr];
for (let i = list.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[list[i], list[j]] = [list[j], list[i]];
}
return list;
};
5. 基礎(chǔ)數(shù)組去重
const uniqueArr = arr => [...new Set(arr)];
6. 對象數(shù)組根據(jù)指定字段去重
const uniqueByKey = (arr, key) => [...new Map(arr.map(item => [item[key], item])).values()];
7. 獲取多個數(shù)組交集
const getIntersection = (a = [], ...arr) => [...new Set(a)].filter(v => arr.every(b => b.includes(v)));
8. 查找數(shù)組最大值索引
const maxIndex = (arr = []) => arr.length ? arr.indexOf(Math.max(...arr)) : -1;
9. 查找數(shù)組最小值索引
const minIndex = (arr = []) => arr.length ? arr.indexOf(Math.min(...arr)) : -1;
10. 找到數(shù)組中最接近指定數(shù)字的值
const closestNum = (arr = [], n = 0) => arr.reduce((a, b) => Math.abs(b - n) < Math.abs(a - n) ? b : a);
11. 多個數(shù)組合并為二維數(shù)組
const merge2D = (...arrList) => [...arrList];
12. 矩陣行列轉(zhuǎn)置
const transpose = (matrix = []) => matrix[0]?.map((_, i) => matrix.map(row => row[i])) ?? [];
三、數(shù)制轉(zhuǎn)換
原生 API 一行搞定，無需手寫復(fù)雜計算公式
1. 十進(jìn)制轉(zhuǎn)換為任意 n 進(jìn)制
const decToBase = (num = 0, base = 10) => num.toString(base);
2. 任意 n 進(jìn)制轉(zhuǎn)換為十進(jìn)制
const baseToDec = (str = '', base = 10) => parseInt(str, base);
四、正則與文本處理
全部增加異常捕獲，適配不規(guī)則入?yún)?/p>
1. 從URL中提取域名
const getDomain = (url = '') => {
try { return new URL(url).hostname; } catch { return ''; }
};
2. 驗(yàn)證電子郵箱格式
const isEmail = (mail = '') => /^[^\s@]+@[^\s@]+.[^\s@]+$/.test(mail);
3. 移除文本所有多余空格
const trimAll = (str = '') => str.replace(/\s+/g, ' ').trim();
五、瀏覽器原生 Web 操作
零框架依賴，兼容所有現(xiàn)代瀏覽器
1. 重新加載當(dāng)前頁面
const reloadPage = () => location.reload();
2. 平滑滾動到頁面頂部
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
3. 平滑滾動到指定元素
const scrollToEl = (el) => el?.scrollIntoView({ behavior: 'smooth' });
4. 檢測當(dāng)前瀏覽器是否為IE
const isIE = () => !!window.ActiveXObject || /msie|trident/i.test(navigator.userAgent);
5. 移除文本中所有 HTML 標(biāo)簽
const stripHtml = (html = '') => html.replace(/<[^>]*>/g, '');
6. 頁面重定向跳轉(zhuǎn)
const redirect = (url = '') => location.href = url;
7. 一鍵復(fù)制文本到剪貼板
const copyText = async (text = '') => {
try { await navigator.clipboard.writeText(text); return true; }
catch { return false; }
};
六、日期時間處理（重點(diǎn)修復(fù)時區(qū)BUG）
1. 判斷日期是否為今天
const isToday = (date) => {
const d1 = new Date(date);
const d2 = new Date();
return d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate();
};
2. 日期轉(zhuǎn)為標(biāo)準(zhǔn) YYYY-MM-DD
const formatDate = (date = new Date()) => {
const d = new Date(date);
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${y}-${m}-${day}`;
};
3. 秒數(shù)轉(zhuǎn)為 hh:mm:ss 時長格式
const secToTime = (s = 0) => {
const t = Math.floor(s);
const h = String(Math.floor(t / 3600)).padStart(2, '0');
const m = String(Math.floor((t % 3600) / 60)).padStart(2, '0');
const ss = String(t % 60).padStart(2, '0');
return `${h}:${m}:${ss}`;
};
4. 獲取指定年月的第一天
const firstDay = (y, m) => new Date(y, m - 1, 1);
5. 獲取指定年月的最后一天
const lastDay = (y, m) => new Date(y, m, 0);
七、函數(shù)相關(guān)操作
1. 判斷是否為異步 async 函數(shù)
const isAsyncFn = (fn) => fn?.constructor.name === 'AsyncFunction';
八、數(shù)字精度處理（金額展示必備）
專門用于前端金額、小數(shù)展示，精準(zhǔn)可控
1. 截斷小數(shù)（不四舍五入）
const toFixedFloor = (num = 0, len = 2) => Math.trunc(num * Math.pow(10, len)) / Math.pow(10, len);
2. 截斷小數(shù)（自動四舍五入）
const toFixedRound = (num = 0, len = 2) => Number(num.toFixed(len));
3. 數(shù)字前置補(bǔ)零
const padNum = (num = 0, len = 2) => num.toString().padStart(len, '0');
九、對象常用操作（接口數(shù)據(jù)清洗神器）
1. 清除對象 null、undefined 空屬性
const cleanObj = (obj = {}) => Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));
2. 交換對象鍵值
const invertObj = (obj = {}) => Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));
3. JSON 字符串轉(zhuǎn)對象
增加異常捕獲，非法字符串不報錯
const strToObj = (str = '') => {
try { return JSON.parse(str); } catch { return null; }
};
4. 生產(chǎn)級對象深度對比（重點(diǎn)推薦）
避坑說明： 網(wǎng)上主流的 JSON.stringify 對比方式存在大量BUG，鍵順序、undefined、NaN、日期都會對比失效。以下是輕量遞歸深對比方案，生產(chǎn)穩(wěn)定可用
const deepEqual = (a, b) => {
if (a === b) return true;
if (!(a && b) || typeof a !== typeof b) return false;
if (typeof a !== 'object') return false;
const keysA = Object.keys(a);
const keysB = Object.keys(b);
if (keysA.length !== keysB.length) return false;
return keysA.every(k => deepEqual(a[k], b[k]));
};
十、通用萬能工具函數(shù)
1. 生成隨機(jī)十六進(jìn)制顏色
const randomColor = () => '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
2. RGB 轉(zhuǎn) HEX
const rgbToHex = (r = 0, g = 0, b = 0) => '#' + [r, g, b].map(x => String(x.toString(16)).padStart(2, '0')).join('');
3. HEX 轉(zhuǎn) RGB
const hexToRgb = (hex = '') => {
const h = hex.replace('#', '');
return {
r: parseInt(h.slice(0, 2), 16),
g: parseInt(h.slice(2, 4), 16),
b: parseInt(h.slice(4, 6), 16)
};
};
4. 生成全局唯一 UUID
const getUUID = () => crypto.randomUUID();
5. 獲取當(dāng)前頁面 Cookie
const getCookie = () => document.cookie;
6. 延遲等待函數(shù)
const wait = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
寫在最后
本文所有代碼全部修復(fù)網(wǎng)絡(luò)通用BUG，解決了市面上大部分前端工具合集存在的：時區(qū)錯誤、算法不均、空值報錯、對象對比失效、瀏覽器報錯等問題。
所有方法零第三方依賴、輕量簡潔，兼容瀏覽器、Node.js、Vue、React、uniapp 等絕大部分前端項(xiàng)目。
日常開發(fā)中，大家可以將這些工具函數(shù)統(tǒng)一封裝到項(xiàng)目的 utils.ts / utils.js 工具文件中，全局復(fù)用，徹底告別重復(fù)造輪子，大幅提升開發(fā)效率，寫出更優(yōu)雅、更健壯的業(yè)務(wù)代碼。
以上就是一文分享50個極致實(shí)用JavaScript單行代碼(收藏即用)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript實(shí)用代碼的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
全面解析Bootstrap中transition、affix的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中transition、affix的使用方法，感興趣的朋友可以參考一下2016-05-05
一步快速解決微信小程序中textarea層級太高遮擋其他組件
這篇文章主要給大家介紹了關(guān)于如何通過一步快速解決微信小程序中textarea層級太高遮擋其他組件問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于前后端json數(shù)據(jù)的發(fā)送與接收詳解
這篇文章主要給大家介紹了關(guān)于前后端json數(shù)據(jù)發(fā)送與接收的相關(guān)資料，文中通過示例代碼詳細(xì)介紹了關(guān)于flask中的json數(shù)據(jù)接收和前端發(fā)送json數(shù)據(jù)等內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
JavaScripts數(shù)組里的對象排序的24個方法(最新整理收藏)
文章介紹了24種在JavaScript中對數(shù)組進(jìn)行排序的方法,每種方法都有具體的示例和應(yīng)用場景,適合不同情況下的排序需求,感興趣的朋友跟隨小編一起看看吧2025-01-01
JS實(shí)現(xiàn)百度搜索框關(guān)鍵字推薦
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度搜索框關(guān)鍵字推薦，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
下面小編就為大家?guī)硪黄獪\談js的解析順序 作用域 嚴(yán)格模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序日期時分組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JS實(shí)現(xiàn)的文字間歇循環(huán)滾動效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實(shí)現(xiàn)頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
JS遍歷ul下的li點(diǎn)擊彈出li的索引的實(shí)現(xiàn)方法
這篇文章主要介紹了JS遍歷ul下的li點(diǎn)擊彈出li的索引的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
詳解JavaScript中typeof與instanceof用法
typeof用以獲取一個變量或者表達(dá)式的類型而instanceof用于判斷一個變量是否某個對象的實(shí)例，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10