|
|
51CTO旗下网站
|
|
移动端

JavaScript开发常用工具函数

本文总结了48个JS开发常用工具函数,快来看看都有哪些,一定对你有所帮助!

作者:hfhan来源:segmentfault|2019-07-08 15:10

【大咖·来了 第7期】10月24日晚8点观看《智能导购对话机器人实践》

 1、isStatic:检测数据是不是除了symbol外的原始数据

  1. function isStatic(value) {  
  2.     return(  
  3.         typeof value === 'string' ||  
  4.         typeof value === 'number' ||  
  5.         typeof value === 'boolean' ||  
  6.         typeof value === 'undefined' ||  
  7.         value === null  
  8.     )  

2、isPrimitive:检测数据是不是原始数据

  1. function isPrimitive(value) {  
  2.     return isStatic(value) || typeof value === 'symbol'  

3、isObject:判断数据是不是引用类型的数据 (例如: arrays, functions, objects, regexes, new Number(0),以及 new String(''))

  1. function isObject(value) {  
  2.       let type = typeof value;  
  3.       return value != null && (type == 'object' || type == 'function');  

4、isObjectLike:检查 value 是否是 类对象。 如果一个值是类对象,那么它不应该是 null,而且 typeof 后的结果是 "object"

  1. function isObjectLike(value) {  
  2.       return value != null && typeof value == 'object';  

5、getRawType:获取数据类型,返回结果为 Number、String、Object、Array等

  1. function getRawType(value) {  
  2.     return Object.prototype.toString.call(value).slice(8, -1)  
  3.  
  4. //getoRawType([]) ==> Array 

6、isPlainObject:判断数据是不是Object类型的数据

  1. function isPlainObject(obj) {  
  2.     return Object.prototype.toString.call(obj) === '[object Object]'  

7、isArray:判断数据是不是数组类型的数据

  1. function isArray(arr) {  
  2.     return Object.prototype.toString.call(arr) === '[object Array]'  

将isArray挂载到Array上

  1. ArrayArray.isArray = Array.isArray || isArray; 

8、isRegExp:判断数据是不是正则对象

  1. function isRegExp(value) {  
  2.     return Object.prototype.toString.call(value) === '[object RegExp]'  

9、isDate:判断数据是不是时间对象

  1. function isDate(value) {  
  2.     return Object.prototype.toString.call(value) === '[object Date]'  

10、isNative:判断 value 是不是浏览器内置函数

内置函数toString后的主体代码块为 [native code] ,而非内置函数则为相关代码,所以非内置函数可以进行拷贝(toString后掐头去尾再由Function转)

  1. function isNative(value) {  
  2.     return typeof value === 'function' && /native code/.test(value.toString())  

11、isFunction:检查 value 是不是函数

  1. function isFunction(value) {  
  2.     return Object.prototype.toString.call(value) === '[object Function]'  

12、isLength:检查 value 是否为有效的类数组长度

  1. function isLength(value) {  
  2.       return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= Number.MAX_SAFE_INTEGER;  

13、isArrayLike:检查 value 是否是类数组

如果一个值被认为是类数组,那么它不是一个函数,并且value.length是个整数,大于等于 0,小于或等于 Number.MAX_SAFE_INTEGER。这里字符串也将被当作类数组

  1. function isArrayLike(value) {  
  2.       return value != null && isLength(value.length) && !isFunction(value);  

14、isEmpty:检查 value 是否为空

如果是null,直接返回true;如果是类数组,判断数据长度;如果是Object对象,判断是否具有属性;如果是其他数据,直接返回false(也可改为返回true)

  1. function isEmpty(value) {  
  2.     if (value == null) {  
  3.         return true;  
  4.     }  
  5.     if (isArrayLike(value)) {  
  6.         return !value.length;  
  7.     }else if(isPlainObject(value)){  
  8.           for (let key in value) {  
  9.             if (hasOwnProperty.call(value, key)) {  
  10.               return false;  
  11.             }  
  12.         }  
  13.         return true;  
  14.     }  
  15.     return false;  

15、cached:记忆函数:缓存函数的运算结果

  1. function cached(fn) {  
  2.     let cache = Object.create(null);  
  3.     return function cachedFn(str) {  
  4.         let hit = cache[str];  
  5.         return hit || (cache[str] = fn(str))  
  6.     }  

16、camelize:横线转驼峰命名

  1. let camelizeRE = /-(\w)/g;  
  2. function camelize(str) {  
  3.     return str.replace(camelizeRE, function(_, c) {  
  4.         return c ? c.toUpperCase() : '';  
  5.     })  
  6.  
  7. //ab-cd-ef ==> abCdEf  
  8. //使用记忆函数  
  9. let _camelize = cached(camelize) 

17、hyphenate:驼峰命名转横线命名:拆分字符串,使用 - 相连,并且转换为小写

  1. let hyphenateRE = /\B([A-Z])/g;  
  2. function hyphenate(str){  
  3.     return str.replace(hyphenateRE, '-$1').toLowerCase()  
  4.  
  5. //abCd ==> ab-cd  
  6. //使用记忆函数  
  7. let _hyphenate = cached(hyphenate); 

18、capitalize:字符串首位大写

  1. function capitalize(str){  
  2.     return str.charAt(0).toUpperCase() + str.slice(1)  
  3.  
  4. // abc ==> Abc  
  5. //使用记忆函数  
  6. let _capitalize = cached(capitalize) 

19、extend:将属性混合到目标对象中

  1. function extend(to, _from) {  
  2.     for(let key in _from) {  
  3.         to[key] = _from[key];  
  4.     }  
  5.     return to  

20、Object.assign:对象属性复制,浅拷贝

  1. ObjectObject.assign = Object.assign || function(){  
  2.     if(arguments.length == 0) throw new TypeError('Cannot convert undefined or null to object');    
  3.     let target = arguments[0],  
  4.         args = Array.prototype.slice.call(arguments, 1),  
  5.         key  
  6.     args.forEach(function(item){  
  7.         for(key in item){  
  8.             item.hasOwnProperty(key) && ( target[key] = item[key] )  
  9.         }  
  10.     })  
  11.     return target  

使用Object.assign可以浅克隆一个对象:

  1. let clone = Object.assign({}, target) 

简单的深克隆可以使用JSON.parse()和JSON.stringify(),这两个api是解析json数据的,所以只能解析除symbol外的原始类型及数组和对象

  1. let clone = JSON.parse( JSON.stringify(target) ) 

21、clone:克隆数据,可深度克隆

这里列出了原始类型,时间、正则、错误、数组、对象的克隆规则,其他的可自行补充

  1. function clone(value, deep){  
  2.     if(isPrimitive(value)){  
  3.         return value  
  4.     }    
  5.     if (isArrayLike(value)) { //是类数组  
  6.         value = Array.prototype.slice.call(value)  
  7.         return value.map(item => deep ? clone(item, deep) : item)  
  8.        }else if(isPlainObject(value)){ //是对象  
  9.            let target = {}, key;  
  10.           for (key in value) {  
  11.             value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key], deep) : value[key] )  
  12.         }  
  13.     }   
  14.     let type = getRawType(value)   
  15.     switch(type){  
  16.         case 'Date':  
  17.         case 'RegExp':   
  18.         case 'Error': value = new window[type](value); break;  
  19.     }  
  20.     return value  

22、识别各种浏览器及平台

  1. //运行环境是浏览器  
  2. let inBrowser = typeof window !== 'undefined';  
  3. //运行环境是微信  
  4. let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;  
  5. let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();  
  6. //浏览器 UA 判断  
  7. let UA = inBrowser && window.navigator.userAgent.toLowerCase();  
  8. let isIE = UA && /msie|trident/.test(UA);  
  9. let isIE9 = UA && UA.indexOf('msie 9.0') > 0;  
  10. let isEdge = UA && UA.indexOf('edge/') > 0;  
  11. let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');  
  12. let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');  
  13. let isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge; 

23、getExplorerInfo:获取浏览器信息

  1. function getExplorerInfo() {  
  2.     let t = navigator.userAgent.toLowerCase();  
  3.     return 0 <= t.indexOf("msie") ? { //ie < 11  
  4.         type: "IE",  
  5.         version: Number(t.match(/msie ([\d]+)/)[1])  
  6.     } : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? { // ie 11  
  7.         type: "IE",  
  8.         version: 11  
  9.     } : 0 <= t.indexOf("edge") ? {  
  10.         type: "Edge",  
  11.         version: Number(t.match(/edge\/([\d]+)/)[1])  
  12.     } : 0 <= t.indexOf("firefox") ? {  
  13.         type: "Firefox",  
  14.         version: Number(t.match(/firefox\/([\d]+)/)[1])  
  15.     } : 0 <= t.indexOf("chrome") ? {  
  16.         type: "Chrome",  
  17.         version: Number(t.match(/chrome\/([\d]+)/)[1])  
  18.     } : 0 <= t.indexOf("opera") ? {  
  19.         type: "Opera",  
  20.         version: Number(t.match(/opera.([\d]+)/)[1])  
  21.     } : 0 <= t.indexOf("Safari") ? {  
  22.         type: "Safari",  
  23.         version: Number(t.match(/version\/([\d]+)/)[1])  
  24.     } : {  
  25.         type: t,  
  26.         version: -1  
  27.     }  

24、isPCBroswer:检测是否为PC端浏览器模式

  1. function isPCBroswer() {  
  2.     let e = navigator.userAgent.toLowerCase()  
  3.         , t = "ipad" == e.match(/ipad/i)  
  4.         , i = "iphone" == e.match(/iphone/i)  
  5.         , r = "midp" == e.match(/midp/i)  
  6.         , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)  
  7.         , a = "ucweb" == e.match(/ucweb/i)  
  8.         , o = "android" == e.match(/android/i)  
  9.         , s = "windows ce" == e.match(/windows ce/i)  
  10.         , l = "windows mobile" == e.match(/windows mobile/i);  
  11.     return !(t || i || r || n || a || o || s || l)  

25、unique:数组去重,返回一个新数组

  1. function unique(arr){  
  2.     if(!isArrayLink(arr)){ //不是类数组对象  
  3.         return arr  
  4.     }  
  5.     let result = []  
  6.     let objarr = []  
  7.     let obj = Object.create(null)   
  8.     arr.forEach(item => {  
  9.         if(isStatic(item)){//是除了symbol外的原始数据  
  10.             let key = item + '_' + getRawType(item);  
  11.             if(!obj[key]){  
  12.                 obj[key] = true  
  13.                 result.push(item)  
  14.             }  
  15.         }else{//引用类型及symbol  
  16.             if(!objarr.includes(item)){  
  17.                 objarr.push(item)  
  18.                 result.push(item)  
  19.             }  
  20.         }  
  21.     })    
  22.     return resulte  

26、Set简单实现

  1. windowwindow.Set = window.Set || (function () {  
  2.     function Set(arr) {  
  3.         this.items = arr ? unique(arr) : [];  
  4.         thisthis.size = this.items.length; // Array的大小  
  5.     }  
  6.     Set.prototype = {  
  7.         add: function (value) {  
  8.             // 添加元素,若元素已存在,则跳过,返回 Set 结构本身。  
  9.             if (!this.has(value)) {  
  10.                 this.items.push(value);  
  11.                 this.size++;  
  12.             }  
  13.             return this;  
  14.         },  
  15.         clear: function () {  
  16.             //清除所有成员,没有返回值。  
  17.             this.items = []  
  18.             this.size = 0  
  19.         },  
  20.         delete: function (value) {  
  21.             //删除某个值,返回一个布尔值,表示删除是否成功。  
  22.             return this.items.some((v, i) => {  
  23.                 if(v === value){  
  24.                     this.items.splice(i,1)  
  25.                     return true  
  26.                 }  
  27.                 return false  
  28.             })  
  29.         },  
  30.         has: function (value) {  
  31.             //返回一个布尔值,表示该值是否为Set的成员。  
  32.             return this.items.some(v => v === value)  
  33.         },  
  34.         values: function () {  
  35.             return this.items  
  36.         },  
  37.     }  
  38.     return Set;  
  39. }()); 

27、repeat:生成一个重复的字符串,有n个str组成,可修改为填充为数组等

  1. function repeat(str, n) {  
  2.     let res = '' 
  3.     while(n) {  
  4.         if(n % 2 === 1) {  
  5.             res += str;  
  6.         }  
  7.         if(n > 1) {  
  8.             str += str;  
  9.         }  
  10.         n >>= 1;  
  11.     }  
  12.     return res  
  13. };  
  14. //repeat('123',3) ==> 123123123 

28、dateFormater:格式化时间

  1. function dateFormater(formater, t){  
  2.     let date = t ? new Date(t) : new Date(),  
  3.         Y = date.getFullYear() + '',  
  4.         M = date.getMonth() + 1,  
  5.         D = date.getDate(),  
  6.         H = date.getHours(),  
  7.         m = date.getMinutes(),  
  8.         s = date.getSeconds();  
  9.     return formater.replace(/YYYY|yyyy/g,Y)  
  10.         .replace(/YY|yy/g,Y.substr(2,2))  
  11.         .replace(/MM/g,(M<10?'0':'') + M)  
  12.         .replace(/DD/g,(D<10?'0':'') + D)  
  13.         .replace(/HH|hh/g,(H<10?'0':'') + H)  
  14.         .replace(/mm/g,(m<10?'0':'') + m)  
  15.         .replace(/ss/g,(s<10?'0':'') + s)  
  16.  
  17. // dateFormater('YYYY-MM-DD HH:mm', t) ==> 2019-06-26 18:30  
  18. // dateFormater('YYYYMMDDHHmm', t) ==> 201906261830 

29、dateStrForma:将指定字符串由一种时间格式转化为另一种

from的格式应对应str的位置

  1. function dateStrForma(str, from, to){  
  2.     //'20190626' 'YYYYMMDD' 'YYYY年MM月DD日'  
  3.     str += ''  
  4.     let Y = ''  
  5.     if(~(Y = from.indexOf('YYYY'))){  
  6.         Y = str.substr(Y, 4)  
  7.         toto = to.replace(/YYYY|yyyy/g,Y)  
  8.     }else if(~(Y = from.indexOf('YY'))){  
  9.         Y = str.substr(Y, 2)  
  10.         toto = to.replace(/YY|yy/g,Y)  
  11.     }  
  12.     let k,i  
  13.     ['M','D','H','h','m','s'].forEach(s => 
  14.         i = from.indexOf(s+s)  
  15.         k = ~i ? str.substr(i, 2) : ''  
  16.         toto = to.replace(s+s, k)  
  17.     })  
  18.     return to  
  19.  
  20. // dateStrForma('20190626', 'YYYYMMDD', 'YYYY年MM月DD日') ==> 2019年06月26日  
  21. // dateStrForma('121220190626', '----YYYYMMDD', 'YYYY年MM月DD日') ==> 2019年06月26日  
  22. // dateStrForma('2019年06月26日', 'YYYY年MM月DD日', 'YYYYMMDD') ==> 20190626  
  23. // 一般的也可以使用正则来实现  
  24. //'2019年06月26日'.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3') ==> 2019-06-26 

30、getPropByPath:根据字符串路径获取对象属性 : 'obj[0].count'

  1. function getPropByPath(obj, path, strict) {  
  2.       let tempObj = obj 
  3.       pathpath = path.replace(/\[(\w+)\]/g, '.$1'); //将[0]转化为.0  
  4.       pathpath = path.replace(/^\./, ''); //去除开头的.  
  5.       let keyArr = path.split('.'); //根据.切割  
  6.       let i = 0 
  7.       for (let len = keyArr.length; i < len - 1; ++i) {  
  8.         if (!tempObj && !strict) break;  
  9.         let key = keyArr[i];  
  10.         if (key in tempObj) {  
  11.             tempObjtempObj = tempObj[key];  
  12.         } else {  
  13.             if (strict) {//开启严格模式,没找到对应key值,抛出错误  
  14.                 throw new Error('please transfer a valid prop path to form item!');  
  15.             }  
  16.             break;  
  17.         }  
  18.       }  
  19.       return {  
  20.         o: tempObj, //原始数据  
  21.         k: keyArr[i], //key值  
  22.         v: tempObj ? tempObj[keyArr[i]] : null // key值对应的值  
  23.       };  
  24. }; 

31、GetUrlParam:获取Url参数,返回一个对象

  1. function GetUrlParam(){  
  2.     let url = document.location.toString();  
  3.     let arrObj = url.split("?");  
  4.     let params = Object.create(null)  
  5.     if (arrObj.length > 1){  
  6.         arrObjarrObj = arrObj[1].split("&");  
  7.         arrObj.forEach(item=> 
  8.             itemitem = item.split("=");  
  9.             params[item[0]] = item[1]  
  10.         })  
  11.     }  
  12.     return params;  
  13.  
  14. // ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"} 

32、downloadFile:base64数据导出文件,文件下载

  1. function downloadFile(filename, data){  
  2.     let DownloadLink = document.createElement('a');  
  3.     if ( DownloadLink ){  
  4.         document.body.appendChild(DownloadLink);  
  5.         DownloadLink.style = 'display: none' 
  6.         DownloadLink.download = filename 
  7.         DownloadLink.href = data 
  8.         if ( document.createEvent ){  
  9.             let DownloadEvt = document.createEvent('MouseEvents');  
  10.             DownloadEvt.initEvent('click', true, false);  
  11.             DownloadLink.dispatchEvent(DownloadEvt);  
  12.         }  
  13.         else if ( document.createEventObject )  
  14.             DownloadLink.fireEvent('onclick');  
  15.         else if (typeof DownloadLink.onclick == 'function' )  
  16.             DownloadLink.onclick();  
  17.         document.body.removeChild(DownloadLink);  
  18.     }  

33、toFullScreen:全屏

  1. function toFullScreen(){  
  2.     let elem = document.body;  
  3.     elem.webkitRequestFullScreen   
  4.     ? elem.webkitRequestFullScreen()  
  5.     : elem.mozRequestFullScreen  
  6.     ? elem.mozRequestFullScreen()  
  7.     : elem.msRequestFullscreen  
  8.     ? elem.msRequestFullscreen()  
  9.     : elem.requestFullScreen  
  10.     ? elem.requestFullScreen()  
  11.     : alert("浏览器不支持全屏");  

34、exitFullscreen:退出全屏

  1. function exitFullscreen(){  
  2.     let elem = parent.document;  
  3.     elem.webkitCancelFullScreen   
  4.     ? elem.webkitCancelFullScreen()  
  5.     : elem.mozCancelFullScreen  
  6.     ? elem.mozCancelFullScreen()  
  7.     : elem.cancelFullScreen  
  8.     ? elem.cancelFullScreen()  
  9.     : elem.msExitFullscreen  
  10.     ? elem.msExitFullscreen()  
  11.     : elem.exitFullscreen  
  12.     ? elem.exitFullscreen()  
  13.     : alert("切换失败,可尝试Esc退出");  

35、requestAnimationFrame:window动画

  1. windowwindow.requestAnimationFrame = window.requestAnimationFrame ||  
  2.     window.webkitRequestAnimationFrame ||  
  3.     window.mozRequestAnimationFrame ||  
  4.     window.msRequestAnimationFrame ||  
  5.     window.oRequestAnimationFrame ||  
  6.     function (callback) {  
  7.         //为了使setTimteout的尽可能的接近每秒60帧的效果  
  8.         window.setTimeout(callback, 1000 / 60);  
  9.     };    
  10. windowwindow.cancelAnimationFrame = window.cancelAnimationFrame ||  
  11.     Window.webkitCancelAnimationFrame ||  
  12.     window.mozCancelAnimationFrame ||  
  13.     window.msCancelAnimationFrame ||  
  14.     window.oCancelAnimationFrame ||  
  15.     function (id) {  
  16.         //为了使setTimteout的尽可能的接近每秒60帧的效果  
  17.         window.clearTimeout(id);  
  18.     } 

36、_isNaN:检查数据是否是非数字值

原生的isNaN会把参数转换成数字(valueof),而null、true、false以及长度小于等于1的数组(元素为非NaN数据)会被转换成数字,这不是我想要的。Symbol类型的数据不具有valueof接口,所以isNaN会抛出错误,这里放在后面,可避免错误

  1. function _isNaN(v){  
  2.     return !(typeof v === 'string' || typeof v === 'number') || isNaN(v)  

37、max:求取数组中非NaN数据中的***值

  1. function max(arr){  
  2.     arrarr = arr.filter(item => !_isNaN(item))  
  3.     return arr.length ? Math.max.apply(null, arr) : undefined  
  4.  
  5. //max([1, 2, '11', null, 'fdf', []]) ==> 11 

38、min:求取数组中非NaN数据中的最小值

  1. function min(arr){  
  2.     arrarr = arr.filter(item => !_isNaN(item))  
  3.     return arr.length ? Math.min.apply(null, arr) : undefined  
  4.  
  5. //min([1, 2, '11', null, 'fdf', []]) ==> 1 

39、random:返回一个lower - upper之间的随机数

lower、upper无论正负与大小,但必须是非NaN的数据

  1. function random(lower, upper){  
  2.     lower = +lower || 0  
  3.     upper = +upper || 0  
  4.     return Math.random() * (upper - lower) + lower;  
  5.  
  6. //random(0, 0.5) ==> 0.3567039135734613  
  7. //random(2, 1) ===> 1.6718418553475423  
  8. //random(-2, -1) ==> -1.4474325452361945 

40、Object.keys:返回一个由一个给定对象的自身可枚举属性组成的数组

  1. ObjectObject.keys = Object.keys || function keys(object) {  
  2.     if(object === null || object === undefined){  
  3.         throw new TypeError('Cannot convert undefined or null to object');  
  4.     }  
  5.     let result = []  
  6.     if(isArrayLike(object) || isPlainObject(object)){  
  7.         for (let key in object) {  
  8.             object.hasOwnProperty(key) && ( result.push(key) )  
  9.         }  
  10.     }  
  11.     return result  

41、Object.values:返回一个给定对象自身的所有可枚举属性值的数组

  1. ObjectObject.values = Object.values || function values(object) {  
  2.     if(object === null || object === undefined){  
  3.         throw new TypeError('Cannot convert undefined or null to object');  
  4.     }  
  5.     let result = []  
  6.     if(isArrayLike(object) || isPlainObject(object)){  
  7.         for (let key in object) {  
  8.             object.hasOwnProperty(key) && ( result.push(object[key]) )  
  9.         }  
  10.     }  
  11.     return result  

42、arr.fill:使用 value 值来填充 array,从start位置开始, 到end位置结束(但不包含end位置),返回原数组

  1. ArrayArray.prototype.fill = Array.prototype.fill || function fill(value, start, end) {  
  2.     let ctx = this  
  3.     let length = ctx.length;    
  4.     start = parseInt(start)  
  5.     if(isNaN(start)){  
  6.         start = 0  
  7.     }else if (start < 0) {  
  8.         start = -start > length ? 0 : (length + start);  
  9.       }      
  10.       end = parseInt(end)  
  11.       if(isNaN(end) || end > length){  
  12.           end = length  
  13.       }else if (end < 0) {  
  14.         end += length;  
  15.     }    
  16.     while (start < end) {  
  17.         ctx[start++] = value;  
  18.     }  
  19.     return ctx;  
  20.  
  21. //Array(3).fill(2) ===> [2, 2, 2] 

43、arr.includes:用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false,可指定开始查询的位置

  1. ArrayArray.prototype.includes = Array.prototype.includes || function includes(value, start){  
  2.     let ctx = this  
  3.     let length = ctx.length;     
  4.     start = parseInt(start)  
  5.     if(isNaN(start)){  
  6.         start = 0  
  7.     }else if (start < 0) {  
  8.         start = -start > length ? 0 : (length + start);  
  9.       }     
  10.     let index = ctx.indexOf(value)     
  11.     return index >= start;  

44、arr.find:返回数组中通过测试(函数fn内判断)的***个元素的值

  1. ArrayArray.prototype.find = Array.prototype.find || function find(fn, ctx){  
  2.     fnfn = fn.bind(ctx)     
  3.     let result;  
  4.     this.some((value, index, arr), thisValue) => {  
  5.         return fn(value, index, arr) ? (result = value, true) : false  
  6.     })    
  7.     return result  

45、arr.findIndex :返回数组中通过测试(函数fn内判断)的***个元素的下标

  1. ArrayArray.prototype.findIndex = Array.prototype.findIndex || function findIndex(fn, ctx){  
  2.     fnfn = fn.bind(ctx)    
  3.     let result;  
  4.     this.some((value, index, arr), thisValue) => {  
  5.         return fn(value, index, arr) ? (result = index, true) : false  
  6.     })     
  7.     return result  

46、performance.timing:利用performance.timing进行性能分析

  1. window.onload = function(){  
  2.     setTimeout(function(){  
  3.         let t = performance.timing  
  4.         console.log('DNS查询耗时 :' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))  
  5.         console.log('TCP链接耗时 :' + (t.connectEnd - t.connectStart).toFixed(0))  
  6.         console.log('request请求耗时 :' + (t.responseEnd - t.responseStart).toFixed(0))  
  7.         console.log('解析dom树耗时 :' + (t.domComplete - t.domInteractive).toFixed(0))  
  8.         console.log('白屏时间 :' + (t.responseStart - t.navigationStart).toFixed(0))  
  9.         console.log('domready时间 :' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))  
  10.         console.log('onload时间 :' + (t.loadEventEnd - t.navigationStart).toFixed(0))  
  11.         if(t = performance.memory){  
  12.             console.log('js内存使用占比 :' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')  
  13.         }  
  14.     })  

47、禁止某些键盘事件

  1. document.addEventListener('keydown', function(event){  
  2.     return !(  
  3.         112 == event.keyCode || //F1  
  4.         123 == event.keyCode || //F12  
  5.         event.ctrlKey && 82 == event.keyCode || //ctrl + R  
  6.         event.ctrlKey && 78 == event.keyCode || //ctrl + N  
  7.         event.shiftKey && 121 == event.keyCode || //shift + F10  
  8.         event.altKey && 115 == event.keyCode || //alt + F4  
  9.         "A" == event.srcElement.tagName && event.shiftKey //shift + 点击a标签  
  10.     ) || (event.returnValue = false 
  11. }); 

48、禁止右键、选择、复制

  1. ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){  
  2.     document.addEventListener(ev, function(event){  
  3.         return event.returnValue = false  
  4.     })  
  5. });   
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

289人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

大师品软件——软件之痛与应对之道

这并不是一本传统的技术专著,因为它并没有包含一行代码,而更像是一部技术评论。作者通过幽默诙谐而又不失辛辣的语言,从程序员、用户等多...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客