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

 1.数组去重

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

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. ###### //去除连续的字符串  
15. function uniq(str) { 
16.     return str.replace(/(\w)\1+/g, '$1') 
17. } 

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

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

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.     } 
16. } 

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. } 
22. return result; 
23. } 
24.  
25. // 深浅克隆是针对引用值 
26. function deepClone(target) { 
27.     if (typeof (target) !== 'object') { 
28.         return target; 
29.     } 
30.     var result; 
31.     if (Object.prototype.toString.call(target) == '[object Array]') { 
32.         // 数组 
33.         result = [] 
34.     } else { 
35.         // 对象 
36.         result = {}; 
37.     } 
38.     for (var prop in target) { 
39.         if (target.hasOwnProperty(prop)) { 
40.             result[prop] = deepClone(target[prop]) 
41.         } 
42.     } 
43.     return result; 
44. } 
45. // 无法复制函数 
46. 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; 
10. } 

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 + "秒" 
21. } 

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; 
18. } 

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.     } 
8. } 

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; 
9. } 

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; 
9. } 

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; 
12. } 

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; 
18. } 

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; 
14. } 

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. // 冒泡 
22. function bubbleSort(arr) { 
23.     for (var i = 0; i < arr.length - 1; i++) { 
24.         for (var j = i + 1; j < arr.length; j++) { 
25.             if (arr[i] > arr[j]) { 
26.                 var temp = arr[i]; 
27.                 arr[i] = arr[j]; 
28.                 arr[j] = temp; 
29.             } 
30.         } 
31.     } 
32.     return arr; 
33. } 
34.  
35. function bubbleSort(arr) { 
36.     var len = arr.length; 
37.     for (var i = 0; i < len - 1; i++) { 
38.         for (var j = 0; j < len - 1 - i; j++) { 
39.             if (arr[j] > arr[j + 1]) { 
40.                 var temp = arr[j]; 
41.                 arr[j] = arr[j + 1]; 
42.                 arr[j + 1] = temp; 
43.             } 
44.         } 
45.     } 
46.     return arr; 

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