前端常用utils.js工具函数

置顶烟雨客栈

已于 2024-01-25 15:36:46 修改

阅读量135

点赞数

分类专栏：其他文章标签： javascript 前端开发语言

于 2022-06-13 10:18:20 首次发布

本文链接：https://blog.csdn.net/qq_30152271/article/details/125255133

版权

其他专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、判断类型 Object.prototype.toString.call()

Object.prototype.toString.call(null);// ”[object Null]”
Object.prototype.toString.call(undefined);// ”[object Undefined]”
Object.prototype.toString.call(“abc”);// ”[object String]”
Object.prototype.toString.call(123);// ”[object Number]”
Object.prototype.toString.call(true);// ”[object Boolean]”
Function fn(){console.log(“test”);}
Object.prototype.toString.call(fn);//”[object Function]”
var date = new Date();
Object.prototype.toString.call(date);//”[object Date]”
var arr = [1,2,3];
Object.prototype.toString.call(arr);//”[object Array]”

2、字符串脱敏（保留字符串前面6个字符，后面4个字符，中间使用****代替）

/**
 * 字符串脱敏（保留字符串前面6个字符，后面4个字符，中间使用****代替）
 * @param {*需要脱敏的字符串} str
 * @returns
 */
export function StringDesensitization(str) {
  if (str) {
    return str.replace(/^(.{6})(?:\S+)(.{4})$/, "$1****$2");
  }
  return "";
}

3、判断身份证号是否年满18周岁

export function analyzeIDCard(IDCard){
   let userCard = IDCard;
   if(!userCard){
     return false;
   }
   let yearBirth = userCard.substring(6,10);
   let monthBirth = userCard.substring(10,12);
   let dayBirth = userCard.substring(12,14);
   let myDate = new Date();
   let monthNow = myDate.getMonth() + 1;
   let dayNow = myDate.getDate();
   let age = myDate.getFullYear() - yearBirth;
   if(monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)){
    age--;
   }
   if (age >= 18) {
     return true;
   }
   return false;
}

4、将file对象转为base64

export async function fileToBase64(file){
  let reader = new FileReader();
  let fn = function() {
    return new Promise((resolve) => {
      reader.onload = function() {
        let obj = {
          code: 200,
          data: this.result,
          msg: '成功'
        }
        resolve(obj)
      }
      reader.onerror = function() {
        let obj = {
          code: 100,
          data: '',
          msg: '失败'
        }
        resolve(obj)
      }
    })
  }
  reader.readAsDataURL(file)
  let res = await fn()
  return res
}

5、获取多级嵌套对象的属性值

/**
 * 获取多级嵌套对象属性值
 * @param {*要检索的对象} obj
 * @param {*要获取属性的路径} keys
 * @param {*如果解析值是 undefined ，这值会被返回} defaultVal
 * @returns
 */
export function deepGet(obj, keys, defaultVal) {
  return (
    (!Array.isArray(keys)
      ? keys.replace(/\[/g, ".").replace(/\]/g, "").split(".")
      : keys
    ).reduce((o, k) => (o || {})[k], obj) || defaultVal
  );
}

var obj = {
  a: [
    {
      b: {
        c: 3,
      },
    },
  ],
  e: {
    f: 1,
  },
};
console.log(deepGet(obj, 'e.f')); // 1
console.log(deepGet(obj, ['e','f'])) // 1
console.log(deepGet(obj, 'a.x')); // undefined
console.log(deepGet(obj, 'a.x', '--')) // -- 
console.log(deepGet(obj, 'a[0].b.c')) // 3
console.log(deepGet(obj, ['a', 0, 'b', ,'c'])) // 3

6、判断当前使用的是何种浏览器

/**
 * 判断当前使用的是何种浏览器
 * @returns 
 */
export function getBrowserType(){
   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
   var browser='unknown';
   if (userAgent.indexOf("IE")!=-1) {//字符串含有IE字段，表明是IE浏览器
     browser="IE";
   }else if(userAgent.indexOf('Firefox')!=-1){//字符串含有Firefox字段，表明是火狐浏览器
     browser="Firefox";
   }else if(userAgent.indexOf('OPR')!=-1){//Opera
     browser="Opera";
   }else if(userAgent.indexOf('Chrome')!=-1){//Chrome
     browser="Chrome";
   }else if(userAgent.indexOf('Safari')!=-1){//Safari
     browser="Safari";
   }else if(userAgent.indexOf('Trident')!=-1){//IE内核
     browser='IE 11';
   }
   return browser;
 }

7、日期时间格式化

/**
 * 日期时间格式化
 * @param {需要格式化的时间} time 
 * @param {格式化字符串} pattern 
 * @returns 
 */
export function parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
      return null
    }
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
      date = time
    } else {
      if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
        time = parseInt(time)
      } else if (typeof time === 'string') {
        time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
      }
      if ((typeof time === 'number') && (time.toString().length === 10)) {
        time = time * 1000
      }
      date = new Date(time)
    }
    const formatObj = {
      y: date.getFullYear(),
      m: date.getMonth() + 1,
      d: date.getDate(),
      h: date.getHours(),
      i: date.getMinutes(),
      s: date.getSeconds(),
      a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
      let value = formatObj[key]
      if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
      if (result.length > 0 && value < 10) {
        value = '0' + value
      }
      return value || 0
    })
    return time_str
  }

8、将数字金额转换为大写金额

/**
 * 将数字金额转换为大写金额
 * @param {小写金额} money
 * @returns 12365.365236=>壹万贰仟叁佰陆拾伍元叁角柒分
 */
export function smallToBig(money) {
  var cnNums = new Array(
    "零",
    "壹",
    "贰",
    "叁",
    "肆",
    "伍",
    "陆",
    "柒",
    "捌",
    "玖"
  ); //汉字的数字
  var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
  var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
  var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
  var cnInteger = "整"; //整数金额时后面跟的字符
  var cnIntLast = "元"; //整数完以后的单位
  //最大处理的数字
  var maxNum = 999999999999999.9999;
  var integerNum; //金额整数部分
  var decimalNum; //金额小数部分
  //输出的中文金额字符串
  var chineseStr = "";
  var parts; //分离金额后用的数组，预定义
  if (money == "") {
    return "";
  }
  money = parseFloat(money);
  if (money >= maxNum) {
    //超出最大处理数字
    return "超出最大处理数字";
  }
  if (money == 0) {
    chineseStr = cnNums[0] + cnIntLast + cnInteger;
    return chineseStr;
  }
  //四舍五入保留两位小数,转换为字符串
  money = Math.round(money * 100).toString();
  integerNum = money.substr(0, money.length - 2);
  decimalNum = money.substr(money.length - 2);
  //获取整型部分转换
  if (parseInt(integerNum, 10) > 0) {
    var zeroCount = 0;
    var IntLen = integerNum.length;
    for (var i = 0; i < IntLen; i++) {
      var n = integerNum.substr(i, 1);
      var p = IntLen - i - 1;
      var q = p / 4;
      var m = p % 4;
      if (n == "0") {
        zeroCount++;
      } else {
        if (zeroCount > 0) {
          chineseStr += cnNums[0];
        }
        //归零
        zeroCount = 0;
        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
      }
      if (m == 0 && zeroCount < 4) {
        chineseStr += cnIntUnits[q];
      }
    }
    chineseStr += cnIntLast;
  }
  //小数部分
  if (decimalNum != "") {
    var decLen = decimalNum.length;
    for (var i = 0; i < decLen; i++) {
      var n = decimalNum.substr(i, 1);
      if (n != "0") {
        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
      }
    }
  }
  if (chineseStr == "") {
    chineseStr += cnNums[0] + cnIntLast + cnInteger;
  } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
    chineseStr += cnInteger;
  }
  return chineseStr;
}

9、首字母转大写

/**
 * 首字母转大写
 * @param {需要首字母大写的字符串} str
 * @returns
 */
export function titleCase(str) {
  return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
}

10、下划线转驼峰

/**
 * 下划线转驼峰
 * @param {需要转换的字符串} str
 * @returns
 */
export function camelCase(str) {
  return str.replace(/_[a-z]/g, (str1) => str1.substr(-1).toUpperCase());
}

11、回显数据字典

/**
 * 回显数据字典（回显一个）
 * @param {数据字典数组} datas
 * @param {需要回显的value值} value
 * @param {指定字段名作为value属性} valueName
 * @param {指定字段名作为label值} labelName
 * @returns '1'=>'姓名1'
 */
export function selectDictLabel(
  datas,
  value,
  valueName = "value",
  labelName = "label"
) {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key][valueName] == "" + value) {
      actions.push(datas[key][labelName]);
      return true;
    }
  });
  if (actions.length === 0) {
    actions.push(value);
  }
  return actions.join("");
}

/**
 * 回显数据字典（同时回显多个）
 * @param {数据字典数组} datas
 * @param {需要回显的value值，可以是','分隔的字符串} value
 * @param {分隔符} separator
 * @param {指定字段名作为value值} valueName
 * @param {指定字段名作为label值} labelName
 * @returns '1,2'=>'姓名1,姓名2'
 */
export function selectDictLabels(
  datas,
  value,
  separator,
  valueName = "value",
  labelName = "label"
) {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  var currentSeparator = undefined === separator ? "," : separator;
  var temp = value.split(currentSeparator);
  Object.keys(value.split(currentSeparator)).some((val) => {
    var match = false;
    Object.keys(datas).some((key) => {
      if (datas[key][valueName] == "" + temp[val]) {
        actions.push(datas[key][labelName] + currentSeparator);
        match = true;
      }
    });
    if (!match) {
      actions.push(temp[val] + currentSeparator);
    }
  });
  return actions.join("").substring(0, actions.join("").length - 1);
}

12、将数组转换成树形结构

/**
 * 将对象数组构造成树型结构数据
 * @param {数据源} data
 * @param {id字段} id
 * @param {父节点字段} parentId
 * @param {孩子节点字段} children
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || "id",
    parentId: parentId || "parentId",
    childrenList: children || "children",
  };
  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];
  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }
  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }
  for (let t of tree) {
    adaptToChildrenList(t);
  }
  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}

13、从一棵树中查找value对应的label

/**
 * 从一棵树中查找value对应的label
 * @param {需要查找的目标树} tree 
 * @param {需要查找的value值} value 
 * @param {value字段名} valueName 
 * @param {label字段名} labelName 
 * @param {children字段名} childrenName 
 * @returns 
 */
export function queryTree(tree, value,valueName='value',labelName='label',childrenName='children') {
    let stark = [];
    stark = stark.concat(tree);
    while (stark.length) {
        const temp = stark.shift();
        if (temp[childrenName]) {
            stark = stark.concat(temp[childrenName]);
        }
        if (temp[valueName]===value) {
            return temp[labelName];
        }
    }
    return '';
}

14、深度优先遍历树，将一颗树转成数组

/**
 * 深度优先遍历，将一颗树转换为数组
 * @param {树根节点对象} node 
 * @returns 
 */
export function deepTraversal(node,childrenName='children'){
	let nodes=[];
    if(node!=null){
       let stack=[];//同来存放将来要访问的节点
       stack.push(node);
       while(stack.length!==0){
           let item=stack.pop();//正在访问的节点
           nodes.push(item);
           if(item[childrenName]){
               let childrens=item[childrenName];
               for(let i=childrens.length-1;i>=0;i--)//将现在访问点的节点的子节点存入stack，供将来访问
                   stack.push(childrens[i]);
           }
       }
   }
   return nodes;
}

15、从树中查找某一value结点的所有父节点，返回父节点value数组

/**
 * 从树中查找某一value结点的所有父节点，返回父节点value数组
 * @param {查找的目标树} tree 
 * @param {需要查找的value值} value
 * @param {返回的结果数组} arr 
 * @param {value字段名} valueName 
 * @param {parent字段名} parentName 
 * @param {children字段名} childrenName 
 * @returns 
 */
export function findAllParents(tree,value,arr,valueName='value',parentName='parentId',childrenName='children'){
	let stark = [];
    stark = stark.concat(tree);
    while (stark.length) {
    	const temp = stark.shift();
        if (temp[valueName]=== value) {
        	findAllParents(tree,temp[parentName],arr,valueName,parentName,childrenName);
            arr.push(temp[valueName]);
        }
        if (temp[childrenName]) {
             stark = stark.concat(temp[childrenName]);
        }
   }
   return arr;
}

16、日期时间格式化

/**
 * 日期时间格式化
 * @param {需要格式化的时间字符串（2023/1/9 12:36:59）,不传默认格式化当前时间} time
 * @param {格式化模板} template
 * @returns
 */
export function formatTime(time, template = '{0}-{1}-{2} {3}:{4}:{5}') {
  let date = '';
  if (time) {
    date = time;
  } else {
    const current = new Date();
    const formatObj = {
      y: current.getFullYear(),
      m: current.getMonth() + 1,
      d: current.getDate(),
      h: current.getHours(),
      i: current.getMinutes(),
      s: current.getSeconds()
    };
    date = `${formatObj.y}/${formatObj.m}/${formatObj.d} ${formatObj.h}:${formatObj.i}:${formatObj.s}`;
  }
  let arr = date.match(/\d+/g);  // ['2023', '10', '25', '15', '44', '35']
  return template.replace(/\{(\d+)\}/g, function (_, index) {
    let item = arr[index] || '00';
    item.length < 2 ? (item = `0${item}`) : null;
    return item;
  });
}