前端經(jīng)常會(huì)用到的JavaScript方法封裝

作者：Find一只程序猿 2021-12-29 22:29:10

前端經(jīng)常會(huì)用到的JavaScript方法封裝都有哪些呢？我們一起來(lái)看一下吧！

[[442941]]

1.數(shù)組去重

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; 
} 
 
###### //去除連續(xù)的字符串  
function uniq(str) { 
    return str.replace(/(\w)\1+/g, '$1') 
}

3.輸入一個(gè)值，返回其數(shù)據(jù)類(lèi)型

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

4.找出字符串中第一次只出現(xiàn)一次的字母

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.深拷貝淺拷貝

//深克隆（深克隆不考慮函數(shù)） 
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]') { 
                    // 對(duì)象 
                    result[prop] = {}; 
                } else { 
                    // 數(shù)組 
                    result[prop] = []; 
                } 
                deepClone(obj[prop], result[prop]) 
    } else { 
        // 原始值或func 
        result[prop] = obj[prop] 
    } 
  } 
} 
return result; 
} 
 
// 深淺克隆是針對(duì)引用值 
function deepClone(target) { 
    if (typeof (target) !== 'object') { 
        return target; 
    } 
    var result; 
    if (Object.prototype.toString.call(target) == '[object Array]') { 
        // 數(shù)組 
        result = [] 
    } else { 
        // 對(duì)象 
        result = {}; 
    } 
    for (var prop in target) { 
        if (target.hasOwnProperty(prop)) { 
            result[prop] = deepClone(target[prop]) 
        } 
    } 
    return result; 
} 
// 無(wú)法復(fù)制函數(shù) 
var o1 = jsON.parse(jsON.stringify(obj1));

6.判斷元素有沒(méi)有子元素

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.返回當(dāng)前的時(shí)間(年月日時(shí)分秒)

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 + "時(shí)" + 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.封裝自己的數(shù)組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.封裝自己的數(shù)組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.封裝自己的數(shù)組reduce方法

Array.prototype.myReduce = function (func, initialValue) { 
    var len = this.length, 
        nextValue, 
        i; 
    if (!initialValue) { 
        // 沒(méi)有傳第二個(gè)參數(shù) 
        nextValue = this[0]; 
        i = 1; 
    } else { 
        // 傳了第二個(gè)參數(shù) 
        nextValue = initialValue; 
        i = 0; 
    } 
    for (; i < len; i++) { 
        nextValue = func(nextValue, this[i], i, this); 
    } 
    return nextValue; 
}

14.獲取url中的參數(shù)

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.數(shù)組排序

// 快排 [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;