常用的前端JavaScript方法封装

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中的参数（1）

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（1）

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上的参数（2）

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;

    }

}

复制代码

 

50、加载js || css || style

const loadRes = function(name, type, fn) { // 加载js || css || style

  let ref

  if (type === 'js') { // 外部js

    ref = document.createElement('script')

    ref.setAttribute('type', 'text/JavaScript')

    ref.setAttribute('src', name)

  } else if (type === 'css') { // 外部css

    ref = document.createElement('link')

    ref.setAttribute('rel', 'stylesheet')

    ref.setAttribute('type', 'text/css')

    ref.setAttribute('href', name)

  } else if (type === 'style') { // style

    ref = document.createElement('style')

    ref.innerhtml = name

  }

  if (typeof ref !== 'undefined') {

    document.getElementsByTagName('head')[0].appendChild(ref)

    ref.onload = function() { // 加载完成执行

      typeof fn === 'function' && fn()

    }

  }

}

复制代码

 

51、获取url参数（3）

const getUrlParam = function(name) { // 获取url参数

  let reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i')

  let r = window.location.href.substr(1).match(reg)

  if (r != null) {

    return decodeURI(r[2])

  }

  return undefined

}

复制代码

 

52、本地存储

const store = { // 本地存储

  set: function(name, value, day) { // 设置

    let d = new Date()

    let time = 0

    day = (typeof(day) === 'undefined' || !day) ? 1 : day // 时间,默认存储1天

    time = d.setHours(d.getHours() + (24 * day)) // 毫秒

    localStorage.setItem(name, JSON.stringify({

      data: value,

      time: time

    }))

  },

  get: function(name) { // 获取

    let data = localStorage.getItem(name)

    if (!data) {

      return null

    }

    let obj = JSON.parse(data)

    if (new Date().getTime() > obj.time) { // 过期

      localStorage.removeItem(name)

      return null

    } else {

      return obj.data

    }

  },

  clear: function(name) { // 清空

    if (name) { // 删除键为name的缓存

      localStorage.removeItem(name)

    } else { // 清空全部

      localStorage.clear()

    }

  }

}

复制代码

 

53、cookie操作【set，get，del】

const cookie = { // cookie操作【set，get，del】

  set: function(name, value, day) {

    let oDate = new Date()

    oDate.setDate(oDate.getDate() + (day || 30))

    document.cookie = name + '=' + value + ';expires=' + oDate + "; path=/;"

  },

  get: function(name) {

    let str = document.cookie

    let arr = str.split('; ')

    for (let i = 0; i < arr.length; i++) {

      let newArr = arr[i].split('=')

      if (newArr[0] === name) {

        return newArr[1]

      }

    }

  },

  del: function(name) {

    this.set(name, '', -1)

  }

}

复制代码

 

54、Js获取元素样式【支持内联】

const getRealStyle = function(obj, styleName) { // Js获取元素样式【支持内联】

  var realStyle = null

  if (obj.currentStyle) {

    realStyle = obj.currentStyle[styleName]

  } else if (window.getComputedStyle) {

    realStyle = window.getComputedStyle(obj, null)[styleName]

  }

  return realStyle

}

复制代码

 

55、时间格式化

const formatDate = function(fmt, date) { // 时间格式化 【'yyyy-MM-dd hh:mm:ss',时间】

  if (typeof date !== 'object') {

    date = !date ? new Date() : new Date(date)

  }

  var o = {

    'M+': date.getMonth() + 1, // 月份

    'd+': date.getDate(), // 日

    'h+': date.getHours(), // 小时

    'm+': date.getMinutes(), // 分

    's+': date.getSeconds(), // 秒

    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度

    'S': date.getMilliseconds() // 毫秒

  }

  if (/(y+)/.test(fmt)) {

    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))

  }

  for (var k in o) {

    if (new RegExp('(' + k + ')').test(fmt)) {

      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))

    }

  }

  return fmt

}

复制代码

 

56、原生ajax操作（2）

const ajax = function(conf) { // ajax操作

  let url = conf.url,

    data = conf.data,

    senData = [], // 封装后的数据

    async = conf.async !== undefined ? conf.async : true, // ture为异步请求

      type = conf.type || 'get', // 默认请求方式get

      dataType = conf.dataType || 'json',

      contenType = conf.contenType || 'application/x-www-form-urlencoded',

      success = conf.success,

      error = conf.error,

      isForm = conf.isForm || false, // 是否formdata

      header = conf.header || {}, // 头部信息

      xhr = '' // 创建ajax引擎对象

  if (data == null) {

    senData = ''

  } else if (typeof data === 'object' && !isForm) { // 如果data是对象，转换为字符串

    for (var k in data) {

      senData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))

    }

    senData = senData.join('&')

  } else {

    senData = data

  }

  try {

    xhr = new ActiveXObject('microsoft.xmlhttp') // IE内核系列浏览器

  } catch (e1) {

    try {

      xhr = new XMLHttpRequest() // 非IE内核浏览器

    } catch (e2) {

      if (error != null) {

        error('不支持ajax请求')

      }

    }

  };

  xhr.open(type, type !== 'get' ? url : url + '?' + senData, async)

  if (type !== 'get' && !isForm) {

    xhr.setRequestHeader('content-type', contenType)

  }

  for (var h in header) {

    xhr.setRequestHeader(h, header[h])

  }

  xhr.send(type !== 'get' ? senData : null)

  xhr.onreadystatechange = function() {

    if (xhr.readyState === 4) {

      if (xhr.status >= 200 && xhr.status < 300) {

        if (dataType === 'json' && success != null) {

          let res = ''

          try {

            res = eval('(' + xhr.responseText + ')')

          } catch (e) {

            console.log(e)

          }

          success(res) // 将json字符串转换为js对象

        };

      } else {

        if (error != null) {

          error('通讯失败!' + xhr.status)

        }

      }

    }

  }

}

复制代码

 

57、fetch请求的封装

const fetch = function(url, setting) { // fetch请求的封装

  let opts = { // 设置参数的初始值

    method: (setting.method || 'GET').toUpperCase(), // 请求方式

    headers: setting.headers || {}, // 请求头设置

    credentials: setting.credentials || true, // 设置cookie是否一起发送

    body: setting.body || {},

    mode: setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin

    redirect: setting.redirect || 'follow', // follow, error, manual

    cache: setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache)

  }

  let dataType = setting.dataType || 'json' // 解析方式

  let data = setting.data || '' // 参数

  let paramsFormat = function(obj) { // 参数格式

    var str = ''

    for (var i in obj) {

      str += `${i}=${obj[i]}&`

    }

    return str.split('').slice(0, -1).join('')

  }



  if (opts.method === 'GET') {

    url = url + (data ? `?${paramsFormat(data)}` : '')

  } else {

    setting.body = data || {}

  }

  return new Promise((resolve, reject) => {

    fetch(url, opts).then(async res => {

      let data = dataType === 'text' ? await res.text() : dataType === 'blob' ? await res.blob() : await res.json()

      resolve(data)

    }).catch(e => {

      reject(e)

    })

  })

}

复制代码

 

58、设备判断：android、ios、web

const isDevice = function() { // 判断是android还是ios还是web

  var ua = navigator.userAgent.toLowerCase()

  if (ua.match(/iPhone\sOS/i) === 'iphone os' || ua.match(/iPad/i) === 'ipad') { // ios

    return 'iOS'

  }

  if (ua.match(/Android/i) === 'android') {

    return 'Android'

  }

  return 'Web'

}

复制代码

 

59、判断是否为微信

const isWx = function() { // 判断是否为微信

  var ua = window.navigator.userAgent.toLowerCase()

  if (ua.match(/MicroMessenger/i) === 'micromessenger') {

    return true

  }

  return false

}

复制代码

 

60、文本复制功能

const copyTxt = function(text, fn) { // 复制功能

  if (typeof document.execCommand !== 'function') {

    console.log('复制失败，请长按复制')

    return

  }

  var dom = document.createElement('textarea')

  dom.value = text

  dom.setAttribute('style', 'display: block;width: 1px;height: 1px;')

  document.body.appendChild(dom)

  dom.select()

  var result = document.execCommand('copy')

  document.body.removeChild(dom)

  if (result) {

    console.log('复制成功')

    typeof fn === 'function' && fn()

    return

  }

  if (typeof document.createRange !== 'function') {

    console.log('复制失败，请长按复制')

    return

  }

  var range = document.createRange()

  var div = document.createElement('div')

  div.innerhtml = text

  div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;')

  document.body.appendChild(div)

  range.selectNode(div)

  var selection = window.getSelection()

  console.log(selection)

  if (selection.rangeCount > 0) {

    selection.removeAllRanges()

  }

  selection.addRange(range)

  document.execCommand('copy')

  typeof fn === 'function' && fn()

  console.log('复制成功')

}

复制代码

 

61、判断是否是一个数组

const isArray = function(arr) { // 判断是否是一个数组

  return Object.prototype.toString.call(arr) === '[object Array]'

}

复制代码

 

62、判断两个数组是否相等

const arrayEqual = function(arr1, arr2) { //判断两个数组是否相等

  if (arr1 === arr2) return true;

  if (arr1.length != arr2.length) return false;

  for (let i = 0; i < arr1.length; ++i) {

    if (arr1[i] !== arr2[i]) return false;

  }

  return true;

}

复制代码

 

63、时间与时间戳转换

const stamp = { // 时间，时间戳转换

  getTime: function(time) { // 时间转10位时间戳

    let date = time ? new Date(time) : new Date()

    return Math.round(date.getTime() / 1000)

  },

  timeToStr: function(time, fmt) { // 10位时间戳转时间

    return new Date(time * 1000).pattern(fmt || 'yyyy-MM-dd')

  }

}

复制代码

 

64、常用正则验证

const checkStr = function(str, type) { // 常用正则验证，注意type大小写

  switch (type) {

    case 'phone': // 手机号码

      return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str)

    case 'tel': // 座机

      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)

    case 'card': // 身份证

      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str)

    case 'pwd': // 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线

      return /^[a-zA-Z]\w{5,17}$/.test(str)

    case 'postal': // 邮政编码

      return /[1-9]\d{5}(?!\d)/.test(str)

    case 'QQ': // QQ号

      return /^[1-9][0-9]{4,9}$/.test(str)

    case 'email': // 邮箱

      return /^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$/.test(str)

    case 'money': // 金额(小数点2位)

      return /^\d*(?:.\d{0,2})?$/.test(str)

    case 'URL': // 网址

      return /(http|ftp|https)://[\w-_]+(.[\w-_]+)+([\w-.,@?^=%&:/~+#]*[\w-@?^=%&/~+#])?/.test(str)

    case 'IP': // IP

      return /((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/.test(str)

    case 'date': // 日期时间

      return /^(\d{4})-(\d{2})-(\d{2}) (\d{2})(?::\d{2}|:(\d{2}):(\d{2}))$/.test(str) ||

        /^(\d{4})-(\d{2})-(\d{2})$/.test(str)

    case 'number': // 数字

      return /^[0-9]$/.test(str)

    case 'english': // 英文

      return /^[a-zA-Z]+$/.test(str)

    case 'chinese': // 中文

      return /^[\u4E00-\u9FA5]+$/.test(str)

    case 'lower': // 小写

      return /^[a-z]+$/.test(str)

    case 'upper': // 大写

      return /^[A-Z]+$/.test(str)

    case 'HTML': // HTML标记

      return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str)

    default:

      return true

  }

}

复制代码

 

65、是否为PC端

const isPC = function() { // 是否为PC端

  let userAgentInfo = navigator.userAgent

  let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']

  let flag = true

  for (let v = 0; v < Agents.length; v++) {

    if (userAgentInfo.indexOf(Agents[v]) > 0) {

      flag = false

      break

    }

  }

  return flag

}

复制代码

 

66、去除字符串空格

const trim = function(str, type) { // 去除空格， type:  1-所有空格  2-前后空格  3-前空格 4-后空格

  type = type || 1

  switch (type) {

    case 1:

      return str.replace(/\s+/g, '')

    case 2:

      return str.replace(/(^\s*)|(\s*$)/g, '')

    case 3:

      return str.replace(/(^\s*)/g, '')

    case 4:

      return str.replace(/(\s*$)/g, '')

    default:

      return str

  }

}

复制代码

 

67、字符串大小写转换

const changeCase = function(str, type) { // 字符串大小写转换 type:  1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写

  type = type || 4

  switch (type) {

    case 1:

      return str.replace(/\b\w+\b/g, function(word) {

        return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()

      })

    case 2:

      return str.replace(/\b\w+\b/g, function(word) {

        return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()

      })

    case 3:

      return str.split('').map(function(word) {

        if (/[a-z]/.test(word)) {

          return word.toUpperCase()

        } else {

          return word.toLowerCase()

        }

      }).join('')

    case 4:

      return str.toUpperCase()

    case 5:

      return str.toLowerCase()

    default:

      return str

  }

}

复制代码

 

68、过滤html代码

const filterTag = function(str) { // 过滤html代码(把<>转换)

  str = str.replace(/&/ig, '&')

  str = str.replace(/</ig, '<')

  str = str.replace(/>/ig, '>')

  str = str.replace(' ', ' ')

  return str

}

复制代码

 

69、生成随机数范围

const random = function(min, max) { // 生成随机数范围

  if (arguments.length === 2) {

    return Math.floor(min + Math.random() * ((max + 1) - min))

  } else {

    return null

  }

}

复制代码

 

70、阿拉伯数字转中文大写数字

const numberToChinese = function(num) { // 将阿拉伯数字翻译成中文的大写数字

  let AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十')

  let BB = new Array('', '十', '百', '仟', '萬', '億', '点', '')

  let a = ('' + num).replace(/(^0*)/g, '').split('.')

  let k = 0

  let re = ''

  for (let i = a[0].length - 1; i >= 0; i--) {

    switch (k) {

      case 0:

        re = BB[7] + re

        break

      case 4:

        if (!new RegExp('0{4}//d{' + (a[0].length - i - 1) + '}$').test(a[0])) {

          re = BB[4] + re

        }

        break

      case 8:

        re = BB[5] + re

        BB[7] = BB[5]

        k = 0

        break

    }

    if (k % 4 === 2 && a[0].charAt(i + 2) !== 0 && a[0].charAt(i + 1) === 0) {

      re = AA[0] + re

    }

    if (a[0].charAt(i) !== 0) {

      re = AA[a[0].charAt(i)] + BB[k % 4] + re

    }

    k++

  }

  if (a.length > 1) { // 加上小数部分(如果有小数部分)

    re += BB[6]

    for (let i = 0; i < a[1].length; i++) {

      re += AA[a[1].charAt(i)]

    }

  }

  if (re === '一十') {

    re = '十'

  }

  if (re.match(/^一/) && re.length === 3) {

    re = re.replace('一', '')

  }

  return re

}

复制代码

 

71、原生dom操作

const dom = {

  $: function(selector) {

    let type = selector.substring(0, 1)

    if (type === '#') {

      if (document.querySelecotor) return document.querySelector(selector)

      return document.getElementById(selector.substring(1))

    } else if (type === '.') {

      if (document.querySelecotorAll) return document.querySelectorAll(selector)

      return document.getElementsByClassName(selector.substring(1))

    } else {

      return document['querySelectorAll' ? 'querySelectorAll' : 'getElementsByTagName'](selector)

    }

  },

  hasClass: function(ele, name) { /* 检测类名 */

    return ele.className.match(new RegExp('(\s|^)' + name + '(\s|$)'))

  },

  addClass: function(ele, name) { /* 添加类名 */

    if (!this.hasClass(ele, name)) ele.className += ' ' + name

  },

  removeClass: function(ele, name) { /* 删除类名 */

    if (this.hasClass(ele, name)) {

      let reg = new RegExp('(\s|^)' + name + '(\s|$)')

      ele.className = ele.className.replace(reg, '')

    }

  },

  replaceClass: function(ele, newName, oldName) { /* 替换类名 */

    this.removeClass(ele, oldName)

    this.addClass(ele, newName)

  },

  siblings: function(ele) { /* 获取兄弟节点 */

    console.log(ele.parentNode)

    let chid = ele.parentNode.children,

      eleMatch = []

    for (let i = 0, len = chid.length; i < len; i++) {

      if (chid[i] !== ele) {

        eleMatch.push(chid[i])

      }

    }

    return eleMatch

  },

  getByStyle: function(obj, name) { /* 获取行间样式属性 */

    if (obj.currentStyle) {

      return obj.currentStyle[name]

    } else {

      return getComputedStyle(obj, false)[name]

    }

  },

  domToStirng: function(htmlDOM) { /* DOM转字符串 */

    var div = document.createElement('div')

    div.appendChild(htmlDOM)

    return div.innerHTML

  },

  stringToDom: function(htmlString) { /* 字符串转DOM */

    var div = document.createElement('div')

    div.innerHTML = htmlString

    return div.children[0]

  }

}

复制代码

 

72、判断图片加载完成

const imgLoadAll = function(arr, callback) { // 图片加载

  let arrImg = []

  for (let i = 0; i < arr.length; i++) {

    let img = new Image()

    img.src = arr[i]

    img.onload = function() {

      arrImg.push(this)

      if (arrImg.length == arr.length) {

        callback && callback()

      }

    }

  }

}

复制代码

 

73、音频加载完成操作

const loadAudio = function(src, callback) { // 音频加载

  var audio = new Audio(src)

  audio.onloadedmetadata = callback

  audio.src = src

}

复制代码

 

74、光标所在位置插入字符

const insertAtCursor = function(dom, val) { // 光标所在位置插入字符

  if (document.selection) {

    dom.focus()

    let sel = document.selection.createRange()

    sel.text = val

    sel.select()

  } else if (dom.selectionStart || dom.selectionStart == '0') {

    let startPos = dom.selectionStart

    let endPos = dom.selectionEnd

    let restoreTop = dom.scrollTop

    dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length)

    if (restoreTop > 0) {

      dom.scrollTop = restoreTop

    }

    dom.focus()

    dom.selectionStart = startPos + val.length

    dom.selectionEnd = startPos + val.length

  } else {

    dom.value += val

    dom.focus()

  }

}

复制代码

 

75、图片地址转base64

const getBase64 = function(img) { //传入图片路径，返回base64，使用getBase64(url).then(function(base64){},function(err){}); 

  let getBase64Image = function(img, width, height) { //width、height调用时传入具体像素值，控制大小,不传则默认图像大小

    let canvas = document.createElement("canvas");

    canvas.width = width ? width : img.width;

    canvas.height = height ? height : img.height;

    let ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    let dataURL = canvas.toDataURL();

    return dataURL;

  }

  let image = new Image();

  image.crossOrigin = '';

  image.src = img;

  let deferred = $.Deferred();

  if (img) {

    image.onload = function() {

      deferred.resolve(getBase64Image(image));

    }

    return deferred.promise();

  }

}

复制代码

 

76、base64图片下载功能

const downloadFile = function(base64, fileName) { //base64图片下载功能

  let base64ToBlob = function(code) {

    let parts = code.split(';base64,');

    let contentType = parts[0].split(':')[1];

    let raw = window.atob(parts[1]);

    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {

      uInt8Array[i] = raw.charCodeAt(i);

    }

    return new Blob([uInt8Array], {

      type: contentType

    });

  };

  let aLink = document.createElement('a');

  let blob = base64ToBlob(base64); //new Blob([content]);

  let evt = document.createEvent("HTMLEvents");

  evt.initEvent("click", true, true); //initEvent不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为

  aLink.download = fileName;

  aLink.href = URL.createObjectURL(blob);

  aLink.click();

}

复制代码

 

77、浏览器是否支持webP格式图片

const isSupportWebP = function() { //判断浏览器是否支持webP格式图片

  return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;

}

复制代码

 

78、url参数转对象

const parseQueryString = function(url) { //url参数转对象

  url = !url ? window.location.href : url;

  if (url.indexOf('?') === -1) {

    return {};

  }

  let search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1);

  if (search === '') {

    return {};

  }

  search = search.split('&');

  let query = {};

  for (let i = 0; i < search.length; i++) {

    let pair = search[i].split('=');

    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');

  }

  return query;

}

复制代码

 

79、对象序列化【对象转url参数】

const stringfyQueryString = function(obj) { //对象序列化【对象转url参数】

  if (!obj) return '';

  let pairs = [];

  for (let key in obj) {

    let value = obj[key];

    if (value instanceof Array) {

      for (let i = 0; i < value.length; ++i) {

        pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));

      }

      continue;

    }

    pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));

  }

  return pairs.join('&');

}

复制代码

 

80、H5软键盘缩回、弹起回调

const h5Resize = function(downCb, upCb) { //当软件键盘弹起会改变当前 window.innerHeight，监听这个值变化 [downCb 当软键盘弹起后，缩回的回调,upCb 当软键盘弹起的回调]

  var clientHeight = window.innerHeight;

  downCb = typeof downCb === 'function' ? downCb : function() {}

  upCb = typeof upCb === 'function' ? upCb : function() {}

  window.addEventListener('resize', () => {

    var height = window.innerHeight;

    if (height === clientHeight) {

      downCb();

    }

    if (height < clientHeight) {

      upCb();

    }

  });

}

复制代码

 

81、函数防抖

const debounce = function(func, wait, immediate) { //函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果]

  let timeout;

  return function() {

    let context = this;

    let args = arguments;

    if (timeout) clearTimeout(timeout);

    if (immediate) {

      var callNow = !timeout;

      timeout = setTimeout(() => {

        timeout = null;

      }, wait)

      if (callNow) func.apply(context, args)

    } else {

      timeout = setTimeout(function() {

        func.apply(context, args)

      }, wait);

    }

  }

}

复制代码

 

82、函数节流

const throttle = function(func, wait ,type) { //函数节流 [func 函数 wait 延迟执行毫秒数 type 1 表时间戳版，2 表定时器版]

    if(type===1){

        let previous = 0;

    }else if(type===2){

        let timeout;

    }

    return function() {

        let context = this;

        let args = arguments;

        if(type===1){

            let now = Date.now();

            if (now - previous > wait) {

                func.apply(context, args);

                previous = now;

            }

        }else if(type===2){

            if (!timeout) {

                timeout = setTimeout(() => {

                    timeout = null;

                    func.apply(context, args)

                }, wait)

            }

        }

    }

 

最后