爱站屋博客 - 好东西不私藏,大家一起分享!关于博客 留言板

网站首页 模板插件 正文

总结前端开发中常用的JS功能函吉林省快三下载数(二)

2019-08-21 模板插件 320 ℃
[db:标签]文接上一篇:总结前端开发中常用的JS功能函数(一)

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直接的随机数。(lowerupper无论正负与大小,但必须是非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; 	}) });

以上两篇文章就是整理的48个前端开发常用函数,欢迎大家继续补充。谢谢!

更多JavaScript相关内容请访问PHP中文网:https://www.php.cn/

以上就是总结前端开发中常用的JS功能函数(二)的详细内容,更多请关注php中文网其它相关文章!


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

:如果评论未出现,请刷新网页,谢谢合作!

会员中心
搜索
ip签名图
    IP签名图
网站分类
标签列表
文章归档
站点信息
  • 文章总数:112038
  • 页面总数:3
  • 分类总数:12
  • 标签总数:629
  • 评论总数:2060
  • 浏览总数:1241363
爱站云安全认证