常用的前端JavaScript方法封装

制作网站的时候经常会涉及一些JS方法，这边文章分享一些常用的前端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')}

去除字符串空格

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

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、浏览器操作

（1）滚动到页面顶部

export const scrollToTop = () => {  const height = document.documentElement.scrollTop || document.body.scrollTop;  if (height > 0) {    window.requestAnimationFrame(scrollToTop);    window.scrollTo(0, height - height / 8);  }}

（2）滚动到页面底部

export const scrollToBottom = () => {  window.scrollTo(0, document.documentElement.clientHeight);  }

（3）滚动到指定元素区域

export const smoothScroll = (element) => {    document.querySelector(element).scrollIntoView({        behavior: 'smooth'    });};

（4）获取可视窗口高度

export const getClientHeight = () => {    let clientHeight = 0;    if (document.body.clientHeight && document.documentElement.clientHeight) {        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;    }    else {        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;    }    return clientHeight;}

（5）获取可视窗口宽度

export const getPageViewWidth = () => {    return (document.compatMode == "BackCompat" ? document.body : document.documentElement).clientWidth;}

（6）打开浏览器全屏

export const toFullScreen = () => {    let element = document.body;    if (element.requestFullscreen) {      element.requestFullscreen()    } else if (element.mozRequestFullScreen) {      element.mozRequestFullScreen()    } else if (element.msRequestFullscreen) {      element.msRequestFullscreen()    } else if (element.webkitRequestFullscreen) {      element.webkitRequestFullScreen()    }}

（7）退出浏览器全屏

export const exitFullscreen = () => {    if (document.exitFullscreen) {      document.exitFullscreen()    } else if (document.msExitFullscreen) {      document.msExitFullscreen()    } else if (document.mozCancelFullScreen) {      document.mozCancelFullScreen()    } else if (document.webkitExitFullscreen) {      document.webkitExitFullscreen()    }}

16、获得视口的尺寸

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

17、获取任一元素的任意属性

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

18、绑定事件的兼容代码

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

19、解绑事件

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

20、取消冒泡的兼容代码

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

24、运动函数

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

25、弹性运动

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

26、封装自己的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)    }}

27、封装自己的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;}

28、数组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;}

29、数组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;}

30、数组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;}

31、获取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;}

const getParameters = (URL) => {  URL = JSON.parse(    '{"' +      decodeURI(URL.split("?")[1])        .replace(/"/g, '\\"')        .replace(/&/g, '","')        .replace(/=/g, '":"') +      '"}'  );  return JSON.stringify(URL);};getParameters(window.location);// Result: { search : "easy", page : 3 }

或者更为简单的：

Object.fromEntries(new URLSearchParams(window.location.search))// Result: { search : "easy", page : 3 }

键值对拼接成URL参数

export const params2Url = (obj) => {     let params = []     for (let key in obj) {       params.push(`${key}=${obj[key]}`);     }     return encodeURIComponent(params.join('&'))}

32、数组排序

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

33、遍历Dom树

// 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)// 对于每个访问的元素，函数讲元素传递给提供的回调函数function traverse(element, callback) {    callback(element);    var list = element.children;    for (var i = 0; i < list.length; i++) {        traverse(list[i], callback);    }}

34、原生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);    }}

35、异步加载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);}

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

37、实现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;}

38、实现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;}

39、实现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;}

40、防抖

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

41、节流

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

42、requestAnimFrame兼容性方法

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

43、cancelAnimFrame兼容性方法

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

44、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);}

45、获取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] || '';    }}

46、格式化时间

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

47、验证邮箱的正则表达式

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

48、函数柯里化

//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术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;}

49、大数相加

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+/, '');}

50、单例模式

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

51、设备判断：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'}

52、判断是否为微信

const isWx = function() { // 判断是否为微信  var ua = window.navigator.userAgent.toLowerCase()  if (ua.match(/MicroMessenger/i) === 'micromessenger') {    return true  }  return false}

53、是否为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}

54、判断图片加载完成

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

55、音频加载完成操作

const loadAudio = function(src, callback) { // 音频加载  var audio = new Audio(src)  audio.onloadedmetadata = callback  audio.src = src}

56、图片地址转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();  }}

57、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();    }  });}

58、计算2个日期之间相差多少天

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)    dayDif(new Date("2020-10-21"), new Date("2021-10-22"))// Result: 366

59、生成随机十六进制颜色

//可以使用 Math.random 和 padEnd 属性生成随机的十六进制颜色。const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;     console.log(randomHex());// Result: #92b008

60、手机号中间四位变成*

export const telFormat = (tel) => {   tel = String(tel);     return tel.substr(0,3) + "****" + tel.substr(7);}

61、数字转化为大写金额

export const digitUppercase = (n) => {    const fraction = ['角', '分'];    const digit = [        '零', '壹', '贰', '叁', '肆',        '伍', '陆', '柒', '捌', '玖'    ];    const unit = [        ['元', '万', '亿'],        ['', '拾', '佰', '仟']    ];    n = Math.abs(n);    let s = '';    for (let i = 0; i < fraction.length; i++) {        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');    }    s = s || '整';    n = Math.floor(n);    for (let i = 0; i < unit[0].length && n > 0; i++) {        let p = '';        for (let j = 0; j < unit[1].length && n > 0; j++) {            p = digit[n % 10] + unit[1][j] + p;            n = Math.floor(n / 10);        }        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;    }    return s.replace(/(零.)*零元/, '元')        .replace(/(零.)+/g, '零')        .replace(/^整$/, '零元整');};

62、数字转化为中文数字

export const intToChinese = (value) => { const str = String(value); const len = str.length-1; const idxs = ['','十','百','千','万','十','百','千','亿','十','百','千','万','十','百','千','亿']; const num = ['零','一','二','三','四','五','六','七','八','九']; return str.replace(/([1-9]|0+)/g, ( $, $1, idx, full) => {    let pos = 0;    if($1[0] !== '0'){      pos = len-idx;      if(idx == 0 && $1[0] == 1 && idxs[len-idx] == '十'){        return idxs[len-idx];      }      return num[$1[0]] + idxs[len-idx];    } else {      let left = len - idx;      let right = len - idx + $1.length;      if(Math.floor(right / 4) - Math.floor(left / 4) > 0){        pos = left - left % 4;      }      if( pos ){        return idxs[pos] + num[$1[0]];      } else if( idx + $1.length >= len ){        return '';      }else {        return num[$1[0]]      }    }   });}

（1）存储loalStorage

export const loalStorageSet = (key, value) => {    if (!key) return;    if (typeof value !== 'string') {        value = JSON.stringify(value);    }    window.localStorage.setItem(key, value);};

（2）获取localStorage

export const loalStorageGet = (key) => {    if (!key) return;    return window.localStorage.getItem(key);};

（3）删除localStorage

export const loalStorageRemove = (key) => {    if (!key) return;    window.localStorage.removeItem(key);};

（4）存储sessionStorage

export const sessionStorageSet = (key, value) => {   if (!key) return;    if (typeof value !== 'string') {      value = JSON.stringify(value);    }    window.sessionStorage.setItem(key, value)};

（5）获取sessionStorage

export const sessionStorageGet = (key) => {   if (!key) return;    return window.sessionStorage.getItem(key)};

（6）删除sessionStorage

export const sessionStorageRemove = (key) => {   if (!key) return;    window.sessionStorage.removeItem(key)};

63、操作cookie

（1）设置cookie

export const setCookie = (key, value, expire) => {    const d = new Date();    d.setDate(d.getDate() + expire);    document.cookie = `${key}=${value};expires=${d.toUTCString()}`};

（2）读取cookie

export const getCookie = (key) => {    const cookieStr = unescape(document.cookie);       const arr = cookieStr.split('; ');       let cookieValue = '';       for (let i = 0; i < arr.length; i++) {           const temp = arr[i].split('=');           if (temp[0] === key) {               cookieValue = temp[1];               break       }    }    return cookieValue};

（3）删除cookie

export const delCookie = (key) => {    document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`};