前端实用技能

• 焦点聚焦

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 ret
  for (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
}

eg
dateFormat('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) {
  // 首先设定一个变量，在没有执行我们的定时器时为null
  var timer = null
  return function() {
    // 当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }

• 防抖函数

export function debounce(fn, delay) {
  let timer
  return function() {
    const that = this
    const _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 // 把相差的毫秒数转换为天数
}

原文地址：https://blog.csdn.net/m0_51822639/article/details/134710606

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！