前端项目中常用的工具函数

156 阅读2分钟

防抖

// 函数防抖 (只执行最后一次)
export const debounce = (fn, delay = 300) => {
    // 定时器
    let timer = null

    // 将debounce处理结果当作函数返回
    return function cb(...args) {
        // 保留调用时的this上下文
        let context = this
        // 保留调用时传入的参数
        // 每次事件被触发时,都去清除之前的旧定时器
        if (timer) {
            clearTimeout(timer)
        }
        // 设立新定时器
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, delay)
    }
}

节流

// 函数节流 (以第一次为准)
export const throttle = (fn, interval = 300) => {
    // last为上一次触发回调的时间
    let last = 0

    // 将throttle处理结果当作函数返回
    return function cb(...args) {
        // 保留调用时的this上下文
        let context = this

        // 记录本次触发回调的时间
        let now = +new Date()

        // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
        if (now - last >= interval) {
            // 如果时间间隔大于设定的时间间隔阈值,则执行回调
            last = now
            fn.apply(context, args)
        }
    }
}

对象克隆

// 克隆对象
export const clone = obj => {
    let o
    if (typeof obj === 'object') {
        if (obj === null) {
            o = null
        } else if (obj instanceof Array) {
            o = []
            for (let i = 0, len = obj.length; i < len; i++) {
                o.push(clone(obj[i]))
            }
        } else {
            o = {}
            for (let j in obj) {
                o[j] = clone(obj[j])
            }
        }
    } else {
        o = obj
    }
    return o
}

日期

// 获取当前日期
export function getCurDate() {
    let myDate = new Date()
    let nowY = myDate.getFullYear()
    let nowM = myDate.getMonth() + 1
    let nowD = myDate.getDate()
    let curDate = `${nowY}-${nowM < 10 ? `0${nowM}` : nowM}-${nowD < 10 ? `0${nowD}` : nowD}`
    return curDate
}


// 获取之前的日期
export function getBeforeDate(during) {
    let myDate = new Date()
    let lw = new Date(myDate - 1000 * 60 * 60 * 24 * during) 
    let lastY = lw.getFullYear()
    let lastM = lw.getMonth() + 1
    let lastD = lw.getDate()
    let beforeDate = `${lastY}-${lastM < 10 ? `0${lastM}` : lastM}-${lastD < 10 ? `0${lastD}` : lastD}` // during天之前日
    return beforeDate
}

// 获取当月的天数
export function getCountDays() {
    let curDate = new Date()
    /* 获取当前月份 */
    let curMonth = curDate.getMonth()
    /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
    curDate.setMonth(curMonth + 1)
    curDate.setDate(0)
    /* 返回当月的天数 */
    return curDate.getDate()
}


// 获取时间范围,用于时间控件
export function setDataRangeByDays(day) {
    let start = new Date(Date.now() - day * 24 * 3600 * 1000)
    let end = new Date()

    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)

    end.setHours(23)
    end.setMinutes(59)
    end.setSeconds(59)

    console.log(new Date(start))

    return [new Date(start), new Date(end)]
}

算法

var operationNumber = function(arg1, arg2, operator) {
    var oper = ['+', '-', '*', '/']
    // 不合法的运算
    if (isNaN(arg1) || isNaN(arg2) || oper.indexOf(operator) < 0) {
        return NaN
    }
    // 除以0
    if (operator === '/' && Number(arg2) === 0) {
        return Infinity
    }
    // 和0相乘
    if (operator === '*' && Number(arg2) === 0) {
        return 0
    }
    // 相等两个数字相减
    if ((arg1 === arg2 || Number(arg1) === Number(arg2)) && operator === '-') {
        return 0
    }
    var r1, r2, max, _r1, _r2
    try {
        r1 = arg1.toString().split('.')[1].length
    } catch (e) {
        r1 = 0
    }
    try {
        r2 = arg2.toString().split('.')[1].length
    } catch (e) {
        r2 = 0
    }
  	//最大小数位
    max = Math.max(r1, r2)
    _r1 = max - r1
    _r2 = max - r2
    if (_r1 !== 0) {
        // 用0补齐小数位
        arg1 = arg1 + '0'.repeat(_r1)
    }
    if (_r2 !== 0) {
        arg2 = arg2 + '0'.repeat(_r2)
    }
  	//去除小数点 转成整数
    arg1 = Number(arg1.toString().replace('.', ''))
    arg2 = Number(arg2.toString().replace('.', ''))
  	//要去掉的位数
    var r3 = operator === '*' ? max * 2 : operator === '/' ? 0 : max
    //获取计算结果
    var newNum = eval(arg1 + operator + arg2)

    if (r3 !== 0) {
        var nStr = newNum.toString()
        nStr = nStr.replace(/^-/, '')
        if (nStr.length < r3 + 1) {
          	//前面补0
            nStr = '0'.repeat(r3 + 1 - nStr.length) + nStr
        }
      	//加上小数点
        nStr = nStr.replace(new RegExp('(\\d{' + r3 + '})$'), '.$1')
        if (newNum < 0) {
            nStr = '-' + nStr
        }
        newNum = nStr * 1
    }
    return newNum
}

// 加法
Number.prototype.add = function(arg2) {
    return operationNumber(this, arg2, '+')
}

// 减法
Number.prototype.sub = function(arg2) {
    return operationNumber(this, arg2, '-')
}

// 乘法
Number.prototype.mul = function(arg2) {
    return operationNumber(this, arg2, '*')
}

// 除法
Number.prototype.div = function(arg2) {
    return operationNumber(this, arg2, '/')
}