Javascript总结(常用工具类的封装)

前言

成都创新互联公司专注于红旗网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供红旗营销型网站建设,红旗网站制作、红旗网页设计、红旗网站官网定制、小程序制作服务,打造红旗网络公司原创品牌,更为您提供红旗网站排名全网营销落地服务。

因为工作中经常用到这些方法,所有便把这些方法进行了总结。

JavaScript

1. type 类型判断 

 
 
 
 
  1. isString (o) { //是否字符串  
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'String'  
  3.  
  4. isNumber (o) { //是否数字  
  5.     return Object.prototype.toString.call(o).slice(8, -1) === 'Number'  
  6.  
  7. isObj (o) { //是否对象  
  8.     return Object.prototype.toString.call(o).slice(8, -1) === 'Object'  
  9.  
  10. isArray (o) { //是否数组  
  11.     return Object.prototype.toString.call(o).slice(8, -1) === 'Array'  
  12. }  
  13. isDate (o) { //是否时间  
  14.     return Object.prototype.toString.call(o).slice(8, -1) === 'Date'  
  15. }  
  16. isBoolean (o) { //是否boolean  
  17.     return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'  
  18. }  
  19. isFunction (o) { //是否函数  
  20.     return Object.prototype.toString.call(o).slice(8, -1) === 'Function'  
  21. }  
  22. isNull (o) { //是否为null  
  23.     return Object.prototype.toString.call(o).slice(8, -1) === 'Null'  
  24. }  
  25. isUndefined (o) { //是否undefined  
  26.     return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'  
  27. }  
  28. isFalse (o) {  
  29.     if (!o || o === 'null' || o === 'undefined' || o === 'false' || o === 'NaN') return true 
  30.         return false  
  31.  
  32. isTrue (o) {  
  33.     return !this.isFalse(o)  
  34.  
  35. isIos () {  
  36.     var u = navigator.userAgent;  
  37.     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机  
  38.         // return "Android";  
  39.         return false  
  40.     } else if (u.indexOf('iPhone') > -1) {//苹果手机  
  41.         // return "iPhone";  
  42.         return true  
  43.     } else if (u.indexOf('iPad') > -1) {//iPad  
  44.         // return "iPad";  
  45.         return false  
  46.     } else if (u.indexOf('Windows Phone') > -1) {//winphone手机  
  47.         // return "Windows Phone";  
  48.         return false  
  49.     }else{  
  50.         return false  
  51.     }  
  52.  
  53. isPC () { //是否为PC端  
  54.     var userAgentInfo = navigator.userAgent;  
  55.     var Agents = ["Android", "iPhone",  
  56.                 "SymbianOS", "Windows Phone",  
  57.                 "iPad", "iPod"];  
  58.     var flag = true;  
  59.     for (var v = 0; v < Agents.length; v++) {  
  60.         if (userAgentInfo.indexOf(Agents[v]) > 0) {  
  61.             flag = false;  
  62.             break;  
  63.         }  
  64.     }  
  65.     return flag;  
  66.  
  67. browserType(){  
  68.     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
  69.     var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器  
  70.     var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器  
  71.     var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器  
  72.     var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器  
  73.     var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器  
  74.     var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器  
  75.     if (isIE) {  
  76.         var reIE = new RegExp("MSIE (\\d+\\.\\d+);");  
  77.         reIE.test(userAgent);  
  78.         var fIEVersion = parseFloat(RegExp["$1"]);  
  79.         if(fIEVersion == 7) return "IE7"  
  80.         else if(fIEVersion == 8) return "IE8";  
  81.         else if(fIEVersion == 9) return "IE9";  
  82.         else if(fIEVersion == 10) return "IE10";  
  83.         else if(fIEVersion == 11) return "IE11";  
  84.         else return "IE7以下"//IE版本过低  
  85.     } 
  86.  
  87.     if (isFF) return "FF";  
  88.     if (isOpera) return "Opera";  
  89.     if (isEdge) return "Edge";  
  90.     if (isSafari) return "Safari";  
  91.     if (isChrome) return "Chrome";  
  92.  
  93. checkStr (str, type) {  
  94.     switch (type) {  
  95.         case 'phone':   //手机号码  
  96.             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);  
  97.         case 'tel':     //座机  
  98.             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);  
  99.         case 'card':    //身份证  
  100.             return /^\d{15}|\d{18}$/.test(str);  
  101.         case 'pwd':     //密码以字母开头,长度在6~18之间,只能包含字母、数字和下划线  
  102.             return /^[a-zA-Z]\w{5,17}$/.test(str)  
  103.         case 'postal':  //邮政编码  
  104.             return /[1-9]\d{5}(?!\d)/.test(str);  
  105.         case 'QQ':      //QQ号  
  106.             return /^[1-9][0-9]{4,9}$/.test(str); 
  107.         case 'email':   //邮箱  
  108.             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);  
  109.         case 'money':   //金额(小数点2位)  
  110.             return /^\d*(?:\.\d{0,2})?$/.test(str);  
  111.         case 'URL':     //网址  
  112.             return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)  
  113.         case 'IP':      //IP  
  114.             return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);  
  115.         case 'date':    //日期时间  
  116.             return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)  
  117.         case 'number':  //数字  
  118.             return /^[0-9]$/.test(str);  
  119.         case 'english': //英文  
  120.             return /^[a-zA-Z]+$/.test(str);  
  121.         case 'chinese': //中文  
  122.             return /^[\u4E00-\u9FA5]+$/.test(str);  
  123.         case 'lower':   //小写  
  124.             return /^[a-z]+$/.test(str);  
  125.         case 'upper':   //大写  
  126.             return /^[A-Z]+$/.test(str);  
  127.         case 'HTML':    //HTML标记  
  128.             return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);  
  129.         default:  
  130.             return true;  
  131.     }  

2. Date 

 
 
 
 
  1. /**  
  2.  * 格式化时间  
  3.  *   
  4.  * @param  {time} 时间  
  5.  * @param  {cFormat} 格式  
  6.  * @return {String} 字符串  
  7.  *  
  8.  * @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s}') // -> 2018/01/29 00:00:00  
  9.  */  
  10. formatTime(time, cFormat) { 
  11.     if (arguments.length === 0) return null  
  12.     if ((time + '').length === 10) {  
  13.         time = +time * 1000  
  14.     }  
  15.  
  16.     var format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}', date  
  17.     if (typeof time === 'object') {  
  18.         date = time  
  19.     } else {  
  20.         date = new Date(time)  
  21.     }  
  22.  
  23.     var formatObj = {  
  24.         y: date.getFullYear(),  
  25.         m: date.getMonth() + 1,  
  26.         d: date.getDate(),  
  27.         h: date.getHours(),  
  28.         i: date.getMinutes(),  
  29.         s: date.getSeconds(),  
  30.         a: date.getDay()  
  31.     } 
  32.  
  33.     var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {  
  34.         var value = formatObj[key]  
  35.         if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]  
  36.         if (result.length > 0 && value < 10) {  
  37.             value = '0' + value  
  38.         } 
  39.          return value || 0  
  40.     })  
  41.     return time_str  
  42.  
  43. /**  
  44.  * 返回指定长度的月份集合  
  45.  *   
  46.  * @param  {time} 时间  
  47.  * @param  {len} 长度  
  48.  * @param  {direction} 方向:  1: 前几个月;  2: 后几个月;  3:前后几个月  默认 3  
  49.  * @return {Array} 数组  
  50.  *   
  51.  * @example   getMonths('2018-1-29', 6, 1)  // ->  ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"]  
  52.  */ 
  53.  
  54. getMonths(time, len, direction) {  
  55.     var mm = new Date(time).getMonth(),  
  56.         yy = new Date(time).getFullYear(),  
  57.         direction = isNaN(direction) ? 3 : direction,  
  58.         index = mm;  
  59.     var cutMonth = function(index) {  
  60.         if ( index <= len && index >= -len) {  
  61.             return direction === 1 ? formatPre(index).concat(cutMonth(++index)):  
  62.                 direction === 2 ? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index))  
  63.         }  
  64.         return []  
  65.     }  
  66.     var formatNext = function(i) {  
  67.         var y = Math.floor(i/12), 
  68.             m = i%12  
  69.         return [yy+y + '-' + (m+1)]  
  70.     } 
  71.  
  72.     var formatPre = function(i) {  
  73.         var y = Math.ceil(i/12),  
  74.             m = i%12  
  75.         m = m===0 ? 12 : m  
  76.         return [yy-y + '-' + (13 - m)]  
  77.     }  
  78.     var formatCurr = function(i) {  
  79.         var y = Math.floor(i/12),  
  80.             yNext = Math.ceil(i/12),  
  81.             m = i%12,  
  82.             mNext = m===0 ? 12 : m  
  83.         return [yy-yNext + '-' + (13 - mNext),yy+y + '-' + (m+1)]  
  84.     } 
  85.     // 数组去重  
  86.     var unique = function(arr) {  
  87.         if ( Array.hasOwnProperty('from') ) {  
  88.             return Array.from(new Set(arr));  
  89.         }else{  
  90.             var n = {},r=[];   
  91.             for(var i = 0; i < arr.length; i++){  
  92.                 if (!n[arr[i]]){  
  93.                     n[arr[i]] = true;   
  94.                     r.push(arr[i]);  
  95.                 }  
  96.             }  
  97.             return r;  
  98.         }  
  99.     }  
  100.     return direction !== 3 ? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){  
  101.         return new Date(t1).getTime() - new Date(t2).getTime()  
  102.     }))  
  103. }  
  104.  
  105. /**  
  106.  * 返回指定长度的天数集合  
  107.  *   
  108.  * @param  {time} 时间 
  109.  * @param  {len} 长度  
  110.  * @param  {direction} 方向: 1: 前几天;  2: 后几天;  3:前后几天  默认 3  
  111.  * @return {Array} 数组  
  112.  *  
  113.  * @example date.getDays('2018-1-29', 6) // -> ["2018-1-26", "2018-1-27", "2018-1-28", "2018-1-29", "2018-1-30", "2018-1-31", "2018-2-1"]  
  114.  */  
  115. getDays(time, len, diretion) {  
  116.     var tt = new Date(time)  
  117.     var getDay = function(day) {  
  118.         var t = new Date(time)  
  119.         t.setDate(t.getDate() + day)  
  120.         var m = t.getMonth()+1  
  121.         return t.getFullYear()+'-'+m+'-'+t.getDate()  
  122.     }  
  123.     var arr = []  
  124.     if (diretion === 1) {  
  125.         for (var i = 1; i <= len; i++) {  
  126.             arr.unshift(getDay(-i))  
  127.         }  
  128.     }else if(diretion === 2) {  
  129.         for (var i = 1; i <= len; i++) {  
  130.             arr.push(getDay(i))  
  131.         } 
  132.      }else {  
  133.         for (var i = 1; i <= len; i++) {  
  134.             arr.unshift(getDay(-i))  
  135.         }  
  136.         arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())  
  137.         for (var i = 1; i <= len; i++) {  
  138.             arr.push(getDay(i))  
  139.         }  
  140.     }  
  141.     return diretion === 1 ? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) :  
  142.         diretion === 2 ? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr  
  143. /**  
  144.  * @param  {s} 秒数  
  145.  * @return {String} 字符串   
  146.  *  
  147.  * @example formatHMS(3610) // -> 1h0m10s  
  148.  */  
  149. formatHMS (s) {  
  150.     var str = ''  
  151.     if (s > 3600) {  
  152.         str = Math.floor(s/3600)+'h'+Math.floor(s%3600/60)+'m'+s%60+'s' 
  153.     }else if(s > 60) {  
  154.         str = Math.floor(s/60)+'m'+s%60+'s'  
  155.     }else{ 
  156.          str = s%60+'s'  
  157.     }  
  158.     return str  
  159. }  
  160.  
  161. /*获取某月有多少天*/  
  162. getMonthOfDay (time) {  
  163.     var date = new Date(time)  
  164.     var year = date.getFullYear()  
  165.     var mouth = date.getMonth() + 1  
  166.     var days  
  167.  
  168.     //当月份为二月时,根据闰年还是非闰年判断天数  
  169.     if (mouth == 2) {  
  170.         days = year % 4 == 0 ? 29 : 28  
  171.     } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {  
  172.         //月份为:1,3,5,7,8,10,12 时,为大月.则天数为31; 
  173.         days = 31  
  174.     } else {  
  175.         //其他月份,天数为:30.  
  176.         days = 30  
  177.     }  
  178.     return days  
  179.  
  180. /*获取某年有多少天*/  
  181. getYearOfDay (time) {  
  182.     var firstDayYear = this.getFirstDayOfYear(time);  
  183.     var lastDayYear = this.getLastDayOfYear(time);  
  184.     var numSecond = (new Date(lastDayYear).getTime() - new Date(firstDayYear).getTime())/1000;  
  185.     return Math.ceil(numSecond/(24*3600));  
  186. /*获取某年的第一天*/  
  187. getFirstDayOfYear (time) {  
  188.     var year = new Date(time).getFullYear();  
  189.     return year + "-01-01 00:00:00";  
  190. }   
  191.  
  192. /*获取某年最后一天*/  
  193. getLastDayOfYear (time) {  
  194.     var year = new Date(time).getFullYear();  
  195.     var dateString = year + "-12-01 00:00:00";  
  196.     var endDay = this.getMonthOfDay(dateString); 
  197.     return year + "-12-" + endDay + " 23:59:59";  
  198.  
  199. /*获取某个日期是当年中的第几天*/  
  200. getDayOfYear (time) {  
  201.     var firstDayYear = this.getFirstDayOfYear(time); 
  202.     var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000;  
  203.     return Math.ceil(numSecond/(24*3600));  
  204. }  
  205.  
  206. /*获取某个日期在这一年的第几周*/  
  207. getDayOfYearWeek (time) {  
  208.     var numdays = this.getDayOfYear(time);  
  209.     return Math.ceil(numdays / 7);  

3. Array 

 
 
 
 
  1. /*判断一个元素是否在数组中*/  
  2. contains (arr, val) {  
  3.     return arr.indexOf(val) != -1 ? true : false;  
  4.  
  5. /**  
  6.  * @param  {arr} 数组  
  7.  * @param  {fn} 回调函数  
  8.  * @return {undefined}  
  9.  */  
  10. each (arr, fn) {  
  11.     fn = fn || Function;  
  12.     var a = [];  
  13.     var args = Array.prototype.slice.call(arguments, 1);  
  14.     for(var i = 0; i < arr.length; i++) {  
  15.         var res = fn.apply(arr, [arr[i], i].concat(args));  
  16.         if(res != null) a.push(res);  
  17.     }  
  18. }  
  19.  
  20. /**  
  21.  * @param  {arr} 数组  
  22.  * @param  {fn} 回调函数  
  23.  * @param  {thisObj} this指向  
  24.  * @return {Array}   
  25.  */  
  26. map (arr, fn, thisObj) {  
  27.     var scope = thisObj || window;  
  28.     var a = [];  
  29.     for(var i = 0, j = arr.length; i < j; ++i) {  
  30.         var res = fn.call(scope, arr[i], i, this);  
  31.         if(res != null) a.push(res);  
  32.     }  
  33.     return a;  
  34.  
  35. /**  
  36.  * @param  {arr} 数组  
  37.  * @param  {type} 1:从小到大   2:从大到小   3:随机  
  38.  * @return {Array}  
  39.  */  
  40. sort (arr, type = 1) {  
  41.     return arr.sort( (a, b) => {  
  42.         switch(type) {  
  43.             case 1:  
  44.                 return a - b;  
  45.             case 2:  
  46.                 return b - a;  
  47.             case 3:  
  48.                 return Math.random() - 0.5;  
  49.             default:  
  50.                 return arr;  
  51.         }  
  52.     })  
  53. }   
  54.  
  55. /*去重*/  
  56. unique (arr) { 
  57.     if ( Array.hasOwnProperty('from') ) {  
  58.         return Array.from(new Set(arr));  
  59.     }else{  
  60.         var n = {},r=[];   
  61.         for(var i = 0; i < arr.length; i++){  
  62.             if (!n[arr[i]]){  
  63.                 n[arr[i]] = true;   
  64.                 r.push(arr[i]);  
  65.             }  
  66.         }  
  67.         return r;  
  68.     }  
  69. }  
  70.  
  71. /*求两个集合的并集*/  
  72. union (a, b) {  
  73.     var newArr = a.concat(b);  
  74.     return this.unique(newArr);  
  75. }  
  76.  
  77. /*求两个集合的交集*/  
  78. intersect (a, b) {  
  79.     var _this = this;  
  80.     a = this.unique(a);  
  81.     return this.map(a, function(o) {  
  82.         return _this.contains(b, o) ? o : null;  
  83.     });  
  84.  
  85. /*删除其中一个元素*/  
  86. remove (arr, ele) {  
  87.     var index = arr.indexOf(ele);  
  88. 当前文章:Javascript总结(常用工具类的封装)
    标题链接:http://www.hantingmc.com/qtweb/news39/510439.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联