前端常用的工具函数

驼峰转小写下划线

/**
 * 小驼峰转小写下划线 userNameInfo
 * @param { string } v 需要转换的字符串，如：userNameInfo
 * @return user_name_info
 */
export const toUnderline = (v) => {
    return v.replace(/[A-Z]/g,(current) => `_${current.toLowerCase()}`)
}

划线命名转小驼峰

/**
 * 下划线命名转小驼峰 user_name_info
 * @param { string } v 需要转换的字符串，如：user_name_info
 * @return userNameInfo
 */
export const getCamelCase = (v) => {
    return v.replace(/_[a-z]/g,(current) => current.split('_')[1].toUpperCase())
}

生成随机Hex颜色

/**
 * 生成随机Hex颜色
 * @return 返回色值，如：#1eb31
 */
export const getColorHexColor = () => `#${Math.floor(Math.random() * 0xfffff).toString(16)}`
console.log(getColorHexColor()) // #1eb31

/**
 * 生成随机Hex颜色
 * @return 返回色值，如：#1eb31
 */
getColorHexColor() {
        return '#'+Math.random().toString(16).substr(2, 6)
}

判断变量数据类型

  /**
   * 判断变量数据类型
   * @param { any } obj 需要判断数据类型的变量
   * @return 数据类型
   */
const getObjType = (obj) => {
  const toString = Object.prototype.toString
  const map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object'
  }
  // 如果是节点
  if (obj instanceof Element) {
    return 'element'
  }
  // 通过toString.call 判断是哪个类型
  // 判断的值为类型[object Boolean]， 通过对象取值返回
  return map[toString.call(obj)]
}
console.log(getObjType(true)) // boolean

深拷贝

/**
  * 深拷贝
  * @param { any } v 需要深拷贝的数据
  * @return 返回年月日时分秒字符串
  */
export const deepClone = (v) => {
   let type = getObjType(v);
   let obj = null;
   // 如果是对象&数组则先清空再做后续操作
   if(type === 'array'){
       obj = []
       for(let i = 0; i < v.length ; i++){
            // 将每一个值都放到deepClone中遍历，如果是非对象&数组则push到obj中
           obj.push(deepClone(v[i]))
       }
   } else if(type === 'object'){
       obj = {}
        for(let k in v){
           obj[k] = deepClone(v[k]) 
       }
   } else {
       // 非对象/数组，直接返回
       return v
   }
   return obj
}

// 使用
let o = {id:1,id2:2,id3:[{val1:3,val2:3}]}
let c = deepClone(o);
c.id3[0].val1 = 9
// { id: 1,id2: 2, id3: { val1: 9, val2: 3 }] }
// { id: 1,id2: 2, id3: { val1: 3, val2: 3 }] }
// 这个案例也解释了为什么data是一个函数的问题，这样不会造成数据污染

保留指定的小数位数

/**
 * 保留指定位数小数
 * @param { number } v 需要转换的数值
 * @param { number } s 需要保留的位数，如：2就是保留两位小数 
 * @return 转换后的结果
 */
export const getDecimal = (v, s) => {
    let size = '1'.padEnd((s + 1), 0)
    return parseInt(v * parseInt(size)) / size
}

字符串转时间戳

  /**
   * 时间字符串转时间戳
   * @param { string } str 时间字符串
   * @return 返回时间戳
   */
  export const getTimes = (str) => {
     return new Date(str.substring(0, 19).replace(/-/g, '/')).getTime();
  }

时间戳转 年月日时分秒

  /**
   * 时间戳转 年月日时分秒
   * @param { number } timestamp 时间戳
   * @return 返回年月日时分秒字符串
   */
  export const getTimestamp = (timestamp) => {
     let date = new Date(timestamp)
     let Year = String(date.getFullYear())
     let Moth = String(date.getMonth() + 1).padStart(2,'0')
     let Day = String(date.getDate()).padStart(2,'0')
     let Hour = String(date.getHours()).padStart(2,'0')
     let Minute = String(date.getMinutes()).padStart(2,'0')
     let Seconds = String(date.getSeconds()).padStart(2,'0')
     return `${Year}-${Moth}-${Day} ${Hour}:${Minute}:${Seconds}`
  }

获取当月第一天、当前天、最后一天

/**
 * 获取当前月份的第一天、当天和最后一天
 * @param {string} 例如: '2023-09'；参数可传可不传，不传获取当月，传则获取指定月
 * @return {array} [当月第一天,当前天,最后一天]
 **/
export const getFirstandLastDay = (YearandMonty = null) => {
    let date = YearandMonty ? new Date(YearandMonty) : new Date();    
    let year = String(date.getFullYear());
    let month = String(date.getMonth() + 1).padStart(2,'0')
    let day = String(date.getDate()).padStart(2,'0')
    // new Date第三个参数默认1，也就是当月第一天,如果传0则是当月最后一天
    let lastDay = new Date(year,month,0).getDate();
    let firstDate = `${year}-${month}-01`
    let theDay = `${year}-${month}-${day}`
    let lastDate = `${year}-${month}-${lastDay}`
    return [firstDate, theDay, lastDate];
}

数组去重

  /**
   * 数组去重
   * @param { array } v 需要去重的数组 
   * @return
   */
  export const arrSet = (v) => {
     return [...new Set(v)]
  }

数组对象去重

原理：将数组对象的每个值变成基本类型，去比对基本类型的存储单元位置实现去重效果，去重完成后，将字符串反序列化即可拿到去重后的值。

  /**
   * 数组对象去重
   * @param { array } v 需要去重的数组 
   * @return
   */
  export const arrObjSet = (v) => {
     return [...new Set(v.map(el=> JSON.stringify(el)))].map(el=> JSON.parse(el))
  }

数组对象根据指定key去重

/**
 * 数组对象根据指定key去重
 * @param { array } v 需要去重的数组
 * @param { string } key 根据指定key去重
 * @return
 */
export const somethingSet = (v, k) => {
  let res = new Set();
  // 根据Set来判断，先向set中添加，因为本来就没有，此时表达式中返回的是true
  // 一旦set中同样的值已经加过一次，那么has就会返回false，此时表达式返回的也就是false
  // filter根据表达式中的状态true判断是否过滤，所以filter过滤出来的永远都是唯一值
  return v.filter(item => !res.has(item[k]) && res.add(item[k]))
}

有了上面的思路，我们用正常的手段也可以实现同样的效果

let obj = [
    {id : 1 ,name : 'a'},
    {id : 2 ,name : 'b'},
    {id : 3 ,name : 'c'},
    {id : 4 ,name : 'b'},
    {id : 5 ,name : 'c'},
    {id : 6 ,name : 'd'},
]
somethingSet(obj,'name') // (4) [{…}, {…}, {…}, {…}]
const somethingSet = (v, k) => {
  let res = {};
  return v.filter(item => res[item[k]] != item[k] && (res[item[k]] = item[k]))
}

密码强度检测

/**
 * 检测密码强度 false小于6位
 * 数字 || 小写英文 || 大写英文 || ._- 分别为一级
 * 符合条件累加，最大值4级
 * @param { string } v 需要校验的值
 * @return 返回密码强度等级
 */
export const pwdStrength = (v) => {
  if (v.length < 6) {
    return false
  }
  let i = 0;
  if (/[0-9]/.test(v)) {
    ++i;
  }
  if (/[a-z]/.test(v)) {
    ++i;
  }
  if (/[A-Z]/.test(v)) {
    ++i;
  }
  if (/[_|\-|.]/.test(v)) {
    ++i;
  }
  return i;
}

排序-根据条件对数组对象排序

/**
 * 排序-根据条件对数组对象排序
 * v:数组对象，k:key，type:0升序|1降序
 * @param { array } v 需要排序的数组
 * @param { string } key 根据指定key排序
 * @param { number } type 0升序|1降序
 * @return 排序结果
 */
export const toSort = (v, k, type) => {
  v.sort(function(a,b){
    if(type == 0){
      return a[k] - b[k] 
    } else {
      return b[k] - a[k]
    }
  })
  return v;
}

原生写法-根据条件对数组对象排序

/**
 * 排序-根据条件对数组对象排序
 * arr:数组对象，k:key，type:0升序|1降序
 * @param { array } arr 需要转换的数组
 * @param { string } key 根据执行key排序
 * @param { number } type 升序还是降序  
 * @return 排序结果
 */
export const toCycling = (arr, key, type) => {
  const run = (j) => {
    let [A, B] = [arr[j], arr[j + 1]];
    [arr[j + 1], arr[j]] = [A,B];
  } 
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j][key] > arr[j + 1][key] && type == 0) {
        run(j)
      } else if(arr[j][key] < arr[j + 1][key] && type == 1){
        run(j)
      }
    }
  }
  return arr;
}