JavaScript 常用方法封裝

封裝一些 JavaScript 中常用的一些方法，比如輸入一個值，返回其數據類型、數組去重、字符串去重、深拷貝 淺拷貝、reverse 底層原理和擴展、聖盃模式的繼承等等

1、輸入一個值，返回其數據類型

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

2、數組去重

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

3、字符串去重

    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')
    }

4、深拷貝 淺拷貝

    //深克隆（深克隆不考慮函數）
    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));

5、reverse 底層原理和擴展

    // 改變原數組
    Array.prototype.myReverse = function () {
        var len = this.length;
        for (var i = 0; i < len; i++) {
            var temp = this[i];
            this[i] = this[len - 1 - i];
            this[len - 1 - i] = temp;
        }
        return this;
    }

6、聖盃模式的繼承

    function inherit(Target, Origin) {
        function F() { };
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constructor = Target;
        // 最終的原型指向
        Target.prop.uber = Origin.prototype;
    }

7、找出字符串中第一次只出現一次的字母

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

8、找元素的第 n 級父元素

    function parents(ele, n) {
        while (ele && n) {
            ele = ele.parentElement ? ele.parentElement : ele.parentNode;
            n--;
        }
        return ele;
    }

9、 返回元素的第 n 個兄弟節點

    function retSibling(e, n) {
        while (e && n) {
            if (n > 0) {
                if (e.nextElementSibling) {
                    e = e.nextElementSibling;
                } else {
                    for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling) ;
                }
                n--;
            } else {
                if (e.previousElementSibling) {
                    e = e.previousElementSibling;
                } else {
                    for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling) ;
                }
                n++;
            }
        }
        return e;
    }

10、封裝 mychildren，解決瀏覽器的兼容問題

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

11、判斷元素有沒有子元素

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

12、我一個元素插入到另一個元素的後面

    Element.prototype.insertAfter = function (target, elen) {
        var nextElen = elen.nextElenmentSibling;
        if (nextElen == null) {
            this.appendChild(target);
        } else {
            this.insertBefore(target, nextElen);
        }
    }

13、返回當前的時間（年月日時分秒）

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

14、獲得滾動條的滾動距離

    function getScrollOffset() {
        if (window.pageXOffset) {
            return {
                x: window.pageXOffset,
                y: window.pageYOffset
            }
        } else {
            return {
                x: document.body.scrollLeft + document.documentElement.scrollLeft,
                y: document.body.scrollTop + document.documentElement.scrollTop
            }
        }
    }

15、獲得視口的尺寸

    function getViewportOffset() {
        if (window.innerWidth) {
            return {
                w: window.innerWidth,
                h: window.innerHeight
            }
        } else {
            // ie8及其以下
            if (document.compatMode === "BackCompat") {
                // 怪異模式
                return {
                    w: document.body.clientWidth,
                    h: document.body.clientHeight
                }
            } else {
                // 標準模式
                return {
                    w: document.documentElement.clientWidth,
                    h: document.documentElement.clientHeight
                }
            }
        }
    }

16、獲取任一元素的任意屬性

    function getStyle(elem, prop) {
        return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]
    }

17、綁定事件的兼容代碼

    function addEvent(elem, type, handle) {
        if (elem.addEventListener) { //非ie和非ie9
            elem.addEventListener(type, handle, false);
        } else if (elem.attachEvent) { //ie6到ie8
            elem.attachEvent('on' + type, function () {
                handle.call(elem);
            })
        } else {
            elem['on' + type] = handle;
        }
    }

18、解綁事件

    function removeEvent(elem, type, handle) {
        if (elem.removeEventListener) { //非ie和非ie9
            elem.removeEventListener(type, handle, false);
        } else if (elem.detachEvent) { //ie6到ie8
            elem.detachEvent('on' + type, handle);
        } else {
            elem['on' + type] = null;
        }
    }

19、取消冒泡的兼容代碼

    function stopBubble(e) {
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }
    }

20、檢驗字符串是否是迴文

    function isPalina(str) {
        if (Object.prototype.toString.call(str) !== '[object String]') {
            return false;
        }
        var len = str.length;
        for (var i = 0; i < len / 2; i++) {
            if (str[i] != str[len - 1 - i]) {
                return false;
            }
        }
        return true;
    }

21、檢驗字符串是否是迴文

    function isPalindrome(str) {
        str = str.replace(/\W/g, '').toLowerCase();
        console.log(str)
        return (str == str.split('').reverse().join(''))
    }

22、兼容 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;
    }

23、運動函數

    function animate(obj, json, callback) {
        clearInterval(obj.timer);
        var speed,
            current;
        obj.timer = setInterval(function () {
            var lock = true;
            for (var prop in json) {
                if (prop == 'opacity') {
                    current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
                } else {
                    current = parseInt(window.getComputedStyle(obj, null)[prop]);
                }
                speed = (json[prop] - current) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                if (prop == 'opacity') {
                    obj.style[prop] = (current + speed) / 100;
                } else {
                    obj.style[prop] = current + speed + 'px';
                }
                if (current != json[prop]) {
                    lock = false;
                }
            }
            if (lock) {
                clearInterval(obj.timer);
                typeof callback == 'function' ? callback() : '';
            }
        }, 30)
    }

24、彈性運動

    function ElasticMovement(obj, target) {
        clearInterval(obj.timer);
        var iSpeed = 40,
            a, u = 0.8;
        obj.timer = setInterval(function () {
            a = (target - obj.offsetLeft) / 8;
            iSpeed = iSpeed + a;
            iSpeed = iSpeed * u;
            if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) {
                console.log('over')
                clearInterval(obj.timer);
                obj.style.left = target + 'px';
            } else {
                obj.style.left = obj.offsetLeft + iSpeed + 'px';
            }
        }, 30);
    }

25、封裝自己的 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)
        }
    }

26、封裝自己的 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;
    }

27、數組 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;
    }

28、數組 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;
    }

29、數組 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;
    }

30、獲取 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;
    }

31、數組排序

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

32、遍歷 Dom 樹

    // 給定頁面上的DOM元素,將訪問元素本身及其所有後代(不僅僅是它的直接子元素)
    // 對於每個訪問的元素，函數講元素傳遞給提供的回調函數
    function traverse(element, callback) {
        callback(element);
        var list = element.children;
        for (var i = 0; i < list.length; i++) {
            traverse(list[i], callback);
        }
    }

33、原生 js 封裝 ajax

    function ajax(method, url, callback, data, flag) {
        var xhr;
        flag = flag || true;
        method = method.toUpperCase();
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(2)
                callback(xhr.responseText);
            }
        }
    
        if (method == 'GET') {
            var date = new Date(),
                timer = date.getTime();
            xhr.open('GET', url + '?' + data + '&timer' + timer, flag);
            xhr.send()
        } else if (method == 'POST') {
            xhr.open('POST', url, flag);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }
    }

34、異步加載 script

    function loadScript(url, callback) {
        var oscript = document.createElement('script');
        if (oscript.readyState) { // ie8及以下版本
            oscript.onreadystatechange = function () {
                if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
                    callback();
                }
            }
        } else {
            oscript.onload = function () {
                callback()
            };
        }
        oscript.src = url;
        document.body.appendChild(oscript);
    }

35、cookie 管理

    var cookie = {
        set: function (name, value, time) {
            document.cookie = name + '=' + value + '; max-age=' + time;
            return this;
        },
        remove: function (name) {
            return this.setCookie(name, '', -1);
        },
        get: function (name, callback) {
            var allCookieArr = document.cookie.split('; ');
            for (var i = 0; i < allCookieArr.length; i++) {
                var itemCookieArr = allCookieArr[i].split('=');
                if (itemCookieArr[0] === name) {
                    return itemCookieArr[1]
                }
            }
            return undefined;
        }
    }

36、實現 bind() 方法

    Function.prototype.myBind = function (target) {
        var target = target || window;
        var _args1 = [].slice.call(arguments, 1);
        var self = this;
        var temp = function () { };
        var F = function () {
            var _args2 = [].slice.call(arguments, 0);
            var parasArr = _args1.concat(_args2);
            return self.apply(this instanceof temp ? this : target, parasArr)
        }
        temp.prototype = self.prototype;
        F.prototype = new temp();
        return F;
    }

37、實現 call() 方法

    Function.prototype.myCall = function () {
        var ctx = arguments[0] || window;
        ctx.fn = this;
        var args = [];
        for (var i = 1; i < arguments.length; i++) {
            args.push(arguments[i])
        }
        var result = ctx.fn(...args);
        delete ctx.fn;
        return result;
    }

38、實現 apply() 方法

    Function.prototype.myApply = function () {
        var ctx = arguments[0] || window;
        ctx.fn = this;
        if (!arguments[1]) {
            var result = ctx.fn();
            delete ctx.fn;
            return result;
        }
        var result = ctx.fn(...arguments[1]);
        delete ctx.fn;
        return result;
    }

39、防抖

    function debounce(handle, delay) {
        var timer = null;
        return function () {
            var _self = this, _args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                handle.apply(_self, _args)
            }, delay)
        }
    }

40、節流

    function throttle(handler, wait) {
        var lastTime = 0;
        return function (e) {
            var nowTime = new Date().getTime();
            if (nowTime - lastTime > wait) {
                handler.apply(this, arguments);
                lastTime = nowTime;
            }
        }
    }

41、requestAnimFrame 兼容性方法

    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

42、cancelAnimFrame 兼容性方法

    window.cancelAnimFrame = (function () {
        return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (id) {
            window.clearTimeout(id);
        };
    })();

43、jsonp 底層方法

    function jsonp(url, callback) {
        var oscript = document.createElement('script');
        if (oscript.readyState) { // ie8及以下版本
            oscript.onreadystatechange = function () {
                if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
                    callback();
                }
            }
        } else {
            oscript.onload = function () {
                callback()
            };
        }
        oscript.src = url;
        document.body.appendChild(oscript);
    }

44、獲取 url 上的參數

    function getUrlParam(sUrl, sKey) {
        var result = {};
        sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, function (ele, key, val) {
            if (!result[key]) {
                result[key] = val;
            } else {
                var temp = result[key];
                result[key] = [].concat(temp, val);
            }
        })
        if (!sKey) {
            return result;
        } else {
            return result[sKey] || '';
        }
    }

45、格式化時間

    function formatDate(t, str) {
        var obj = {
            yyyy: t.getFullYear(),
            yy: ("" + t.getFullYear()).slice(-2),
            M: t.getMonth() + 1,
            MM: ("0" + (t.getMonth() + 1)).slice(-2),
            d: t.getDate(),
            dd: ("0" + t.getDate()).slice(-2),
            H: t.getHours(),
            HH: ("0" + t.getHours()).slice(-2),
            h: t.getHours() % 12,
            hh: ("0" + t.getHours() % 12).slice(-2),
            m: t.getMinutes(),
            mm: ("0" + t.getMinutes()).slice(-2),
            s: t.getSeconds(),
            ss: ("0" + t.getSeconds()).slice(-2),
            w: ['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
        };
        return str.replace(/([a-z]+)/ig, function ($1) {
            return obj[$1]
        });
    }

46、驗證郵箱的正則表達式

    function isAvailableEmail(sEmail) {
        var reg = /^([\w+\.])+@\w+([.]\w+)+$/
        return reg.test(sEmail)
    }

47、函數柯里化

    // 是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，並且返回接受餘下的參數且返回結果的新函數的技術
    function curryIt(fn) {
        var length = fn.length,
            args = [];
        var result = function (arg) {
            args.push(arg);
            length--;
            if (length <= 0) {
                return fn.apply(this, args);
            } else {
                return result;
            }
        }
        return result;
    }

48、大數相加

    function sumBigNumber(a, b) {
        var res = '', // 結果
            temp = 0; // 按位加的結果及進位
        a = a.split('');
        b = b.split('');
        while (a.length || b.length || temp) {
            //~~按位非 1.類型轉換，轉換成數字 2.~~undefined==0 
            temp += ~~a.pop() + ~~b.pop();
            res = (temp % 10) + res;
            temp = temp > 9;
        }
        return res.replace(/^0+/, '');
    }

49、單例模式

    function getSingle(func) {
        var result;
        return function () {
            if (!result) {
                result = new func(arguments);
            }
            return result;
        }
    }

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/77jWyVeBpvRT_jWS93h9MQ