企业官网建设流程全解析

美工常用网站,深圳建设银行官方网站,兰州网站seo收费,wordpress获取登录密码错误JS 工具函数#xff08;utils#xff09;大全 JS 工具函数#xff08;utils#xff09;是项目中复用率极高的通用函数集合#xff0c;覆盖类型判断、数据处理、时间格式化、浏览器操作、数组/对象处理等场景#xff0c;能大幅提升开发效率。以下是高频实用的工具函数utils大全JS 工具函数utils是项目中复用率极高的通用函数集合覆盖类型判断、数据处理、时间格式化、浏览器操作、数组/对象处理等场景能大幅提升开发效率。以下是高频实用的工具函数按场景分类整理可直接集成到项目中。一、基础类型判断解决typeof不准确、复杂类型识别问题返回精准的类型字符串小写。/** * 精准判断数据类型 * param {*} value 要判断的值 * returns {string} 类型字符串如string/number/array/object/null/undefined等 */exportconstgetType(value){returnObject.prototype.toString.call(value).slice(8,-1).toLowerCase();};/** * 判断是否为字符串 * param {*} value * returns {boolean} */exportconstisString(value)getType(value)string;/** * 判断是否为数字排除 NaN * param {*} value * returns {boolean} */exportconstisNumber(value)getType(value)number!isNaN(value);/** * 判断是否为数组 * param {*} value * returns {boolean} */exportconstisArray(value)Array.isArray(value)||getType(value)array;/** * 判断是否为纯对象排除 null/数组/函数 * param {*} value * returns {boolean} */exportconstisPlainObject(value)getType(value)object;/** * 判断是否为函数 * param {*} value * returns {boolean} */exportconstisFunction(value)getType(value)function;/** * 判断是否为 null/undefined/空字符串/空数组/空对象 * param {*} value * returns {boolean} */exportconstisEmpty(value){if(valuenull||valueundefined)returntrue;if(isString(value))returnvalue.trim();if(isArray(value))returnvalue.length0;if(isPlainObject(value))returnObject.keys(value).length0;returnfalse;};二、数组工具函数处理数组去重、扁平化、查找、分组等高频需求。/** * 数组去重支持基本类型复杂类型需自定义 key * param {Array} arr 源数组 * param {string} [key] 复杂对象去重的键如 id * returns {Array} 去重后的数组 */exportconstuniqueArray(arr,key){if(!isArray(arr))return[];if(key){constmapnewMap();returnarr.filter(item!map.has(item[key])map.set(item[key],true));}return[...newSet(arr)];};/** * 数组扁平化支持指定深度 * param {Array} arr 源数组 * param {number} [depthInfinity] 扁平化深度 * returns {Array} 扁平化后的数组 */exportconstflattenArray(arr,depthInfinity){if(!isArray(arr))return[];returnarr.flat(depth);// 兼容低版本 JS// return arr.reduce((acc, val) acc.concat(Array.isArray(val) depth 1 ? flattenArray(val, depth - 1) : val), []);};/** * 数组分组按指定 key/函数分组 * param {Array} arr 源数组 * param {string|Function} key 分组键/分组函数 * returns {Object} 分组结果 { key: [items] } */exportconstgroupArray(arr,key){if(!isArray(arr))return{};returnarr.reduce((groups,item){constgroupKeyisFunction(key)?key(item):item[key];(groups[groupKey]||(groups[groupKey][])).push(item);returngroups;},{});};/** * 查找数组中符合条件的第一个元素的索引兼容找不到的情况 * param {Array} arr 源数组 * param {Function} predicate 条件函数 * returns {number} 索引找不到返回 -1 */exportconstfindIndex(arr,predicate){if(!isArray(arr)||!isFunction(predicate))return-1;returnarr.findIndex(predicate);};三、对象工具函数处理对象深拷贝、合并、取值、判空等。/** * 深拷贝支持基本类型、数组、对象排除循环引用 * param {*} obj 要拷贝的对象/值 * returns {*} 拷贝后的结果 */exportconstdeepClone(obj){if(objnull||typeofobj!object)returnobj;if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);// 处理数组/对象constcloneObjArray.isArray(obj)?[]:{};for(constkeyinobj){cloneObj[key]deepClone(obj[key]);}returncloneObj;};/** * 合并多个对象深合并后面的对象覆盖前面的 * param {...Object} objs 要合并的对象 * returns {Object} 合并后的对象 */exportconstmergeObjects(...objs){constresult{};objs.forEach(obj{if(isPlainObject(obj)){for(constkeyinobj){result[key]isPlainObject(obj[key])?mergeObjects(result[key]||{},obj[key]):obj[key];}}});returnresult;};/** * 安全获取对象嵌套属性避免 Cannot read property xxx of undefined * param {Object} obj 源对象 * param {string|Array} path 属性路径如 a.b.c 或 [a, b, c] * param {*} defaultValue 默认值 * returns {*} 属性值/默认值 */exportconstgetNestedValue(obj,path,defaultValueundefined){if(!isPlainObject(obj)||isEmpty(path))returndefaultValue;constpathArrisString(path)?path.split(.).filter(Boolean):path;returnpathArr.reduce((acc,key)(accacc[key]!undefined?acc[key]:defaultValue),obj);};/** * 删除对象中的空值属性null/undefined/空字符串/空数组/空对象 * param {Object} obj 源对象 * returns {Object} 清理后的对象 */exportconstremoveEmptyProps(obj){if(!isPlainObject(obj))returnobj;constresult{};for(constkeyinobj){constvalueobj[key];if(!isEmpty(value)){result[key]isPlainObject(value)?removeEmptyProps(value):value;}}returnresult;};四、时间/日期工具函数格式化时间、计算时间差、解析时间戳等。/** * 格式化时间默认YYYY-MM-DD HH:mm:ss * param {Date|number|string} date 时间Date对象/时间戳/字符串 * param {string} format 格式YYYY年, MM月, DD日, HH时, mm分, ss秒 * returns {string} 格式化后的时间 */exportconstformatDate(date,formatYYYY-MM-DD HH:mm:ss){lettargetDate;if(isNumber(date))targetDatenewDate(date);// 时间戳elseif(isString(date))targetDatenewDate(date);// 时间字符串elseif(dateinstanceofDate)targetDatedate;elsereturn;// 无效时间返回空constyeartargetDate.getFullYear();constmonthString(targetDate.getMonth()1).padStart(2,0);constdayString(targetDate.getDate()).padStart(2,0);consthourString(targetDate.getHours()).padStart(2,0);constminuteString(targetDate.getMinutes()).padStart(2,0);constsecondString(targetDate.getSeconds()).padStart(2,0);returnformat.replace(YYYY,year).replace(MM,month).replace(DD,day).replace(HH,hour).replace(mm,minute).replace(ss,second);};/** * 计算两个时间的差值返回天/时/分/秒 * param {Date|number} start 开始时间 * param {Date|number} end 结束时间 * returns {Object} { days, hours, minutes, seconds } */exportconstgetTimeDiff(start,end){conststartMsstartinstanceofDate?start.getTime():Number(start);constendMsendinstanceofDate?end.getTime():Number(end);constdiffMsMath.abs(endMs-startMs);// 毫秒差取绝对值constsecondsMath.floor(diffMs/1000)%60;constminutesMath.floor(diffMs/(1000*60))%60;consthoursMath.floor(diffMs/(1000*60*60))%24;constdaysMath.floor(diffMs/(1000*60*60*24));return{days,hours,minutes,seconds};};/** * 获取当前时间戳秒/毫秒 * param {boolean} [isSecondfalse] 是否返回秒级时间戳 * returns {number} 时间戳 */exportconstgetTimestamp(isSecondfalse){constnowDate.now();returnisSecond?Math.floor(now/1000):now;};/** * 判断是否为今天 * param {Date|number|string} date 要判断的时间 * returns {boolean} */exportconstisToday(date){consttargetDatenewDate(date);consttodaynewDate();return(targetDate.getFullYear()today.getFullYear()targetDate.getMonth()today.getMonth()targetDate.getDate()today.getDate());};五、浏览器/URL 工具函数处理 URL 参数、本地存储、浏览器特性检测等。/** * 获取 URL 中的查询参数 * param {string} [urlwindow.location.href] URL 地址 * returns {Object} 查询参数对象 */exportconstgetUrlParams(urlwindow.location.href){constparams{};constsearchnewURL(url).search.slice(1);// 去掉 ?if(!search)returnparams;search.split().forEach(item{const[key,value]item.split();if(key)params[decodeURIComponent(key)]decodeURIComponent(value||);});returnparams;};/** * 设置 URL 查询参数返回新 URL * param {string} [urlwindow.location.href] 原 URL * param {Object} params 要设置的参数 * returns {string} 新 URL */exportconstsetUrlParams(urlwindow.location.href,params){if(!isPlainObject(params)||isEmpty(params))returnurl;consturlObjnewURL(url);Object.entries(params).forEach(([key,value]){if(valueundefined||valuenull){urlObj.searchParams.delete(key);}else{urlObj.searchParams.set(key,value);}});returnurlObj.href;};/** * 本地存储封装localStorage支持过期时间 * returns {Object} { set, get, remove, clear } */exportconststorage((){/** * 设置本地存储 * param {string} key 键 * param {*} value 值支持任意类型 * param {number} [expire] 过期时间秒 */constset(key,value,expire){try{constdata{value,expire:expire?getTimestamp(true)expire:null};localStorage.setItem(key,JSON.stringify(data));}catch(e){console.error(localStorage 设置失败,e);}};/** * 获取本地存储 * param {string} key 键 * returns {*} 值过期返回 null */constget(key){try{conststrlocalStorage.getItem(key);if(!str)returnnull;constdataJSON.parse(str);// 检查过期if(data.expiredata.expiregetTimestamp(true)){remove(key);returnnull;}returndata.value;}catch(e){console.error(localStorage 获取失败,e);returnnull;}};/** * 删除本地存储 * param {string} key 键 */constremove(key){try{localStorage.removeItem(key);}catch(e){console.error(localStorage 删除失败,e);}};/** * 清空本地存储 */constclear(){try{localStorage.clear();}catch(e){console.error(localStorage 清空失败,e);}};return{set,get,remove,clear};})();/** * 防抖函数高频操作触发后延迟执行避免多次执行 * param {Function} fn 目标函数 * param {number} delay 延迟时间毫秒 * param {boolean} [immediatefalse] 是否立即执行 * returns {Function} 防抖后的函数 */exportconstdebounce(fn,delay,immediatefalse){lettimernull;returnfunction(...args){constcontextthis;if(timer)clearTimeout(timer);if(immediate!timer){fn.apply(context,args);}timersetTimeout((){fn.apply(context,args);timernull;},delay);};};/** * 节流函数高频操作在指定时间内只执行一次 * param {Function} fn 目标函数 * param {number} interval 间隔时间毫秒 * returns {Function} 节流后的函数 */exportconstthrottle(fn,interval){letlastTime0;returnfunction(...args){constcontextthis;constnowDate.now();if(now-lastTimeinterval){fn.apply(context,args);lastTimenow;}};};六、字符串工具函数处理字符串脱敏、格式化、转义等。/** * 字符串脱敏如手机号、身份证、姓名 * param {string} str 源字符串 * param {number} [start3] 保留前几位 * param {number} [end4] 保留后几位 * param {string} [mask*] 掩码字符 * returns {string} 脱敏后的字符串 */exportconstmaskString(str,start3,end4,mask*){if(!isString(str)||str.lengthstartend)returnstr;constprefixstr.slice(0,start);constsuffixstr.slice(-end);constmaskLenstr.length-start-end;returnprefixmask.repeat(maskLen)suffix;};/** * 千分位格式化数字如 1234567 → 1,234,567 * param {number|string} num 数字/数字字符串 * returns {string} 格式化后的字符串 */exportconstformatThousand(num){if(!isNumber(Number(num)))return0;returnnum.toString().replace(/\B(?(\d{3})(?!\d))/g,,);};/** * 转义 HTML 特殊字符防止 XSS * param {string} str 源字符串 * returns {string} 转义后的字符串 */exportconstescapeHtml(str){if(!isString(str))returnstr;constmap{:amp;,:lt;,:gt;,:quot;,:#39;};returnstr.replace(/[]/g,(match)map[match]);};/** * 随机生成指定长度的字符串 * param {number} [length8] 长度 * param {boolean} [includeNumbertrue] 是否包含数字 * param {boolean} [includeLettertrue] 是否包含字母 * returns {string} 随机字符串 */exportconstrandomString(length8,includeNumbertrue,includeLettertrue){letchars;if(includeLetter)charsABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz;if(includeNumber)chars0123456789;if(!chars)return;letresult;for(leti0;ilength;i){resultchars[Math.floor(Math.random()*chars.length)];}returnresult;};七、工程化使用建议1. 目录结构建议在项目中创建src/utils/目录按功能拆分文件src/ ├── utils/ │ ├── index.js # 入口文件导出所有工具函数 │ ├── type.js # 类型判断 │ ├── array.js # 数组处理 │ ├── object.js # 对象处理 │ ├── date.js # 时间处理 │ ├── browser.js # 浏览器相关 │ └── string.js # 字符串处理2. 入口文件导出index.jsexport*from./type.js;export*from./array.js;export*from./object.js;export*from./date.js;export*from./browser.js;export*from./string.js;3. 使用方式import{formatDate,uniqueArray,storage}from/utils;// 示例格式化时间console.log(formatDate(newDate(),YYYY-MM-DD));// 示例数组去重constarr[1,2,2,3];console.log(uniqueArray(arr));// [1,2,3]// 示例本地存储storage.set(token,abc123,3600);// 1小时过期console.log(storage.get(token));4. 注意事项兼容性工具函数中使用了 ES6 语法如padStart、Map低版本浏览器需配 Babel/Polyfill边界处理所有函数都做了入参校验避免传入非法值导致报错按需引入若项目体积敏感可单独引入某类函数如import { formatDate } from /utils/date.js单元测试关键工具函数建议写单元测试如 Jest确保逻辑稳定。以上工具函数覆盖 90% 日常开发场景可根据项目需求删减/扩展。