前端开发常用工具函数

/** 
 * 判断数据类型
*/
const isObject = data => {
    return Object.prototype.toString.call(data) === `[object Object]`
}

const isArray = data => {
    return Object.prototype.toString.call(data) === `[object Array]`
}

const isString = data => {
    return Object.prototype.toString.call(data) === `[object String]`
}

const isNumber = data => {
    return Object.prototype.toString.call(data) === `[object Number]`
}

const isNull = data => {
    return Object.prototype.toString.call(data) === `[object Null]`
}

const isUndefined = data => {
    return Object.prototype.toString.call(data) === `[object Undefined]`
}

const isBoolean = data => {
    return Object.prototype.toString.call(data) === `[object Boolean]`
}

const isSymbol = data => {
    return Object.prototype.toString.call(data) === `[object Symbol]`
}

const isFunction = data => {
    return Object.prototype.toString.call(data) === `[object Function]`
}

const isRegExp = data => {
    return Object.prototype.toString.call(data) === `[object RegExp]`
}

const isDate = data => {
    return Object.prototype.toString.call(data) === `[object Date]`
}


/** 
 * 判断变量是否为空
*/
const isEmpty = data => {
    // RegExp
    if (isRegExp(data)) return false
    // Date
    if (isDate(data)) return false
    // Symbol
    if (isSymbol(data)) return false
    // Function
    if (isFunction(data)) return false
    // undefined
    if (isUndefined(data)) return true
    // null
    if (isNull(data)) return true
    // Boolean
    if (isBoolean(data)) return true
    // string
    if (isString(data)) return data === ''
    // number
    if (isNumber(data)) return false
    // object
    if (isObject(data)) return Object.keys(data).length === 0
    // array
    if (isArray(data)) return data.length === 0
    return true
}

/** 
 * 获取滚动条距离顶部距离
*/
const getScrollTop = () => {
    return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
}

/** 
 * 滚动到顶部
*/

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

/** 
 * 获取操作系统类型
*/
const getOS = () => {
    const userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || ''
    const appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || ''

    if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) return 'ios'
    if (/android/i.test(userAgent)) return 'android'
    if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
    if (/mac/i.test(appVersion)) return 'MacOSX'
    if (/win/i.test(appVersion)) return 'windows'
    if (/linux/i.test(appVersion)) return 'linux'
}

/** 
 * 高亮关键字，如搜索框中的搜索关键字在搜索结果列表中高亮
*/
const highlightKey = (val, key) => {
    const replaceStr = `<label class="high-light-key">${key}</label>`
    const reg = new RegExp(key, "g")
    return key ? val.replace(reg, replaceStr) : val
}

/** 
 * 求最大值
*/

const getMax = (arr) => {
    return Math.max(...arr)
}

/** 
 * 求最小值
*/

const getMin = (arr) => {
    return Math.min(...arr)
}

/** 
 * 求和
*/

const getSum = (arr) => {
    return arr.reduce((pre, next) => pre + next)
}

/** 
 * 格式化时间
 * 将 / 替换成 -
 * eg: 2021/11/12 return 2021-11-12
*/

const formatDte = date => {
    return date.replace(/\//g, '-')
}

/** 
 * 排名的分子 分母设置不同色字体颜色，即弱化排名的分母
 * 给span设置个主色，然后利用v-html将 span 元素解析成如下，给 color-total-ranking设置样式即可
 * eg: <span>34/2345</span>  return <span>34<label class="color-total-ranking"> /2345</label></span> 
*/
const formatRankingStyle = ranking => {
    if (!ranking) return '--'
    let totalRanking = ranking.match(/\/\S*/).join('')
    totalRanking = totalRanking.split('/').join(' /')
    const replaceStr = `<label class="color-total-ranking">${totalRanking}</label>`
    return ranking.replace(/\/\S*/g, replaceStr)
}

/** 
 * 简易版的深拷贝
 * 只考虑了基本类型 String、Number、Boolean、Undefined、Null 以及简单的引用类型 Date、Object、Array
 * 以上类型在项目中实则够用
*/
const deepClone = originData => {

    // 基本数据类型 string、number、boolean、undefined、null
    if (isString(originData) || isNumber(originData) || isBoolean(originData) || isUndefined(originData) || isNull(originData)) {
        return originData
    }
    // Date
    if (isDate(originData)) {
        const targetDate = new Date()
        targetDate.setTime(originData.getTime())
        return targetDate
    }
    // Array
    if (isArray(originData)) {
        var targetArr = []
        originData.forEach(item => { 
            targetArr.push(deepClone(item)) 
        })
        return targetArr
    }
    // Object
    if (isObject(originData)) {
        var targetObj = {}
        for (let key in originData) {
            if (originData.hasOwnProperty(key)) {
                targetObj[key] = deepClone(originData[key])
            }
        }
        return targetObj
    }
}