48个JS 开发常用工具函数

论坛 期权论坛 期权     
web前端开发   2019-7-28 01:11   3470   0

作者 | hfhan
来源 | https://segmentfault.com/a/1190000019601333

1、isStatic:检测数据是不是除了symbol外的原始数据
  1. function isStatic(value) {
复制代码
  1.     return(
复制代码
  1.         typeof value === 'string' ||
复制代码
  1.         typeof value === 'number' ||
复制代码
  1.         typeof value === 'boolean' ||
复制代码
  1.         typeof value === 'undefined' ||
复制代码
  1.         value === null
复制代码
  1.     )
复制代码
  1. }
复制代码

[h1]2、isPrimitive:检测数据是不是原始数据[/h1]
  1. function isPrimitive(value) {
复制代码
  1.     return isStatic(value) || typeof value === 'symbol'
复制代码
  1. }
复制代码

[h1]3、isObject:判断数据是不是引用类型的数据 (例如: arrays, functions, objects, regexes, new Number(0),以及 new String(''))[/h1]
  1. function isObject(value) {
复制代码
  1.       let type = typeof value;
复制代码
  1.       return value != null && (type == 'object' || type == 'function');
复制代码
  1. }
复制代码

[h1]4、isObjectLike:检查 value 是否是 类对象。 如果一个值是类对象,那么它不应该是 null,而且 typeof 后的结果是 "object"[/h1]
  1. function isObjectLike(value) {
复制代码
  1.       return value != null && typeof value == 'object';
复制代码
  1. }
复制代码

[h1]5、getRawType:获取数据类型,返回结果为 Number、String、Object、Array等[/h1]
  1. function getRawType(value) {
复制代码
  1.     return Object.prototype.toString.call(value).slice(8, -1)
复制代码
  1. }
复制代码
  1. //getoRawType([]) ==> Array
复制代码

[h1]6、isPlainObject:判断数据是不是Object类型的数据[/h1]
  1. function isPlainObject(obj) {
复制代码
  1.     return Object.prototype.toString.call(obj) === '[object Object]'
复制代码
  1. }
复制代码

[h1]7、isArray:判断数据是不是数组类型的数据[/h1]
  1. function isArray(arr) {
复制代码
  1.     return Object.prototype.toString.call(arr) === '[object Array]'
复制代码
  1. }
复制代码
将isArray挂载到Array上
  1. Array.isArray = Array.isArray || isArray;
复制代码

[h1]8、isRegExp:判断数据是不是正则对象[/h1]
  1. function isRegExp(value) {
复制代码
  1.     return Object.prototype.toString.call(value) === '[object RegExp]'
复制代码
  1. }
复制代码

[h1]9、isDate:判断数据是不是时间对象[/h1]
  1. function isDate(value) {
复制代码
  1.     return Object.prototype.toString.call(value) === '[object Date]'
复制代码
  1. }
复制代码

[h1]10、isNative:判断 value 是不是浏览器内置函数[/h1]内置函数toString后的主体代码块为 [native code] ,而非内置函数则为相关代码,所以非内置函数可以进行拷贝(toString后掐头去尾再由Function转)
  1. function isNative(value) {
复制代码
  1.     return typeof value === 'function' && /native code/.test(value.toString())
复制代码
  1. }
复制代码

[h1]11、isFunction:检查 value 是不是函数[/h1]
  1. function isFunction(value) {
复制代码
  1.     return Object.prototype.toString.call(value) === '[object Function]'
复制代码
  1. }
复制代码

[h1]12、isLength:检查 value 是否为有效的类数组长度[/h1]
  1. function isLength(value) {
复制代码
  1.       return typeof value == 'number' && value > -1 && value % 1 == 0 && value  abCdEf
复制代码
  1. //使用记忆函数
复制代码
  1. let _camelize = cached(camelize)
复制代码

[h1]17、hyphenate:驼峰命名转横线命名:拆分字符串,使用 - 相连,并且转换为小写[/h1]
  1. let hyphenateRE = /\B([A-Z])/g;
复制代码
  1. function hyphenate(str){
复制代码
  1.     return str.replace(hyphenateRE, '-$1').toLowerCase()
复制代码
  1. }
复制代码
  1. //abCd ==> ab-cd
复制代码
  1. //使用记忆函数
复制代码
  1. let _hyphenate = cached(hyphenate);
复制代码

[h1]18、capitalize:字符串首位大写[/h1]
  1. function capitalize(str){
复制代码
  1.     return str.charAt(0).toUpperCase() + str.slice(1)
复制代码
  1. }
复制代码
  1. // abc ==> Abc
复制代码
  1. //使用记忆函数
复制代码
  1. let _capitalize = cached(capitalize)
复制代码

[h1]19、extend:将属性混合到目标对象中[/h1]
  1. function extend(to, _from) {
复制代码
  1.     for(let key in _from) {
复制代码
  1.         to[key] = _from[key];
复制代码
  1.     }
复制代码
  1.     return to
复制代码
  1. }
复制代码

[h1]20、Object.assign:对象属性复制,浅拷贝[/h1]
  1. Object.assign = Object.assign || function(){
复制代码
  1.     if(arguments.length == 0) throw new TypeError('Cannot convert undefined or null to object');
复制代码
  1.    
复制代码
  1.     let target = arguments[0],
复制代码
  1.         args = Array.prototype.slice.call(arguments, 1),
复制代码
  1.         key
复制代码
  1.     args.forEach(function(item){
复制代码
  1.         for(key in item){
复制代码
  1.             item.hasOwnProperty(key) && ( target[key] = item[key] )
复制代码
  1.         }
复制代码
  1.     })
复制代码
  1.     return target
复制代码
  1. }
复制代码
使用Object.assign可以浅克隆一个对象:
  1. let clone = Object.assign({}, target)
复制代码
简单的深克隆可以使用JSON.parse()和JSON.stringify(),这两个api是解析json数据的,所以只能解析除symbol外的原始类型及数组和对象
  1. let clone = JSON.parse( JSON.stringify(target) )
复制代码

[h1]21、clone:克隆数据,可深度克隆[/h1]这里列出了原始类型,时间、正则、错误、数组、对象的克隆规则,其他的可自行补充
  1. function clone(value, deep){
复制代码
  1.     if(isPrimitive(value)){
复制代码
  1.         return value
复制代码
  1.     }
复制代码
  1.    
复制代码
  1.     if (isArrayLike(value)) { //是类数组
复制代码
  1.         value = Array.prototype.slice.call(value)
复制代码
  1.         return value.map(item => deep ? clone(item, deep) : item)
复制代码
  1.        }else if(isPlainObject(value)){ //是对象
复制代码
  1.            let target = {}, key;
复制代码
  1.           for (key in value) {
复制代码
  1.             value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key], deep) : value[key] )
复制代码
  1.         }
复制代码
  1.     }
复制代码
  1.    
复制代码
  1.     let type = getRawType(value)
复制代码
  1.    
复制代码
  1.     switch(type){
复制代码
  1.         case 'Date':
复制代码
  1.         case 'RegExp':
复制代码
  1.         case 'Error': value = new window[type](value); break;
复制代码
  1.     }
复制代码
  1.     return value
复制代码
  1. }
复制代码

[h1]22、识别各种浏览器及平台[/h1]
  1. //运行环境是浏览器
复制代码
  1. let inBrowser = typeof window !== 'undefined';
复制代码
  1. //运行环境是微信
复制代码
  1. let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
复制代码
  1. let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
复制代码
  1. //浏览器 UA 判断
复制代码
  1. let UA = inBrowser && window.navigator.userAgent.toLowerCase();
复制代码
  1. let isIE = UA && /msie|trident/.test(UA);
复制代码
  1. let isIE9 = UA && UA.indexOf('msie 9.0') > 0;
复制代码
  1. let isEdge = UA && UA.indexOf('edge/') > 0;
复制代码
  1. let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');
复制代码
  1. let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');
复制代码
  1. let isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
复制代码

[h1]23、getExplorerInfo:获取浏览器信息[/h1]
  1. function getExplorerInfo() {
复制代码
  1.     let t = navigator.userAgent.toLowerCase();
复制代码
  1.     return 0 = 1;
复制代码
  1.     }
复制代码
  1.     return res
复制代码
  1. };
复制代码
  1. //repeat('123',3) ==> 123123123
复制代码
[h1]28、dateFormater:格式化时间[/h1]
  1. function dateFormater(formater, t){
复制代码
  1.     let date = t ? new Date(t) : new Date(),
复制代码
  1.         Y = date.getFullYear() + '',
复制代码
  1.         M = date.getMonth() + 1,
复制代码
  1.         D = date.getDate(),
复制代码
  1.         H = date.getHours(),
复制代码
  1.         m = date.getMinutes(),
复制代码
  1.         s = date.getSeconds();
复制代码
  1.     return formater.replace(/YYYY|yyyy/g,Y)
复制代码
  1.         .replace(/YY|yy/g,Y.substr(2,2))
复制代码
  1.         .replace(/MM/g,(M 2019年06月26日
复制代码
  1. // dateStrForma('2019年06月26日', 'YYYY年MM月DD日', 'YYYYMMDD') ==> 20190626
复制代码
  1. [/code][code]// 一般的也可以使用正则来实现
复制代码
  1. //'2019年06月26日'.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3') ==> 2019-06-26
复制代码

[h1]30、getPropByPath:根据字符串路径获取对象属性 : 'obj[0].count'[/h1]
  1. function getPropByPath(obj, path, strict) {
复制代码
  1.       let tempObj = obj;
复制代码
  1.       path = path.replace(/\[(\w+)\]/g, '.$1'); //将[0]转化为.0
复制代码
  1.       path = path.replace(/^\./, ''); //去除开头的.
复制代码
  1. [/code][code]      let keyArr = path.split('.'); //根据.切割
复制代码
  1.       let i = 0;
复制代码
  1.       for (let len = keyArr.length; i < len - 1; ++i) {
复制代码
  1.         if (!tempObj && !strict) break;
复制代码
  1.         let key = keyArr[i];
复制代码
  1.         if (key in tempObj) {
复制代码
  1.             tempObj = tempObj[key];
复制代码
  1.         } else {
复制代码
  1.             if (strict) {//开启严格模式,没找到对应key值,抛出错误
复制代码
  1.                 throw new Error('please transfer a valid prop path to form item!');
复制代码
  1.             }
复制代码
  1.             break;
复制代码
  1.         }
复制代码
  1.       }
复制代码
  1.       return {
复制代码
  1.         o: tempObj, //原始数据
复制代码
  1.         k: keyArr[i], //key值
复制代码
  1.         v: tempObj ? tempObj[keyArr[i]] : null // key值对应的值
复制代码
  1.       };
复制代码
  1. };
复制代码

[h1]31、GetUrlParam:获取Url参数,返回一个对象[/h1]
  1. function GetUrlParam(){
复制代码
  1.     let url = document.location.toString();
复制代码
  1.     let arrObj = url.split("?");
复制代码
  1.     let params = Object.create(null)
复制代码
  1.     if (arrObj.length > 1){
复制代码
  1.         arrObj = arrObj[1].split("&");
复制代码
  1.         arrObj.forEach(item=>{
复制代码
  1.             item = item.split("=");
复制代码
  1.             params[item[0]] = item[1]
复制代码
  1.         })
复制代码
  1.     }
复制代码
  1.     return params;
复制代码
  1. }
复制代码
  1. // ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
复制代码

[h1]32、downloadFile:base64数据导出文件,文件下载[/h1]
  1. function downloadFile(filename, data){
复制代码
  1.     let DownloadLink = document.createElement('a');
复制代码
  1. [/code][code]    if ( DownloadLink ){
复制代码
  1.         document.body.appendChild(DownloadLink);
复制代码
  1.         DownloadLink.style = 'display: none';
复制代码
  1.         DownloadLink.download = filename;
复制代码
  1.         DownloadLink.href = data;
复制代码
  1. [/code][code]        if ( document.createEvent ){
复制代码
  1.             let DownloadEvt = document.createEvent('MouseEvents');
复制代码
  1. [/code][code]            DownloadEvt.initEvent('click', true, false);
复制代码
  1.             DownloadLink.dispatchEvent(DownloadEvt);
复制代码
  1.         }
复制代码
  1.         else if ( document.createEventObject )
复制代码
  1.             DownloadLink.fireEvent('onclick');
复制代码
  1.         else if (typeof DownloadLink.onclick == 'function' )
复制代码
  1.             DownloadLink.onclick();
复制代码
  1. [/code][code]        document.body.removeChild(DownloadLink);
复制代码
  1.     }
复制代码
  1. }
复制代码



[h1]33、toFullScreen:全屏[/h1]
  1. function toFullScreen(){
复制代码
  1.     let elem = document.body;
复制代码
  1.     elem.webkitRequestFullScreen
复制代码
  1.     ? elem.webkitRequestFullScreen()
复制代码
  1.     : elem.mozRequestFullScreen
复制代码
  1.     ? elem.mozRequestFullScreen()
复制代码
  1.     : elem.msRequestFullscreen
复制代码
  1.     ? elem.msRequestFullscreen()
复制代码
  1.     : elem.requestFullScreen
复制代码
  1.     ? elem.requestFullScreen()
复制代码
  1.     : alert("浏览器不支持全屏");
复制代码
  1. }
复制代码

[h1]34、exitFullscreen:退出全屏[/h1]
  1. function exitFullscreen(){
复制代码
  1.     let elem = parent.document;
复制代码
  1.     elem.webkitCancelFullScreen
复制代码
  1.     ? elem.webkitCancelFullScreen()
复制代码
  1.     : elem.mozCancelFullScreen
复制代码
  1.     ? elem.mozCancelFullScreen()
复制代码
  1.     : elem.cancelFullScreen
复制代码
  1.     ? elem.cancelFullScreen()
复制代码
  1.     : elem.msExitFullscreen
复制代码
  1.     ? elem.msExitFullscreen()
复制代码
  1.     : elem.exitFullscreen
复制代码
  1.     ? elem.exitFullscreen()
复制代码
  1.     : alert("切换失败,可尝试Esc退出");
复制代码
  1. }
复制代码

[h1]35、requestAnimationFrame:window动画[/h1]
  1. window.requestAnimationFrame = window.requestAnimationFrame ||
复制代码
  1.     window.webkitRequestAnimationFrame ||
复制代码
  1.     window.mozRequestAnimationFrame ||
复制代码
  1.     window.msRequestAnimationFrame ||
复制代码
  1.     window.oRequestAnimationFrame ||
复制代码
  1.     function (callback) {
复制代码
  1.         //为了使setTimteout的尽可能的接近每秒60帧的效果
复制代码
  1.         window.setTimeout(callback, 1000 / 60);
复制代码
  1.     };
复制代码
  1.    
复制代码
  1. window.cancelAnimationFrame = window.cancelAnimationFrame ||
复制代码
  1.     Window.webkitCancelAnimationFrame ||
复制代码
  1.     window.mozCancelAnimationFrame ||
复制代码
  1.     window.msCancelAnimationFrame ||
复制代码
  1.     window.oCancelAnimationFrame ||
复制代码
  1.     function (id) {
复制代码
  1.         //为了使setTimteout的尽可能的接近每秒60帧的效果
复制代码
  1.         window.clearTimeout(id);
复制代码
  1.     }
复制代码

[h1]36、_isNaN:检查数据是否是非数字值[/h1]原生的isNaN会把参数转换成数字(valueof),而null、true、false以及长度小于等于1的数组(元素为非NaN数据)会被转换成数字,这不是我想要的。Symbol类型的数据不具有valueof接口,所以isNaN会抛出错误,这里放在后面,可避免错误
  1. function _isNaN(v){
复制代码
  1.     return !(typeof v === 'string' || typeof v === 'number') || isNaN(v)
复制代码
  1. }
复制代码

[h1]37、max:求取数组中非NaN数据中的最大值[/h1]
  1. function max(arr){
复制代码
  1.     arr = arr.filter(item => !_isNaN(item))
复制代码
  1.     return arr.length ? Math.max.apply(null, arr) : undefined
复制代码
  1. }
复制代码
  1. //max([1, 2, '11', null, 'fdf', []]) ==> 11
复制代码

[h1]38、min:求取数组中非NaN数据中的最小值[/h1]
  1. function min(arr){
复制代码
  1.     arr = arr.filter(item => !_isNaN(item))
复制代码
  1.     return arr.length ? Math.min.apply(null, arr) : undefined
复制代码
  1. }
复制代码
  1. //min([1, 2, '11', null, 'fdf', []]) ==> 1
复制代码
[h1]39、random:返回一个lower - upper之间的随机数[/h1]lower、upper无论正负与大小,但必须是非NaN的数据
  1. function random(lower, upper){
复制代码
  1.     lower = +lower || 0
复制代码
  1.     upper = +upper || 0
复制代码
  1.     return Math.random() * (upper - lower) + lower;
复制代码
  1. }
复制代码
  1. //random(0, 0.5) ==> 0.3567039135734613
复制代码
  1. //random(2, 1) ===> 1.6718418553475423
复制代码
  1. //random(-2, -1) ==> -1.4474325452361945
复制代码
[h1]40、Object.keys:返回一个由一个给定对象的自身可枚举属性组成的数组[/h1]
  1. Object.keys = Object.keys || function keys(object) {
复制代码
  1.     if(object === null || object === undefined){
复制代码
  1.         throw new TypeError('Cannot convert undefined or null to object');
复制代码
  1.     }
复制代码
  1.     let result = []
复制代码
  1.     if(isArrayLike(object) || isPlainObject(object)){
复制代码
  1.         for (let key in object) {
复制代码
  1.             object.hasOwnProperty(key) && ( result.push(key) )
复制代码
  1.         }
复制代码
  1.     }
复制代码
  1.     return result
复制代码
  1. }
复制代码

[h1]41、Object.values:返回一个给定对象自身的所有可枚举属性值的数组[/h1]
  1. Object.values = Object.values || function values(object) {
复制代码
  1.     if(object === null || object === undefined){
复制代码
  1.         throw new TypeError('Cannot convert undefined or null to object');
复制代码
  1.     }
复制代码
  1.     let result = []
复制代码
  1.     if(isArrayLike(object) || isPlainObject(object)){
复制代码
  1.         for (let key in object) {
复制代码
  1.             object.hasOwnProperty(key) && ( result.push(object[key]) )
复制代码
  1.         }
复制代码
  1.     }
复制代码
  1.     return result
复制代码
  1. }
复制代码

[h1]42、arr.fill:使用 value 值来填充 array,从start位置开始, 到end位置结束(但不包含end位置),返回原数组[/h1]
  1. Array.prototype.fill = Array.prototype.fill || function fill(value, start, end) {
复制代码
  1.     let ctx = this
复制代码
  1.     let length = ctx.length;
复制代码
  1.    
复制代码
  1.     start = parseInt(start)
复制代码
  1.     if(isNaN(start)){
复制代码
  1.         start = 0
复制代码
  1.     }else if (start < 0) {
复制代码
  1.         start = -start > length ? 0 : (length + start);
复制代码
  1.       }
复制代码
  1.       
复制代码
  1.       end = parseInt(end)
复制代码
  1.       if(isNaN(end) || end > length){
复制代码
  1.           end = length
复制代码
  1.       }else if (end < 0) {
复制代码
  1.         end += length;
复制代码
  1.     }
复制代码
  1.    
复制代码
  1.     while (start < end) {
复制代码
  1.         ctx[start++] = value;
复制代码
  1.     }
复制代码
  1.     return ctx;
复制代码
  1. }
复制代码
  1. //Array(3).fill(2) ===> [2, 2, 2]
复制代码

[h1]43、arr.includes:用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false,可指定开始查询的位置[/h1]
  1. Array.prototype.includes = Array.prototype.includes || function includes(value, start){
复制代码
  1.     let ctx = this
复制代码
  1.     let length = ctx.length;
复制代码
  1.    
复制代码
  1.     start = parseInt(start)
复制代码
  1.     if(isNaN(start)){
复制代码
  1.         start = 0
复制代码
  1.     }else if (start < 0) {
复制代码
  1.         start = -start > length ? 0 : (length + start);
复制代码
  1.       }
复制代码
  1.    
复制代码
  1.     let index = ctx.indexOf(value)
复制代码
  1.    
复制代码
  1.     return index >= start;
复制代码
  1. }
复制代码

[h1]44、arr.find:返回数组中通过测试(函数fn内判断)的第一个元素的值[/h1]
  1. Array.prototype.find = Array.prototype.find || function find(fn, ctx){
复制代码
  1.     ctx = ctx || this
复制代码
  1.    
复制代码
  1.     let result;
复制代码
  1.     ctx.some((value, index, arr), thisValue) => {
复制代码
  1.         return fn(value, index, arr) ? (result = value, true) : false
复制代码
  1.     })
复制代码
  1.    
复制代码
  1.     return result
复制代码
  1. }
复制代码

[h1]45、arr.findIndex :返回数组中通过测试(函数fn内判断)的第一个元素的下标[/h1]
  1. Array.prototype.findIndex = Array.prototype.findIndex || function findIndex(fn, ctx){
复制代码
  1.     ctx = ctx || this
复制代码
  1.    
复制代码
  1.     let result;
复制代码
  1.     ctx.some((value, index, arr), thisValue) => {
复制代码
  1.         return fn(value, index, arr) ? (result = index, true) : false
复制代码
  1.     })
复制代码
  1.    
复制代码
  1.     return result
复制代码
  1. }
复制代码

[h1]46、performance.timing:利用performance.timing进行性能分析[/h1]
  1. window.onload = function(){
复制代码
  1.     setTimeout(function(){
复制代码
  1.         let t = performance.timing
复制代码
  1.         console.log('DNS查询耗时 :' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
复制代码
  1.         console.log('TCP链接耗时 :' + (t.connectEnd - t.connectStart).toFixed(0))
复制代码
  1.         console.log('request请求耗时 :' + (t.responseEnd - t.responseStart).toFixed(0))
复制代码
  1.         console.log('解析dom树耗时 :' + (t.domComplete - t.domInteractive).toFixed(0))
复制代码
  1.         console.log('白屏时间 :' + (t.responseStart - t.navigationStart).toFixed(0))
复制代码
  1.         console.log('domready时间 :' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
复制代码
  1.         console.log('onload时间 :' + (t.loadEventEnd - t.navigationStart).toFixed(0))
复制代码
  1. [/code][code]        if(t = performance.memory){
复制代码
  1.             console.log('js内存使用占比 :' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
复制代码
  1.         }
复制代码
  1.     })
复制代码
  1. }
复制代码

[h1]47、禁止某些键盘事件[/h1]
  1. document.addEventListener('keydown', function(event){
复制代码
  1.     return !(
复制代码
  1.         112 == event.keyCode || //F1
复制代码
  1.         123 == event.keyCode || //F12
复制代码
  1.         event.ctrlKey && 82 == event.keyCode || //ctrl + R
复制代码
  1.         event.ctrlKey && 78 == event.keyCode || //ctrl + N
复制代码
  1.         event.shiftKey && 121 == event.keyCode || //shift + F10
复制代码
  1.         event.altKey && 115 == event.keyCode || //alt + F4
复制代码
  1.         "A" == event.srcElement.tagName && event.shiftKey //shift + 点击a标签
复制代码
  1.     ) || (event.returnValue = false)
复制代码
  1. });
复制代码

[h1]48、禁止右键、选择、复制[/h1]
  1. ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
复制代码
  1.     document.addEventListener(ev, function(event){
复制代码
  1.         return event.returnValue = false
复制代码
  1.     })
复制代码
  1. });
复制代码




分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:100
帖子:20
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP