javascript可以做很多出色的事情，本篇文章给大家整理50+个实用工具函数，可以帮助你提高工作效率并可以帮助调试代码！！
1、isstatic: 检测数据是不是除了symbol外的原始数据。【相关推荐：javascript学习教程】
function isstatic(value) { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null )}
2、isprimitive：检测数据是不是原始数据
function isprimitive(value) { return isstatic(value) || typeof value === 'symbol'}
3、isobject:判断数据是不是引用类型的数据（例如：array,function,object,regexe,new number(),new string())
function isobject(value) { let type = typeof value; return value != null && (type == 'object' || type == 'function');}
4、isobjectlike:检查value是否是类对象。如果一个值是类对象，那么它不应该是null，而且typeof后的结果是“object”。
function isobjectlike(value) { return value != null && typeof value == 'object';}
5、getrawtype：获取数据类型，返回结果为number、string、object、array等
function getrawtype(value) { return object.prototype.tostring.call(value).slice(8, -1)}// getorawtype([]) ⇒ array
6、isplainobject：判断数据是不是object类型的数据
function isplainobject(obj) { return object.prototype.tostring.call(obj) === '[object object]'}
7、isarray：判断数据是不是数组类型的数据（array.isarray的兼容写法）
function isarray(arr) { return object.prototype.tostring.call(arr) === '[object array]'}// 将isarray挂载到array上array.isarray = array.isarray || isarray;
8、isregexp：判断数据是不是正则对象
function isregexp(value) { return object.prototype.tostring.call(value) === '[object regexp]'}
9、isdate：判断数据是不是时间对象
function isdate(value) { return object.prototype.tostring.call(value) === '[object date]'}
10、isnative：判断value是不是浏览器内置函数
内置函数tostring后的主体代码块为[native code] ，而非内置函数则为相关代码，所以非内置函数可以进行拷贝（tostring后掐头去尾再由function转）
function isnative(value) { return typeof value === 'function' && /native code/.test(value.tostring())}
11、isfunction：检查value是不是函数
function isfunction(value) { return object.prototype.tostring.call(value) === '[object function]'}
12、islength：检查value是否为有效的类数组长度
function islength(value) { return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= number.max_safe_integer;}
13、isarraylike：检查value是否是类数组
如果一个值被认为是类数组，那么它不是一个函数，并且value.length是个整数，大于等于0，小于或等于number.max_safe_integer。这里字符串也被当作类数组。
function isarraylike(value) { return value != null && islength(value.length) && !isfunction(value);}
14、isempty：检查value是否为空
如果是null，直接返回true；如果是类数组，判断数据长度；如果是object对象，判断是否具有属性；如果是其他数据，直接返回false（也可以改为返回true）
function isempty(value) { if (value == null) { return true; } if (isarraylike(value)) { return !value.length; } else if (isplainobject(value)) { for (let key in value) { if (hasownproperty.call(value, key)) { return false; } } } return false;}
15、cached：记忆函数：缓存函数的运算结果
function cached(fn) { let cache = object.create(null); return function cachedfn(str) { let hit = cache[str]; return hit || (cache[str] = fn(str)) }}
16、camelize：横线转驼峰命名
let camelizere = /-(\w)/g;function camelize(str) { return str.replace(camelizere, function(_, c) { return c ? c.touppercase() : ''; })}//ab-cd-ef ==> abcdef//使用记忆函数let _camelize = cached(camelize)
17、hyphenate：驼峰命名转横线命名：拆分字符串，使用-相连，并且转换为小写
let hyphenatere = /\b([a-z])/g;function hyphenate(str){ return str.replace(hyphenatere, '-$1').tolowercase()}//abcd ==> ab-cd//使用记忆函数let _hyphenate = cached(hyphenate);
18、capitalize：字符串首位大写
function capitalize(str) { return str.charat(0).touppercase() + str.slice(1)}// abc ==> abc//使用记忆函数let _capitalize = cached(capitalize)
19、extend：将属性混合到目标对象中
function extend(to, _form) { for(let key in _form) { to[key] = _form[key]; } return to}
20、object.assign:对象属性复制，浅拷贝
object.assign = object.assign || function() { if (arguments.length == 0) throw new typeerror('cannot convert undefined or null to object'); let target = arguments[0], args = array.prototype.slice.call(arguments, 1), key; args.foreach(function(item) { for (key in item) { item.hasownproperty(key) && (target[key] = item[key]) } }) return target}
使用object.assign可以钱克隆一个对象：
let clone = object.assign({}, target);
简单的深克隆可以使用json.parse()和json.stringify()，这两个api是解析json数据的，所以只能解析除symbol外的原始类型及数组和对象。
let clone = json.parse( json.stringify(target) )
21、clone：克隆数据，可深度克隆
这里列出了原始类型，时间、正则、错误、数组、对象的克隆规则，其他的可自行补充
function clone(value, deep) { if (isprimitive(value)) { return value } if (isarraylike(value)) { //是类数组 value = array.prototype.slice.call(vall) return value.map(item => deep ? clone(item, deep) : item) } else if (isplainobject(value)) { //是对象 let target = {}, key; for (key in value) { value.hasownproperty(key) && ( target[key] = deep ? clone(value[key], value[key] )) } } let type = getrawtype(value); switch(type) { case 'date': case 'regexp': case 'error': value = new window[type](value); break; } return value}
22、识别各种浏览器及平台
//运行环境是浏览器let inbrowser = typeof window !== 'undefined';//运行环境是微信let inweex = typeof wxenvironment !== 'undefined' && !!wxenvironment.platform;let weexplatform = inweex && wxenvironment.platform.tolowercase();//浏览器 ua 判断let ua = inbrowser && window.navigator.useragent.tolowercase();let isie = ua && /msie|trident/.test(ua);let isie9 = ua && ua.indexof('msie 9.0') > 0;let isedge = ua && ua.indexof('edge/') > 0;let isandroid = (ua && ua.indexof('android') > 0) || (weexplatform === 'android');let isios = (ua && /iphone|ipad|ipod|ios/.test(ua)) || (weexplatform === 'ios');let ischrome = ua && /chrome\/\d+/.test(ua) && !isedge;
23、getexplorerinfo：获取浏览器信息
function getexplorerinfo() { let t = navigator.useragent.tolowercase(); return 0 <= t.indexof("msie") ? { //ie < 11 type: "ie", version: number(t.match(/msie ([\d]+)/)[1]) } : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? { // ie 11 type: "ie", version: 11 } : 0 <= t.indexof("edge") ? { type: "edge", version: number(t.match(/edge\/([\d]+)/)[1]) } : 0 <= t.indexof("firefox") ? { type: "firefox", version: number(t.match(/firefox\/([\d]+)/)[1]) } : 0 <= t.indexof("chrome") ? { type: "chrome", version: number(t.match(/chrome\/([\d]+)/)[1]) } : 0 <= t.indexof("opera") ? { type: "opera", version: number(t.match(/opera.([\d]+)/)[1]) } : 0 <= t.indexof("safari") ? { type: "safari", version: number(t.match(/version\/([\d]+)/)[1]) } : { type: t, version: -1 }}
24、ispcbroswer：检测是否为pc端浏览器模式
function ispcbroswer() { let e = navigator.useragent.tolowercase() , t = "ipad" == e.match(/ipad/i) , i = "iphone" == e.match(/iphone/i) , r = "midp" == e.match(/midp/i) , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i) , a = "ucweb" == e.match(/ucweb/i) , o = "android" == e.match(/android/i) , s = "windows ce" == e.match(/windows ce/i) , l = "windows mobile" == e.match(/windows mobile/i); return !(t || i || r || n || a || o || s || l)}
25、unique： 数组去重，返回一个新数组
function unique(arr){ if(!isarraylink(arr)){ //不是类数组对象 return arr } let result = [] let objarr = [] let obj = object.create(null) arr.foreach(item => { if(isstatic(item)){//是除了symbol外的原始数据 let key = item + '_' + getrawtype(item); if(!obj[key]){ obj[key] = true result.push(item) } }else{//引用类型及symbol if(!objarr.includes(item)){ objarr.push(item) result.push(item) } } }) return resulte}
26、set简单实现
window.set = window.set || (function () { function set(arr) { this.items = arr ? unique(arr) : []; this.size = this.items.length; // array的大小 } set.prototype = { add: function (value) { // 添加元素,若元素已存在,则跳过，返回 set 结构本身。 if (!this.has(value)) { this.items.push(value); this.size++; } return this; }, clear: function () { //清除所有成员，没有返回值。 this.items = [] this.size = 0 }, delete: function (value) { //删除某个值，返回一个布尔值，表示删除是否成功。 return this.items.some((v, i) => { if(v === value){ this.items.splice(i,1) return true } return false }) }, has: function (value) { //返回一个布尔值，表示该值是否为set的成员。 return this.items.some(v => v === value) }, values: function () { return this.items }, } return set;}());
27、repeat：生成一个重复的字符串，有n个str组成，可修改为填充为数组等
function repeat(str, n) { let res = ''; while(n) { if(n % 2 === 1) { res += str; } if(n > 1) { str += str; } n >>= 1; } return res};//repeat('123',3) ==> 123123123
28、dateformater：格式化时间
function dateformater(formater, t){ let date = t ? new date(t) : new date(), y = date.getfullyear() + '', m = date.getmonth() + 1, d = date.getdate(), h = date.gethours(), m = date.getminutes(), s = date.getseconds(); return formater.replace(/yyyy|yyyy/g,y) .replace(/yy|yy/g,y.substr(2,2)) .replace(/mm/g,(m<10?'0':'') + m) .replace(/dd/g,(d<10?'0':'') + d) .replace(/hh|hh/g,(h<10?'0':'') + h) .replace(/mm/g,(m<10?'0':'') + m) .replace(/ss/g,(s<10?'0':'') + s)}// dateformater('yyyy-mm-dd hh:mm', t) ==> 2019-06-26 18:30// dateformater('yyyymmddhhmm', t) ==> 201906261830
29、datestrforma：将指定字符串由一种时间格式转化为另一种。from的格式应对应str的位置
function datestrforma(str, from, to){ //'20190626' 'yyyymmdd' 'yyyy年mm月dd日' str += '' let y = '' if(~(y = from.indexof('yyyy'))){ y = str.substr(y, 4) to = to.replace(/yyyy|yyyy/g,y) }else if(~(y = from.indexof('yy'))){ y = str.substr(y, 2) to = to.replace(/yy|yy/g,y) } let k,i ['m','d','h','h','m','s'].foreach(s =>{ i = from.indexof(s+s) k = ~i ? str.substr(i, 2) : '' to = to.replace(s+s, k) }) return to}// datestrforma('20190626', 'yyyymmdd', 'yyyy年mm月dd日') ==> 2019年06月26日// datestrforma('121220190626', '----yyyymmdd', 'yyyy年mm月dd日') ==> 2019年06月26日// datestrforma('2019年06月26日', 'yyyy年mm月dd日', 'yyyymmdd') ==> 20190626// 一般的也可以使用正则来实现//'2019年06月26日'.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3') ==> 2019-06-26
30、getpropbypath：根据字符串路径获取对象属性：‘obj[0].count’
function getpropbypath(obj, path, strict) { let tempobj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); //将[0]转化为.0 path = path.replace(/^\./, ''); //去除开头的. let keyarr = path.split('.'); //根据.切割 let i = 0; for (let len = keyarr.length; i < len - 1; ++i) { if (!tempobj && !strict) break; let key = keyarr[i]; if (key in tempobj) { tempobj = tempobj[key]; } else { if (strict) {//开启严格模式，没找到对应key值，抛出错误 throw new error('please transfer a valid prop path to form item!'); } break; } } return { o: tempobj, //原始数据 k: keyarr[i], //key值 v: tempobj ? tempobj[keyarr[i]] : null // key值对应的值 };};
31、geturlparam：获取url参数，返回一个对象
function geturlparam(){ let url = document.location.tostring(); let arrobj = url.split("?"); let params = object.create(null) if (arrobj.length > 1){ arrobj = arrobj[1].split("&"); arrobj.foreach(item=>{ item = item.split("="); params[item[0]] = item[1] }) } return params;}// ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
32、downloadfile：base64数据导出文件，文件下载
function downloadfile(filename, data) { let downloadlink = document.createelement('a'); if (downloadlink) { document.body.appendchild(downloadlink); downloadlink.style = 'display: none'; downloadlink.download = filename; downloadlink.href = data; if (document.createevent) { let downloadevt = document.createevent('mouseevents'); downloadevt.initevent('click', true, false); downloadlink.dispatchevent(downloadevt); } else if (document.createeventobject) { downloadlink.fireevent('onclick'); } else if (typeof downloadlink.onclick == 'function') { downloadlink.onclick(); } document.body.removechild(downloadlink); }}
33、tofullscreen：全屏
function tofullscreen() { let elem = document.body; elem.webkitrequestfullscreen ? elem.webkitrequestfullscreen() : elem.mozrequestfullscreen ? elem.mozrequestfullscreen() : elem.msrequestfullscreen ? elem.msrequestfullscreen() : elem.requestfullscreen ? elem.requestfullscreen() : alert("浏览器不支持全屏");}
34、exitfullscreen：退出全屏
function exitfullscreen() { let elem = parent.document; elem.webkitcancelfullscreen ? elem.webkitcancelfullscreen() : elem.mozcancelfullscreen ? elem.mozcancelfullscreen() : elem.cancelfullscreen ? elem.cancelfullscreen() : elem.msexitfullscreen ? elem.msexitfullscreen() : elem.exitfullscreen ? elem.exitfullscreen() : alert("切换失败,可尝试esc退出");}
35、requestanimationframe：window动画
window.requestanimationframe = window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.msrequestanimationframe || window.orequestanimationframe || function (callback) { //为了使settimteout的尽可能的接近每秒60帧的效果 window.settimeout(callback, 1000 / 60); }window.cancelanimationframe = window.cancelanimationframe || window.webkitcancelanimationframe || window.mozcancelanimationframe || window.mscancelanimationframe || window.ocancelanimationframe || function (id) { //为了使settimteout的尽可能的接近每秒60帧的效果 window.cleartimeout(id); }
36、_isnan：检查数据是否是非数字值
function _isnan(v){ return !(typeof v === 'string' || typeof v === 'number') || isnan(v)}
37、max：求取数组中非nan数据中的最大值
function max(arr){ arr = arr.filter(item => !_isnan(item)) return arr.length ? math.max.apply(null, arr) : undefined}//max([1, 2, '11', null, 'fdf', []]) ==> 11
38、min：求取数组中非nan数据中的最小值
function min(arr){ arr = arr.filter(item => !_isnan(item)) return arr.length ? math.min.apply(null, arr) : undefined}//min([1, 2, '11', null, 'fdf', []]) ==> 1
39、random：返回一个lower-upper直接的随机数。（lower、upper无论正负与大小，但必须是非nan的数据）
function random(lower, upper) { lower = +lower || 0 upper = +upper || 0 return math.random() * (upper - lower) + lower;}//random(0, 0.5) ==> 0.3567039135734613//random(2, 1) ===> 1.6718418553475423//random(-2, -1) ==> -1.4474325452361945
40、object.keys:返回一个由一个给定对象的自身可枚举属性组成的数组
object.keys = object.keys || function keys(object) { if (object === null || object === undefined) { throw new typeerror('cannot convert undefined or null to object'); } let result = []; if (isarraylike(object) || isplainobject(object)) { for (let key in object) { object.hasownproperty(key) && (result.push(key)) } } return result;}
41、object.values:返回一个给定对象自身的所有可枚举属性值的数组
object.values = object.values || function values(object) { if (object === null || object === undefined) { throw new typeerror('cannot convert undefined or null to object'); } let result = []; if (isarraylike(object) || isplainobject(object)) { for (let key in object) { object.hasownproperty(key) && (result.push(object[key])) } } return result;}
42、arr.fill:使用value值填充array，从start位置开始，到end位置结束（但不包含end位置），返回原数组
array.prototype.fill = array.prototype.fill || function fill(value, start, end) { let ctx = this let length = ctx.length; start = parseint(start) if(isnan(start)){ start = 0 }else if (start < 0) { start = -start > length ? 0 : (length + start); } end = parseint(end) if(isnan(end) || end > length){ end = length }else if (end < 0) { end += length; } while (start < end) { ctx[start++] = value; } return ctx;}//array(3).fill(2) ===> [2, 2, 2]
43、arr.includes:用来判断一个数组是否包含一个指定的值，如果是返回true，否则返回false，可指定开始查询的位置
array.prototype.includes = array.prototype.includes || function includes(value, start) { let ctx = this; let length = ctx.length; start = parseint(start) if(isnan(start)) { start = 0 } else if (start < 0) { start = -start > length ? 0 : (length + start); } let index = ctx.indexof(value); return index >= start;}
44、返回数组中通过测试（函数fn内判断）的第一个元素的值
array.prototype.find = array.prototype.find || function find(fn, ctx) { ctx = ctx || this; let result; ctx.some((value, index, arr), thisvalue) => { return fn(value, index, arr) ? (result = value, true) : false }) return result}
45、arr.findindex:返回数组中通过测试（函数fn内判断）的第一个元素的下标
array.prototype.findindex = array.prototype.findindex || function findindex(fn, ctx){ ctx = ctx || this let result; ctx.some((value, index, arr), thisvalue) => { return fn(value, index, arr) ? (result = index, true) : false }) return result}
46、performance.timing:利用performance.timing进行性能分析
window.onload = function() { settimeout(function() { let t = performance.timing; console.log('dns查询耗时 ：' + (t.domainlookupend - t.domainlookupstart).tofixed(0)) console.log('tcp链接耗时 ：' + (t.connectend - t.connectstart).tofixed(0)) console.log('request请求耗时 ：' + (t.responseend - t.responsestart).tofixed(0)) console.log('解析dom树耗时 ：' + (t.domcomplete - t.dominteractive).tofixed(0)) console.log('白屏时间 ：' + (t.responsestart - t.navigationstart).tofixed(0)) console.log('domready时间 ：' + (t.domcontentloadedeventend - t.navigationstart).tofixed(0)) console.log('onload时间 ：' + (t.loadeventend - t.navigationstart).tofixed(0)) if (t = performance.memory) { console.log('js内存使用占比：' + (t.usedjsheapsize / t.totaljsheapsize * 100).tofixed(2) + '%') } })}
47、禁止某些键盘事件
document.addeventlistener('keydown', function(event) { return !( 112 == event.keycode || //禁止f1 123 == event.keycode || //禁止f12 event.ctrlkey && 82 == event.keycode || //禁止ctrl+r event.ctrlkey && 18 == event.keycode || //禁止ctrl+n event.shiftkey && 121 == event.keycode || //禁止shift+f10 event.altkey && 115 == event.keycode || //禁止alt+f4 "a" == event.srcelement.tagname && event.shiftkey //禁止shift+点击a标签 ) || （event.returnvalue = false）});
48、禁止右键、选择、复制
['contextmenu', 'selectstart', 'copy'].foreach(function(ev) { document.addeventlistener(ev, function(event) { return event.returnvalue = false; })});
49、numadd - -计算数字相加
function numadd(num1, num2) { let basenum, basenum1, basenum2; try { basenum1 = num1.tostring().split(".")[1].length; } catch (e) { basenum1 = 0; } try { basenum2 = num2.tostring().split(".")[1].length; } catch (e) { basenum2 = 0; } basenum = math.pow(10, math.max(basenum1, basenum2)); return (num1 * basenum + num2 * basenum) / basenum;};
50、numsub - - 计算数字相减
function numsub(num1, num2) { let basenum, basenum1, basenum2; let precision;// 精度 try { basenum1 = num1.tostring().split(".")[1].length; } catch (e) { basenum1 = 0; } try { basenum2 = num2.tostring().split(".")[1].length; } catch (e) { basenum2 = 0; } basenum = math.pow(10, math.max(basenum1, basenum2)); precision = (basenum1 >= basenum2) ? basenum1 : basenum2; return ((num1 * basenum - num2 * basenum) / basenum).tofixed(precision);};
51、nummulti - - 计算数字相乘
function nummulti(num1, num2) { let basenum = 0; try { basenum += num1.tostring().split(".")[1].length; } catch (e) { } try { basenum += num2.tostring().split(".")[1].length; } catch (e) { } return number(num1.tostring().replace(".", "")) * number(num2.tostring().replace(".", "")) / math.pow(10, basenum);};
52、numdiv - - 计算数字相除
function numdiv(num1, num2) { let basenum1 = 0, basenum2 = 0; let basenum3, basenum4; try { basenum1 = num1.tostring().split(".")[1].length; } catch (e) { basenum1 = 0; } try { basenum2 = num2.tostring().split(".")[1].length; } catch (e) { basenum2 = 0; } with (math) { basenum3 = number(num1.tostring().replace(".", "")); basenum4 = number(num2.tostring().replace(".", "")); return (basenum3 / basenum4) * pow(10, basenum2 - basenum1); }};
【相关视频教程推荐：web前端】
以上就是javascript中的50+个实用工具函数（总结）的详细内容。