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

[[442941]]

 1.数组去重

 

function unique1(arr) { 
    return [...new Set(arr)] 
} 
 
function unique2(arr) { 
    var obj = {}; 
    return arr.filter(ele => { 
        if (!obj[ele]) { 
            obj[ele] = true; 
            return true; 
        } 
    }) 
} 
 
function unique3(arr) { 
    var result = []; 
    arr.forEach(ele => { 
        if (result.indexOf(ele) == -1) { 
            result.push(ele) 
        } 
    }) 
    return result; 
} 

 

2.字符串去重

 

String.prototype.unique = function () { 
    var obj = {}, 
        str = '', 
        len = this.length; 
    for (var i = 0; i < len; i++) { 
        if (!obj[this[i]]) { 
            str += this[i]; 
            obj[this[i]] = true; 
        } 
    } 
    return str; 
} 
 
###### //去除连续的字符串  
function uniq(str) { 
    return str.replace(/(\w)\1+/g, '$1') 
} 

 

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

 

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

 

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

 

String.prototype.firstAppear = function () { 
    var obj = {}, 
        len = this.length; 
    for (var i = 0; i < len; i++) { 
        if (obj[this[i]]) { 
            obj[this[i]]++; 
        } else { 
            obj[this[i]] = 1; 
        } 
    } 
    for (var prop in obj) { 
       if (obj[prop] == 1) { 
         return prop; 
       } 
    } 
} 

 

5.深拷贝 浅拷贝

 

//深克隆（深克隆不考虑函数） 
function deepClone(obj, result) { 
    var result = result || {}; 
    for (var prop in obj) { 
        if (obj.hasOwnProperty(prop)) { 
            if (typeof obj[prop] == 'object' && obj[prop] !== null) { 
                // 引用值(obj/array)且不为null 
                if (Object.prototype.toString.call(obj[prop]) == '[object Object]') { 
                    // 对象 
                    result[prop] = {}; 
                } else { 
                    // 数组 
                    result[prop] = []; 
                } 
                deepClone(obj[prop], result[prop]) 
    } else { 
        // 原始值或func 
        result[prop] = obj[prop] 
    } 
  } 
} 
return result; 
} 
 
// 深浅克隆是针对引用值 
function deepClone(target) { 
    if (typeof (target) !== 'object') { 
        return target; 
    } 
    var result; 
    if (Object.prototype.toString.call(target) == '[object Array]') { 
        // 数组 
        result = [] 
    } else { 
        // 对象 
        result = {}; 
    } 
    for (var prop in target) { 
        if (target.hasOwnProperty(prop)) { 
            result[prop] = deepClone(target[prop]) 
        } 
    } 
    return result; 
} 
// 无法复制函数 
var o1 = jsON.parse(jsON.stringify(obj1)); 

 

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

 

function hasChildren(e) { 
    var children = e.childNodes, 
        len = children.length; 
    for (var i = 0; i < len; i++) { 
        if (children[i].nodeType === 1) { 
            return true; 
        } 
    } 
    return false; 
} 

 

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

 

function getDateTime() { 
    var date = new Date(), 
        year = date.getFullYear(), 
        month = date.getMonth() + 1, 
        day = date.getDate(), 
        hour = date.getHours() + 1, 
        minute = date.getMinutes(), 
        second = date.getSeconds(); 
        month = checkTime(month); 
        day = checkTime(day); 
        hour = checkTime(hour); 
        minute = checkTime(minute); 
        second = checkTime(second); 
     function checkTime(i) { 
        if (i < 10) { 
                i = "0" + i; 
       } 
      return i; 
    } 
    return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒" 
} 

 

8.兼容getElementsByClassName方法

 

Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) { 
    var allDomArray = document.getElementsByTagName('*'); 
    var lastDomArray = []; 
    function trimSpace(strClass) { 
        var reg = /\s+/g; 
        return strClass.replace(reg, ' ').trim() 
    } 
    for (var i = 0; i < allDomArray.length; i++) { 
        var classArray = trimSpace(allDomArray[i].className).split(' '); 
        for (var j = 0; j < classArray.length; j++) { 
            if (classArray[j] == _className) { 
                lastDomArray.push(allDomArray[i]); 
                break; 
            } 
        } 
    } 
    return lastDomArray; 
} 

 

9.封装自己的forEach方法

 

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

 

10.封装自己的filter方法

 

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

 

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

 

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

 

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

 

Array.prototype.myEvery = function (func) { 
    var flag = true; 
    var len = this.length; 
    var _this = arguments[1] || window; 
    for (var i = 0; i < len; i++) { 
        if (func.apply(_this, [this[i], i, this]) == false) { 
            flag = false; 
            break; 
        } 
    } 
    return flag; 
} 

 

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

 

Array.prototype.myReduce = function (func, initialValue) { 
    var len = this.length, 
        nextValue, 
        i; 
    if (!initialValue) { 
        // 没有传第二个参数 
        nextValue = this[0]; 
        i = 1; 
    } else { 
        // 传了第二个参数 
        nextValue = initialValue; 
        i = 0; 
    } 
    for (; i < len; i++) { 
        nextValue = func(nextValue, this[i], i, this); 
    } 
    return nextValue; 
} 

 

14.获取url中的参数

 

function getWindonHref() { 
    var sHref = window.location.href; 
    var args = sHref.split('?'); 
    if (args[0] === sHref) { 
        return ''; 
    } 
    var hrefarr = args[1].split('#')[0].split('&'); 
    var obj = {}; 
    for (var i = 0; i < hrefarr.length; i++) { 
        hrefarr[i] = hrefarr[i].split('='); 
        obj[hrefarr[i][0]] = hrefarr[i][1]; 
    } 
    return obj; 
} 

 

15.数组排序

 

// 快排 [left] + min + [right] 
function quickArr(arr) { 
    if (arr.length <= 1) { 
        return arr; 
    } 
    var left = [], 
        right = []; 
    var pIndex = Math.floor(arr.length / 2); 
    var p = arr.splice(pIndex, 1)[0]; 
    for (var i = 0; i < arr.length; i++) { 
        if (arr[i] <= p) { 
            left.push(arr[i]); 
        } else { 
            right.push(arr[i]); 
        } 
    } 
    // 递归 
    return quickArr(left).concat([p], quickArr(right)); 
} 
 
// 冒泡 
function bubbleSort(arr) { 
    for (var i = 0; i < arr.length - 1; i++) { 
        for (var j = i + 1; j < arr.length; j++) { 
            if (arr[i] > arr[j]) { 
                var temp = arr[i]; 
                arr[i] = arr[j]; 
                arr[j] = temp; 
            } 
        } 
    } 
    return arr; 
} 
 
function bubbleSort(arr) { 
    var len = arr.length; 
    for (var i = 0; i < len - 1; i++) { 
        for (var j = 0; j < len - 1 - i; j++) { 
            if (arr[j] > arr[j + 1]) { 
                var temp = arr[j]; 
                arr[j] = arr[j + 1]; 
                arr[j + 1] = temp; 
            } 
        } 
    } 
    return arr;