服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 前端经常会用到的JavaScript方法封装

前端经常会用到的JavaScript方法封装

2021-12-30 22:58Find一只程序猿 js教程

前端经常会用到的JavaScript方法封装都有哪些呢?我们一起来看一下吧!

前端经常会用到的JavaScript方法封装

 1.数组去重

  1. function unique1(arr) { 
  2.     return [...new Set(arr)] 
  3.  
  4. function unique2(arr) { 
  5.     var obj = {}; 
  6.     return arr.filter(ele => { 
  7.         if (!obj[ele]) { 
  8.             obj[ele] = true; 
  9.             return true; 
  10.         } 
  11.     }) 
  12.  
  13. function unique3(arr) { 
  14.     var result = []; 
  15.     arr.forEach(ele => { 
  16.         if (result.indexOf(ele) == -1) { 
  17.             result.push(ele) 
  18.         } 
  19.     }) 
  20.     return result; 

2.字符串去重

  1. String.prototype.unique = function () { 
  2.     var obj = {}, 
  3.         str = ''
  4.         len = this.length; 
  5.     for (var i = 0; i < len; i++) { 
  6.         if (!obj[this[i]]) { 
  7.             str += this[i]; 
  8.             obj[this[i]] = true
  9.         } 
  10.     } 
  11.     return str; 
  12.  
  13. ###### //去除连续的字符串  
  14. function uniq(str) { 
  15.     return str.replace(/(\w)\1+/g, '$1'

3.输入一个值,返回其数据类型

  1. function type(para) { 
  2.     return Object.prototype.toString.call(para) 

4.找出字符串中第一次只出现一次的字母

  1. String.prototype.firstAppear = function () { 
  2.     var obj = {}, 
  3.         len = this.length; 
  4.     for (var i = 0; i < len; i++) { 
  5.         if (obj[this[i]]) { 
  6.             obj[this[i]]++; 
  7.         } else { 
  8.             obj[this[i]] = 1; 
  9.         } 
  10.     } 
  11.     for (var prop in obj) { 
  12.        if (obj[prop] == 1) { 
  13.          return prop; 
  14.        } 
  15.     } 

5.深拷贝 浅拷贝

  1. //深克隆(深克隆不考虑函数) 
  2. function deepClone(obj, result) { 
  3.     var result = result || {}; 
  4.     for (var prop in obj) { 
  5.         if (obj.hasOwnProperty(prop)) { 
  6.             if (typeof obj[prop] == 'object' && obj[prop] !== null) { 
  7.                 // 引用值(obj/array)且不为null 
  8.                 if (Object.prototype.toString.call(obj[prop]) == '[object Object]') { 
  9.                     // 对象 
  10.                     result[prop] = {}; 
  11.                 } else { 
  12.                     // 数组 
  13.                     result[prop] = []; 
  14.                 } 
  15.                 deepClone(obj[prop], result[prop]) 
  16.     } else { 
  17.         // 原始值或func 
  18.         result[prop] = obj[prop] 
  19.     } 
  20.   } 
  21. return result; 
  22.  
  23. // 深浅克隆是针对引用值 
  24. function deepClone(target) { 
  25.     if (typeof (target) !== 'object') { 
  26.         return target; 
  27.     } 
  28.     var result; 
  29.     if (Object.prototype.toString.call(target) == '[object Array]') { 
  30.         // 数组 
  31.         result = [] 
  32.     } else { 
  33.         // 对象 
  34.         result = {}; 
  35.     } 
  36.     for (var prop in target) { 
  37.         if (target.hasOwnProperty(prop)) { 
  38.             result[prop] = deepClone(target[prop]) 
  39.         } 
  40.     } 
  41.     return result; 
  42. // 无法复制函数 
  43. var o1 = jsON.parse(jsON.stringify(obj1)); 

6.判断元素有没有子元素

  1. function hasChildren(e) { 
  2.     var children = e.childNodes, 
  3.         len = children.length; 
  4.     for (var i = 0; i < len; i++) { 
  5.         if (children[i].nodeType === 1) { 
  6.             return true
  7.         } 
  8.     } 
  9.     return false

7.返回当前的时间(年月日时分秒)

  1. function getDateTime() { 
  2.     var date = new Date(), 
  3.         year = date.getFullYear(), 
  4.         month = date.getMonth() + 1, 
  5.         day = date.getDate(), 
  6.         hour = date.getHours() + 1, 
  7.         minute = date.getMinutes(), 
  8.         second = date.getSeconds(); 
  9.         month = checkTime(month); 
  10.         day = checkTime(day); 
  11.         hour = checkTime(hour); 
  12.         minute = checkTime(minute); 
  13.         second = checkTime(second); 
  14.      function checkTime(i) { 
  15.         if (i < 10) { 
  16.                 i = "0" + i; 
  17.        } 
  18.       return i; 
  19.     } 
  20.     return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒" 

8.兼容getElementsByClassName方法

  1. Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) { 
  2.     var allDomArray = document.getElementsByTagName('*'); 
  3.     var lastDomArray = []; 
  4.     function trimSpace(strClass) { 
  5.         var reg = /\s+/g; 
  6.         return strClass.replace(reg, ' ').trim() 
  7.     } 
  8.     for (var i = 0; i < allDomArray.length; i++) { 
  9.         var classArray = trimSpace(allDomArray[i].className).split(' '); 
  10.         for (var j = 0; j < classArray.length; j++) { 
  11.             if (classArray[j] == _className) { 
  12.                 lastDomArray.push(allDomArray[i]); 
  13.                 break; 
  14.             } 
  15.         } 
  16.     } 
  17.     return lastDomArray; 

9.封装自己的forEach方法

  1. Array.prototype.myForEach = function (func, obj) { 
  2.     var len = this.length; 
  3.     var _this = arguments[1] ? arguments[1] : window; 
  4.     // var _this=arguments[1]||window; 
  5.     for (var i = 0; i < len; i++) { 
  6.         func.call(_this, this[i], i, this) 
  7.     } 

10.封装自己的filter方法

  1. Array.prototype.myFilter = function (func, obj) { 
  2.     var len = this.length; 
  3.     var arr = []; 
  4.     var _this = arguments[1] || window; 
  5.     for (var i = 0; i < len; i++) { 
  6.         func.call(_this, this[i], i, this) && arr.push(this[i]); 
  7.     } 
  8.     return arr; 

11.封装自己的数组map方法

  1. Array.prototype.myMap = function (func) { 
  2.     var arr = []; 
  3.     var len = this.length; 
  4.     var _this = arguments[1] || window; 
  5.     for (var i = 0; i < len; i++) { 
  6.         arr.push(func.call(_this, this[i], i, this)); 
  7.     } 
  8.     return arr; 

12.封装自己的数组every方法

  1. Array.prototype.myEvery = function (func) { 
  2.     var flag = true
  3.     var len = this.length; 
  4.     var _this = arguments[1] || window; 
  5.     for (var i = 0; i < len; i++) { 
  6.         if (func.apply(_this, [this[i], i, this]) == false) { 
  7.             flag = false
  8.             break; 
  9.         } 
  10.     } 
  11.     return flag; 

13.封装自己的数组reduce方法

  1. Array.prototype.myReduce = function (func, initialValue) { 
  2.     var len = this.length, 
  3.         nextValue, 
  4.         i; 
  5.     if (!initialValue) { 
  6.         // 没有传第二个参数 
  7.         nextValue = this[0]; 
  8.         i = 1; 
  9.     } else { 
  10.         // 传了第二个参数 
  11.         nextValue = initialValue; 
  12.         i = 0; 
  13.     } 
  14.     for (; i < len; i++) { 
  15.         nextValue = func(nextValue, this[i], i, this); 
  16.     } 
  17.     return nextValue; 

14.获取url中的参数

  1. function getWindonHref() { 
  2.     var sHref = window.location.href; 
  3.     var args = sHref.split('?'); 
  4.     if (args[0] === sHref) { 
  5.         return ''
  6.     } 
  7.     var hrefarr = args[1].split('#')[0].split('&'); 
  8.     var obj = {}; 
  9.     for (var i = 0; i < hrefarr.length; i++) { 
  10.         hrefarr[i] = hrefarr[i].split('='); 
  11.         obj[hrefarr[i][0]] = hrefarr[i][1]; 
  12.     } 
  13.     return obj; 

15.数组排序

  1. // 快排 [left] + min + [right
  2. function quickArr(arr) { 
  3.     if (arr.length <= 1) { 
  4.         return arr; 
  5.     } 
  6.     var left = [], 
  7.         right = []; 
  8.     var pIndex = Math.floor(arr.length / 2); 
  9.     var p = arr.splice(pIndex, 1)[0]; 
  10.     for (var i = 0; i < arr.length; i++) { 
  11.         if (arr[i] <= p) { 
  12.             left.push(arr[i]); 
  13.         } else { 
  14.             right.push(arr[i]); 
  15.         } 
  16.     } 
  17.     // 递归 
  18.     return quickArr(left).concat([p], quickArr(right)); 
  19.  
  20. // 冒泡 
  21. function bubbleSort(arr) { 
  22.     for (var i = 0; i < arr.length - 1; i++) { 
  23.         for (var j = i + 1; j < arr.length; j++) { 
  24.             if (arr[i] > arr[j]) { 
  25.                 var temp = arr[i]; 
  26.                 arr[i] = arr[j]; 
  27.                 arr[j] = temp
  28.             } 
  29.         } 
  30.     } 
  31.     return arr; 
  32.  
  33. function bubbleSort(arr) { 
  34.     var len = arr.length; 
  35.     for (var i = 0; i < len - 1; i++) { 
  36.         for (var j = 0; j < len - 1 - i; j++) { 
  37.             if (arr[j] > arr[j + 1]) { 
  38.                 var temp = arr[j]; 
  39.                 arr[j] = arr[j + 1]; 
  40.                 arr[j + 1] = temp
  41.             } 
  42.         } 
  43.     } 
  44.     return arr; 

原文链接:https://www.toutiao.com/a7046259287210918432/

延伸 · 阅读

精彩推荐
  • js教程js实现鼠标拖曳效果

    js实现鼠标拖曳效果

    这篇文章主要为大家详细介绍了js实现鼠标拖曳效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    等待的L先生8752021-12-22
  • js教程原生js中运算符及流程控制示例详解

    原生js中运算符及流程控制示例详解

    这篇文章主要给大家介绍了关于原生js中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    meichaoWen5002021-12-27
  • js教程Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    这篇文章主要介绍了Javascript 模拟mvc实现点餐程序案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    LiOnTalKING12122021-12-18
  • js教程原生JavaScript实现随机点名表

    原生JavaScript实现随机点名表

    这篇文章主要为大家详细介绍了原生JavaScript实现随机点名表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊9682021-12-31
  • js教程js删除对象中的某一个字段的方法实现

    js删除对象中的某一个字段的方法实现

    这篇文章主要介绍了js删除对象中的某一个字段的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    兔子零847232021-12-29
  • js教程使用 JavaScript 进行数据分组最优雅的方式

    使用 JavaScript 进行数据分组最优雅的方式

    对数据进行分组,是我们在开发中经常会遇到的需求,使用 JavaScript 进行数据分组的方式也有很多种,但是由于没有原生方法的支持,我们自己实现的数据...

    code秘密花园4352021-12-27
  • js教程JS代码实现页面切换效果

    JS代码实现页面切换效果

    这篇文章主要为大家详细介绍了JS代码实现页面切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    _Adoph9262021-12-29
  • js教程原生JavaScript实现轮播图

    原生JavaScript实现轮播图

    这篇文章主要为大家详细介绍了原生JavaScript实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊6872021-12-29