前端常用 JavaScript 方法封装

末蓝、 2022-10-13 05:19 266阅读 0赞

![在这里插入图片描述][20210706152604165.gif_pic_center]

### 目录 ###

*  1. 输入一个值，返回其数据类型\*\*
 *  2. 数组去重
 *  3. 字符串去重
 *  4. 深拷贝 浅拷贝
 *  5. reverse底层原理和扩展
 *  6. 圣杯模式的继承
 *  7. 找出字符串中第一次只出现一次的字母
 *  8. 找元素的第 n 级父元素
 *  9. 返回元素的第n个兄弟节点
 *  10. 封装mychildren，解决浏览器的兼容问题
 *  11. 判断元素有没有子元素
 *  12. 一个元素插入到另一个元素的后面
 *  13. 返回当前的时间（年月日时分秒）
 *  14. 获得滚动条的滚动距离
 *  15. 获得视口的尺寸
 *  16. 获取任一元素的任意属性
 *  17. 绑定事件的兼容代码
 *  18. 解绑事件
 *  19. 取消冒泡的兼容代码
 *  20. 检验字符串是否是回文
 *  21. 检验字符串是否是回文
 *  22. 兼容getElementsByClassName方法
 *  23. 运动函数
 *  24. 弹性运动
 *  25. 封装自己的forEach方法
 *  26. 封装自己的filter方法
 *  27. 数组map方法
 *  28. 数组every方法
 *  29. 数组reduce方法
 *  30. 获取url中的参数
 *  31. 数组排序
 *  32. 遍历Dom树
 *  33. 原生js封装ajax
 *  34. 异步加载script
 *  35. Cookie管理
 *  36. 实现bind()方法
 *  37. 实现call()方法
 *  38. 实现apply()方法
 *  39. 防抖
 *  40. 节流
 *  41. requestAnimFrame兼容性方法
 *  42. cancelAnimFrame兼容性方法
 *  43. jsonp底层方法
 *  44. 获取url上的参数
 *  45. 格式化时间
 *  46. 验证邮箱的正则表达式
 *  47. 函数柯里化
 *  48. 大数相加
 *  49. 单例模式

--------------------

# 1. 输入一个值，返回其数据类型\*\* #

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

# 2. 数组去重 #

function unique1(arr) { 
        return [...new Set(arr)]
    }

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个兄弟节点 #

# 10. 封装mychildren，解决浏览器的兼容问题 #

# 11. 判断元素有没有子元素 #

# 12. 一个元素插入到另一个元素的后面 #

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

# 13. 返回当前的时间（年月日时分秒） #

# 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. 绑定事件的兼容代码 #

# 18. 解绑事件 #

# 19. 取消冒泡的兼容代码 #

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

# 20. 检验字符串是否是回文 #

# 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. 运动函数 #

# 24. 弹性运动 #

# 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中的参数 #

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

# 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 #

# 34. 异步加载script #

# 35. Cookie管理 #

# 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. 防抖 #

# 40. 节流 #

# 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底层方法 #

# 44. 获取url上的参数 #

# 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. 函数柯里化 #

是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术

# 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. 单例模式 #

[20210706152604165.gif_pic_center]: /images/20221005/6660a56584d34084aab31c4c87f2250d.png