前端实用技能

• 焦点聚焦

import Vue from 'vue'
// 插件对象(必须有 install 方法, 才可以注入到 Vue.use 中)
export default {install () {Vue.directive('fofo', {inserted (el) {el = el.querySelector('input')el.focus()}})}
}

• 格式化日期格式

export const formatDate = (time) => {// 将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 return time.replace(/\-/g, "/");
}

• 是否在数组内

export const inArray = (search, array) => {for (var i in array) {if (array[i] == search) return true}return false
}

• 日期转换

export const dateFormat = (fmt, date) => {const opt = {"Y+": date.getFullYear().toString(), // 年"m+": (date.getMonth() + 1).toString(), // 月"d+": date.getDate().toString(), // 日"H+": date.getHours().toString(), // 时"M+": date.getMinutes().toString(), // 分"S+": date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加，必须转化成字符串};let retfor (let k in opt) {ret = new RegExp("(" + k + ")").exec(fmt)if (ret) {fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))};};return fmt
}

egdateFormat('YYYY-mm-dd HH:MM:SS', new Date()) ==> 2020-01-01 08:00:00

• 判断是否为空对象

export const isEmptyObject = (object) => {return Object.keys(object).length === 0
}

• 判断是否为对象

export const isObject = (object) => {return Object.prototype.toString.call(object) === '[object Object]'
}

• 判断是否为数组

export const isArray = (array) => {return Object.prototype.toString.call(array) === '[object Array]'
}

• 判断是否为空

export const isEmpty = (value) => {if (isArray(value)) {return value.length === 0}if (isObject(value)) {return isEmptyObject(value)}return !value
}

• 对象深拷贝

export const cloneObj = (obj) => {let newObj = obj.constructor === Array ? [] : {};if (typeof obj !== 'object') {return;}for (let i in obj) {newObj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];}return newObj
}

• 节流函数

export function throttle(fn, delay = 100) {// 首先设定一个变量，在没有执行我们的定时器时为nullvar timer = nullreturn function() {// 当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回if (timer) returntimer = setTimeout(() => {fn.apply(this, arguments)timer = null}, delay)}

• 防抖函数

export function debounce(fn, delay) {let timerreturn function() {const that = thisconst _args = arguments // 存一下传入的参数if (timer) {clearTimeout(timer)}timer = setTimeout(function() {fn.apply(that, _args)}, delay)}
}

• 姓名隐藏，只展示第一位，其余替换为 *

export function getHiddenName(data){if (!data) return ''const surname = data.substr(0, 1)const star = '*'.repeat(data.length - 1)return surname + star
}

• 详细地址隐藏数字包含中文数字，替换为 *

export function getHiddenDetailAddress(data){const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']if (!data || data.length === 0){return ''}let tempResult = data.replace((/\d/g),'*')let result = ''for(let i=0;i<tempResult.length;i++){if (chineseNumbers.includes(tempResult[i])){result += '*'}else {result += tempResult[i]}}return result
}

• 计算2个日期相差的天数，不包含今天，如：2024-09-13到2016-09-15，相差2天

function dateDiff(startDate, endDate) {return parseInt((endDate - startDate) / 1000 / 60 / 60 / 24) // 把相差的毫秒数转换为天数
}

• 计算2个日期相差的天数，包含今天，如：2024-09-13到2016-09-15，相差3天

function dateDiff(startDate, endDate) {return parseInt((endDate - startDate) / 1000 / 60 / 60 / 24) + 1 // 把相差的毫秒数转换为天数
}