收藏即复用！50个极致实用JavaScript单行代码，前端开发效率直接拉满

50个原生JS/TS高频单行工具函数！零依赖、生产可用，告别重复造轮子

前言

作为前端开发者，日常业务开发中，字符串处理、数组运算、日期格式化、浏览器API、对象数据清洗等基础逻辑几乎无处不在。

很多小伙伴为了省事，项目里习惯性引入 Lodash、Dayjs 等第三方工具库。但绝大多数场景下，完全不需要引入庞大依赖。

几行原生 JS/TS 代码，就能优雅实现需求，不仅可以减少项目打包体积、降低项目依赖，还能提升代码熟练度，写出更简洁优雅的业务代码。

今天给大家整理了 50个生产可用的原生单行代码片段，覆盖前端9大高频开发场景。

告别玩具代码，全部适配浏览器/Node.js/Vue/React 所有前端项目，开箱即用，建议收藏！

一、字符串操作（最高频）

所有方法默认空值兜底，防止传参 undefined 导致代码报错

1. 字符串首字母大写

const capitalize = (str = '') => str.charAt(0).toUpperCase() + str.slice(1);

2. 反转字符串

const reverseString = (str = '') => str.split('').reverse().join('');

3. 判断字符串是否为回文

const isPalindrome = (str = '') => str === str.split('').reverse().join('');

二、数组操作

1. 数组扁平化一层

const flatArr = arr => arr.flat(1);

2. 移除数组所有假值

自动过滤：false、0、空字符串、null、undefined、NaN

const removeFalsy = arr => arr.filter(Boolean);

3. 快速生成 0-99 连续数组

const createArr = () => Array.from({length: 100}, (_, i) => i);

4. 随机打乱数组（标准洗牌算法）

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. 基础数组去重

const uniqueArr = arr => [...new Set(arr)];

6. 对象数组根据指定字段去重

const uniqueByKey = (arr, key) => [...new Map(arr.map(item => [item[key], item])).values()];

7. 获取多个数组交集

const getIntersection = (a = [], ...arr) => [...new Set(a)].filter(v => arr.every(b => b.includes(v)));

8. 查找数组最大值索引

const maxIndex = (arr = []) => arr.length ? arr.indexOf(Math.max(...arr)) : -1;

9. 查找数组最小值索引

const minIndex = (arr = []) => arr.length ? arr.indexOf(Math.min(...arr)) : -1;

10. 找到数组中最接近指定数字的值

const closestNum = (arr = [], n = 0) => arr.reduce((a, b) => Math.abs(b - n) < Math.abs(a - n) ? b : a);

11. 多个数组合并为二维数组

const merge2D = (...arrList) => [...arrList];

12. 矩阵行列转置

const transpose = (matrix = []) => matrix[0]?.map((_, i) => matrix.map(row => row[i])) ?? [];

三、数制转换

原生 API 一行搞定，无需手写复杂计算公式

1. 十进制转换为任意 n 进制

const decToBase = (num = 0, base = 10) => num.toString(base);

2. 任意 n 进制转换为十进制

const baseToDec = (str = '', base = 10) => parseInt(str, base);

四、正则与文本处理

全部增加异常捕获，适配不规则入参

1. 从URL中提取域名

const getDomain = (url = '') => {
  try { return new URL(url).hostname; } catch { return ''; }
};

2. 验证电子邮箱格式

const isEmail = (mail = '') => /^[^\s@]+@[^\s@]+.[^\s@]+$/.test(mail);

3. 移除文本所有多余空格

const trimAll = (str = '') => str.replace(/\s+/g, ' ').trim();

五、浏览器原生 Web 操作

零框架依赖，兼容所有现代浏览器

1. 重新加载当前页面

const reloadPage = () => location.reload();

2. 平滑滚动到页面顶部

const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

3. 平滑滚动到指定元素

const scrollToEl = (el) => el?.scrollIntoView({ behavior: 'smooth' });

4. 检测当前浏览器是否为IE

const isIE = () => !!window.ActiveXObject || /msie|trident/i.test(navigator.userAgent);

5. 移除文本中所有 HTML 标签

const stripHtml = (html = '') => html.replace(/<[^>]*>/g, '');

6. 页面重定向跳转

const redirect = (url = '') => location.href = url;

7. 一键复制文本到剪贴板

const copyText = async (text = '') => {
  try { await navigator.clipboard.writeText(text); return true; } 
  catch { return false; }
};

六、日期时间处理（重点修复时区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. 日期转为标准 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. 秒数转为 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);

七、函数相关操作

1. 判断是否为异步 async 函数

const isAsyncFn = (fn) => fn?.constructor.name === 'AsyncFunction';

八、数字精度处理（金额展示必备）

专门用于前端金额、小数展示，精准可控

1. 截断小数（不四舍五入）

const toFixedFloor = (num = 0, len = 2) => Math.trunc(num * Math.pow(10, len)) / Math.pow(10, len);

2. 截断小数（自动四舍五入）

const toFixedRound = (num = 0, len = 2) => Number(num.toFixed(len));

3. 数字前置补零

const padNum = (num = 0, len = 2) => num.toString().padStart(len, '0');

九、对象常用操作（接口数据清洗神器）

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 字符串转对象

增加异常捕获，非法字符串不报错

const strToObj = (str = '') => {
  try { return JSON.parse(str); } catch { return null; }
};

4. 生产级对象深度对比（重点推荐）

避坑说明： 网上主流的 JSON.stringify 对比方式存在大量BUG，键顺序、undefined、NaN、日期都会对比失效。以下是轻量递归深对比方案，生产稳定可用

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]));
};

十、通用万能工具函数

1. 生成随机十六进制颜色

const randomColor = () => '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');

2. RGB 转 HEX

const rgbToHex = (r = 0, g = 0, b = 0) => '#' + [r, g, b].map(x => String(x.toString(16)).padStart(2, '0')).join('');

3. HEX 转 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. 获取当前页面 Cookie

const getCookie = () => document.cookie;

6. 延迟等待函数

const wait = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));

写在最后

本文所有代码全部修复网络通用BUG，解决了市面上大部分前端工具合集存在的：时区错误、算法不均、空值报错、对象对比失效、浏览器报错等问题。

所有方法零第三方依赖、轻量简洁，兼容浏览器、Node.js、Vue、React、uniapp 等绝大部分前端项目。

日常开发中，大家可以将这些工具函数统一封装到项目的 utils.ts / utils.js 工具文件中，全局复用，彻底告别重复造轮子，大幅提升开发效率，写出更优雅、更健壮的业务代码。

文章干货满满，建议收藏+点赞，开发随时查阅！也欢迎各位大佬在评论区补充更多优质工具函数，一起交流精进✨