在日常开发中,我们经常遇到一些看似简单却总要重复编写的功能:数组去重、随机生成字符串、延迟执行等等。每次都要现写一遍,既浪费时间又容易出错。
我整理了一些实用的TypeScript单行工具函数,每个都能一行代码搞定。这些函数可以直接用到项目中,帮你节省大量开发时间。
数组处理是业务开发中最常见的需求。
去掉重复元素
const unique = <T>(arr: T[]) => [...new Set(arr)];这个函数利用Set自动去重的特性,适合处理数字、字符串等基本类型。
// 使用例子
const numbers = [1, 2, 2, 3, 4, 4];
console.log(unique(numbers)); // [1, 2, 3, 4]打乱数组顺序
const shuffle = <T>(arr: T[]) => [...arr].sort(() => Math.random() - 0.5);注意这里先创建数组副本,避免修改原数组。适合抽奖、随机出题等场景。
获取最后一个元素
const last = <T>(arr: T[]) => arr[arr.length - 1];比每次都写 arr[arr.length - 1] 更清晰,比如获取聊天记录的最后一条消息。
扁平化数组
const flat = <T>(arr: T[][]) => ([] as T[]).concat(...arr);将二维数组转成一维数组,比写循环更简洁。
字符串处理在表单验证和数据显示时经常用到。
首字母大写
const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();改进版,确保其余字母小写。适合处理用户名、标题等。
// 使用例子
console.log(capitalize("hello")); // "Hello"
console.log(capitalize("hELLO")); // "Hello"反转字符串
const reverse = (s: string) => [...s].reverse().join("");用展开运算符处理Unicode字符,比直接调用 reverse() 更准确。
生成随机字符串
const randomString = (len = 8) => Math.random().toString(36).slice(2, 2 + len);生成指定长度的随机字符串,适合创建临时ID或测试数据。
检查空字符串
const isEmpty = (s?: string | null) => !s?.trim();使用可选链操作符,安全地处理 undefined 或 null 值。表单验证时很实用。
数字的随机生成、验证和格式化。
生成范围内随机整数
const randomInt = (min: number, max: number) => 
  Math.floor(Math.random() * (max - min + 1)) + min;包含最小值和最大值,适合抽奖、验证码等场景。
// 使用例子:生成1-100的随机数
console.log(randomInt(1, 100));验证数字
const isNumber = (val: unknown): val is number => 
  typeof val === 'number' && !isNaN(val);处理接口返回数据时,先验证类型再使用,避免运行时错误。
千分位格式化
const formatNumber = (n: number) => n.toLocaleString();显示金额、统计数据时自动添加逗号分隔,提升可读性。
确保代码健壮性的类型检查工具。
基本类型判断
const isFunction = (val: unknown): val is Function => typeof val === 'function';
const isString = (val: unknown): val is string => typeof val === 'string';
const isNil = (val: unknown): val is null | undefined => val == null;这些函数让类型检查代码更易读,特别是处理未知的接口返回值时。
引用类型判断
const toTypeString = (val: unknown): string => Object.prototype.toString.call(val);
const isArray = Array.isArray;
const isMap = (val: unknown): val is Map<any, any> => toTypeString(val) === '[object Map]';
const isSet = (val: unknown): val is Set<any> => toTypeString(val) === '[object Set]';
const isDate = (val: unknown): val is Date => toTypeString(val) === '[object Date]';
const isRegExp = (val: unknown): val is RegExp => toTypeString(val) === '[object RegExp]';使用 Object.prototype.toString 准确判断内置对象类型。
处理日期、延时等时间相关需求。
延时执行
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));异步函数中使用,模拟网络延迟或实现轮询。
// 使用例子
async function demo() {
  console.log("开始");
  await sleep(1000); // 等待1秒
  console.log("结束");
}格式化日期
const formatDate = (d = new Date()) => d.toISOString().split("T")[0];快速获取YYYY-MM-DD格式的日期字符串。
判断闰年
const isLeapYear = (year: number) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;日历组件或日期验证时使用。
简化对象处理的实用工具。
简单深拷贝
const deepClone = <T>(obj: T): T => JSON.parse(JSON.stringify(obj));适合拷贝JSON安全的数据,复制表单数据时很实用。但不能处理函数、循环引用等复杂情况。
选取对象属性
const pick = <T, K extends keyof T>(obj: T, keys: K[]) =>
  keys.reduce((res, key) => {
    res[key] = obj[key];
    return res;
  }, {} as Pick<T, K>);从对象中挑选指定属性,比如只提取需要提交给接口的字段。
// 使用例子
const user = { name: "张三", age: 25, password: "123" };
console.log(pick(user, ["name", "age"])); // { name: "张三", age: 25 }排除对象属性
const omit = <T, K extends keyof T>(obj: T, keys: K[]) =>
  Object.entries(obj).reduce((res, [key, value]) => {
    if (!keys.includes(key as K)) res[key as keyof Omit<T, K>] = value;
    return res;
  }, {} as Omit<T, K>);排除指定属性,比如移除密码等敏感字段。
生成随机颜色
const randomColor = () => `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;生成十六进制颜色值,适合测试或随机主题。
检查空对象
const isEmptyObject = (obj: object) => Object.keys(obj).length === 0;快速判断对象是否为空。
获取URL参数
const getUrlParam = (name: string) => new URLSearchParams(window.location.search).get(name);方便地获取URL查询参数。
创建工具文件:把这些函数保存为 utils.ts,在项目中随处引用
按需导入:只导入需要的函数,避免打包体积过大
import { unique, shuffle } from './utils';添加测试:为常用函数编写单元测试,确保可靠性
类型安全:这些函数都包含TypeScript类型提示,使用时能获得更好的开发体验
这些单行函数就像开发中的瑞士军刀,虽然简单但在各种场景下都能派上用场。积累自己的工具库,能让编码工作更加高效顺畅。
建议你根据实际项目需求,把这些函数整理成自己的工具集,在遇到相应场景时直接使用,避免重复造轮子。
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!
jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效。
编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法。
不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼
属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。
近年来,远程工作愈来愈流行。远程工作能够帮助雇主能够降低运营成本,同时员工有机会实现工作与生活之间的平衡并避免通勤。下面我们就为大家推荐13个有用的工具
MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么?
vue 提供了组件功能,组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件
 传说程序员打字速度要快,很多人仍然会以这样一个标准来片面判断技术水平.拜托,你是一个程序员,不是一个打字员,打字快可以代表一些,但也并不代表什么.互联网行业还在纠结打字速度的,不是外行,就是一个没有独立思考的人.
编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有序的关键,也是克服压力、绝望和倦怠的好方法
因为代码对于性能的优化还是有实际性的价值的,并不是冰山哪一张,代码的编写实际对性能就起到了很大占比,就比如:一个常用common类,如果每一次使用都实例化那么这个类在内存中就会用很多个实例
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!