JavaScript常用工具类封装

1、localeCompare（把汉字转换成拼音排序）

list.sort((a, b) => {
    
     return a.localeCompare(b) })

2、随机生成六位数字验证码

const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
// 942377

3、获取随机布尔值

const getRandomBoolean = () => Math.random() >= 0.5

4、生成随机整数范围

const random = function(min, max) {
    
    
  if (arguments.length === 2) {
    
    
    return Math.floor(min + Math.random() * ((max + 1) - min))
  } else {
    
    
    return null
  }
}

5、随机生成36位UUID

/**
* 生成uuid
* @returns ffb7cefd-02cb-4853-8238-c0292cf988d5
*/
function uuid() {
    
    
  const s = [];
  const hexDigits = '0123456789abcdef';
  for (let i = 0; i < 36; i++) {
    
    
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  // bits 12-15 of the time_hi_and_version field to 0010
  s[14] = '4';

  // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);

  s[8] = s[13] = s[18] = s[23] = '-';

  const uuid = s.join('');

  return uuid;
}

6、数组去重

const removeDouble = (arr) => [...new Set(arr)];
removeDouble([1, 2, 2, 3, 3, 4, 4, 5, 5, 6])

7、数组交集

const similarity = (arr, values) => arr.filter(v => values.includes(v));
similarity([1, 2, 3], [1, 2, 4]); // [1,2]

8、数组根据某个属性排序

const compareByProp = (prop) => {
    
    
  return function (obj1, obj2) {
    
    
    var val1 = obj1[prop];
    var val2 = obj2[prop];
    if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
    
    
      val1 = Number(val1);
      val2 = Number(val2);
    }
    if (val1 < val2) {
    
    
      return -1;
    } else if (val1 > val2) {
    
    
      return 1;
    } else {
    
    
      return 0;
    }
  };
};

9、多维数组转一维数组

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

10、将一级数组转换成二级数组

/**
 * 将一级数组转换成二级数组
 * 将同等属性的值的对象总括成同个数组，然后全部返回
 * @param arr 需要处理的数组
 * @param param 数组中的字段值key
 */
function listToTreeList (arr, param) {
    
    
  if (!arr || !arr.length) return []

  var arrayTwo = Object.values(
    arr.reduce((res, item) => {
    
    
      res[item[param]] ? res[item[param]].push(item) : (res[item[param]] = [item])
      return res
    }, {
    
    })
  )
  return arrayTwo.map(item => ({
    
     title: item[0][param], childList: item }))
}

const arr = [{
    
     type: 1, name: 'John' }, {
    
     type: 2, name: 'Sam' }, {
    
     type: 1, name: 'Anna' }]

listToTreeList(arr, 'type') 
// [{title:1,childList:[{type:1,name:"John"},{type:1,name:"Anna"}]},{title:2,childList:[{type:2,name:"Sam"}]}]

11、将一级数组转换成三级数组

function listToTree3List(arr, param1, param2) {
    
    
  const newArr = listToTreeList(arr, param1);
  return newArr.map(item => {
    
    
    return {
    
    
      ...item,
      childList: listToTreeList(item.childList, param2),
    };
  });
}

12、字符串大小写转换

/**
* 字符串大小写转换
* @param str 源字符串
* type: 1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写
*/
const changeCase = function (str, type = 4) {
    
    
  switch (type) {
    
    
    case 1:
      return str.replace(/\b\w+\b/g, function (word) {
    
    
        return (
          word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()
        );
      });
    case 2:
      return str.replace(/\b\w+\b/g, function (word) {
    
    
        return (
          word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()
        );
      });
    case 3:
      return str.split("").map(function (word) {
    
    
        if (/[a-z]/.test(word)) {
    
    
          return word.toUpperCase();
        } else {
    
    
          return word.toLowerCase();
        }
      }).join("");
    case 4:
      return str.toUpperCase();
    case 5:
      return str.toLowerCase();
    default:
      return str;
  }
};

13、检查对象是否为空

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

14、保留小数点（非四舍五入）

Math.pow()方法，将一个数字截断到某个小数点
~~可以将其转化成数字类型

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);


console.log(toFixed(78.384348993, 1)); // 78.3
console.log(toFixed(78.384348993, 2)); // 78.38
console.log(toFixed(78.384348993, 3)); // 78.384
console.log(toFixed(78.384348993, 4)); // 78.3843
console.log(toFixed(78.384348993, 5)); // 78.38434
console.log(toFixed(78.384348993, 6)); // 78.384348

// 或者
function toDecimal (num) {
    
    
  let numArr = num.toString().split('.')
  if (numArr.length > 1) {
    
    
    if (numArr[1].length >= 2) {
    
    
      return `${
      
      numArr[0]}.${
      
      numArr[1].substring(0, 2)}`
    } else {
    
    
      return `${
      
      num.toString()}0`
    }
  } else {
    
    
    return `${
      
      num.toString()}.00`
  }
}

15、将金额数字转换成中文

function convertCurrency(n) {
    
    
  var fraction = ['角', '分'];
  var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  var unit = [
      ['元', '万', '亿'],
      ['', '拾', '佰', '仟']
  ];
  var head = n < 0 ? '欠' : '';
  n = Math.abs(n);
  var s = '';
  for (let i = 0; i < fraction.length; i++) {
    
    
      s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
  }
  s = s || '整';
  n = Math.floor(n);
  for (let i = 0; i < unit[0].length && n > 0; i++) {
    
    
      var p = '';
      for (var j = 0; j < unit[1].length && n > 0; j++) {
    
    
          p = digit[n % 10] + unit[1][j] + p;
          n = Math.floor(n / 10);
      }
      s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
  }
  return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
};

16、数字转换成汉字

/**
 * 数字转成汉字
 * @params num 要转换的数字
 * @return 汉字
 * */
function toChinesNum(num) {
    
    
  // 将接收到的num转换为字符串
  const strNum = String(num)
  // 定义单位
  // var unit = ['拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟']
  const unit = ['十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千']
  // 结果中放一个符号，用来解决最后的零去不掉的问题
  var result = ['@']
  // 单位下标
  var unitNo = 0
  // 从后往前遍历接收到的数据，省略结束条件
  for (let i = strNum.length - 1; i >= 0; i--) {
    
    
    // 调用转大写函数，将每一个数字转换成中文大写，一次放入一个到结果数组中
    result.unshift(numToChinese(strNum[i]))
    // 如果不大于0
    if (i <= 0) {
    
    
      // 结束循环
      break
    }
    // 放入一个数字，放入一个单位
    result.unshift(unit[unitNo])
    // 单位下标加1
    unitNo++
  }
  // 将结果数组转换成字符串，并使用正则替换一些关键位置，让结果符合语法
  // return result.join('').replace(/(零[仟佰拾]){1,3}/g, '零').replace(/零{2,}/g, '零').replace(/零([万亿])/g, '$1').replace(/亿万/g, '亿').replace(/零*@/g, '')
  return result.join('').replace(/(零[千百十]){1,3}/g, '零').replace(/零{2,}/g, '零').replace(/零([万亿])/g, '$1').replace(/亿万/g, '亿').replace(/零*@/g, '')

  function numToChinese(n) {
    
    
    // const chineseBigNum = '零壹贰叁肆伍陆柒捌玖'
    const chineseBigNum = '零一二三四五六七八九'
    return chineseBigNum[n]
  }
}

17、获取url上的参数

/**
 * 获取url上参数
 * @param url 给定的地址
 * @param name 参数名
 */
export function getQueryString(url: string, name: string) {
    
    
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  let r = url.substr(1).match(reg)
  let context = ''
  if (r) context = r[2]
  reg = null
  r = null
  return context === null || context == '' || context == 'undefined' ? '' : context
}

18、获取url上的全部参数

/**
 * 获取url上全部参数
 * @param url 给定的地址
 * @return json对象
 */
function getUrlAllParams(url) {
    
    
  var url = url ? url : window.location.href;
  var _pa = url.substring(url.indexOf("?") + 1),
    _arrS = _pa.split("&"),
    _rs = {
    
    };
  for (var i = 0, _len = _arrS.length; i < _len; i++) {
    
    
    var pos = _arrS[i].indexOf("=");
    if (pos == -1) {
    
    
      continue;
    }
    var name = _arrS[i].substring(0, pos),
      value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
    _rs[name] = value;
  }
  return _rs;
}

19、去掉字符串的空格

/**
* 去掉字符串的所有空格
* @param text 源字符串
* type:  1-所有空格  2-前后空格  3-前空格 4-后空格
*/
const trimSpace = function(str, type = 1) {
    
    
  switch (type) {
    
    
    case 1:
      return str.replace(/\s+/g, '')
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, '')
    case 3:
      return str.replace(/(^\s*)/g, '')
    case 4:
      return str.replace(/(\s*$)/g, '')
    default:
      return str
  }
}

20、格式化手机号

function formatMobile(mobile) {
    
    
  let str = 0;
  if(mobile && typeof mobile == "string" && mobile.length == 11) {
    
    
      str = mobile.substring(0, 3) + " " + mobile.substring(3, 7) + " " + mobile.substring(7)
  }
  return str;
}

21、检查日期是否为工作日

const isweekday = (date) => date.getDay() % 6 !== 0

console.log(isweekday(new Date(2021, 3, 20))) // true （周六）
console.log(isweekday(new Date(2021, 3, 21))) // true （周日）

22、从日期中获取时间

timeFromDate()方法，在正确的位置对字符串进行切片获取时间或者当前时间
toLocaleDateString()方法，把日期部分字符串化

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // 17:30:00
console.log(timeFromDate(new Date())); // current time


const dateFromDate = date => date.toLocaleDateString();

console.log(dateFromDate(new Date(2021, 0, 10, 17, 30, 0))); // 2021/1/10
console.log(dateFromDate(new Date())); // current date

23、获取两个日期之间的所有日期

/**
  * starDay 开始日期
  * endDay 结束日期
  */
function getDayAll (starDay, endDay) {
    
    
  var arr = []
  var dates = []

  // 设置两个日期UTC时间
  var db = new Date(starDay)
  var de = new Date(endDay)

  // 获取两个日期GTM时间
  var s = db.getTime() - 24 * 60 * 60 * 1000
  var d = de.getTime() - 24 * 60 * 60 * 1000

  // 获取到两个日期之间的每一天的毫秒数
  for (var i = s; i <= d;) {
    
    
    i = i + 24 * 60 * 60 * 1000
    arr.push(parseInt(i))
  }

  // 获取每一天的时间  YY-MM-DD
  for (var j in arr) {
    
    
    var time = new Date(arr[j])
    var year = time.getFullYear(time)
    var mouth = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
    var day = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()
    var YYMMDD = year + '/' + mouth + '/' + day
    dates.push({
    
     date: YYMMDD, day: Number(day) })
  }

  return dates
}

24、将时间戳依照传参格式返回

function _timeFormat(date, format) {
    
    
  if (!date) return
  function add0(m) {
    
    
    return m < 10 ? '0' + m : m
  }
  function concat(array1, array2, index) {
    
    
    return array1.concat([].slice.call(array2, index));
  }
  let DATE_FORMATS_SPLIT = /((?:[^yMLdHhmsaZEwG']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|L+|d+|H+|h+|m+|s+|a|Z|G+|w+))(.*)/,
    time = new Date(date),
    text = ''


  let DATE_FORMATS = {
    
    
    yyyy: time.getFullYear(),
    yy: (time.getFullYear() + '').slice(2, 4),
    MM: time.getMonth() + 1,
    dd: time.getDate(),
    hh: time.getHours(),
    mm: time.getMinutes(),
    ss: time.getSeconds()
  }
  let parts = []
  while (format) {
    
    
    let match = DATE_FORMATS_SPLIT.exec(format);
    if (match) {
    
    
      parts = concat(parts, match, 1);
      format = parts.pop();
    } else {
    
    
      parts.push(format);
      format = null;
    }
  }
  parts.forEach(value => {
    
    
    if (DATE_FORMATS.hasOwnProperty(value)) {
    
    
      if (value === 'yyyy' || value === 'yy') {
    
     text += DATE_FORMATS[value] }
      else {
    
     text += add0(DATE_FORMATS[value]) }
    } else {
    
    
      text += value
    }
  })
  return text
}

function _dateFormat(date, format) {
    
    
  let oDate = new Date(date)
  let hours = oDate.getHours()
  let ttime = 'AM'
  if (format.indexOf('t') > -1 && hours > 12) {
    
    
    hours = hours - 12
    ttime = 'PM'
  }


  let o = {
    
    
    'M+': oDate.getMonth() + 1,
    'd+': oDate.getDate(),
    'h+': hours,
    'm+': oDate.getMinutes(),
    's+': oDate.getSeconds(),
    'q+': Math.floor((oDate.getMonth() + 3) / 3),
    'S': oDate.getMilliseconds(),
    't+': ttime
  }


  if (/(y+)/.test(format)) {
    
    
    format = format.replace(RegExp.$1, (oDate.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (var k in o) {
    
    
    if (new RegExp('(' + k + ')').test(format)) {
    
    
      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
    }
  }
  return format
}
_dateFormat(1567648218736, 'yyyy/MM/dd hh:mm') // 2019/09/05 09:50
_dateFormat(1567648218736, 'yy/MM/dd hh:mm') // 19/09/05 09:50
_dateFormat(1567648218736, 'yyyy-MM-dd hh:mm') // 2019-09-05 09:50
_dateFormat(1567648218736, 'yy-MM-dd hh:mm') // 19-09-05 09:50
_dateFormat(1567648218736, 'MM/dd/yy hh:mm') // 09/05/19 09:50


_timeFormat(1567648218736, 'yyyy/MM/dd hh:mm') // 2019/09/05 09:50
_timeFormat(1567648218736, 'yy/MM/dd hh:mm') // 19/09/05 09:50
_timeFormat(1567648218736, 'yyyy-MM-dd hh:mm') // 2019-09-05 09:50
_timeFormat(1567648218736, 'yy-MM-dd hh:mm') // 19-09-05 09:50
_timeFormat(1567648218736, 'MM/dd/yy hh:mm') // 09/05/19 09:50

25、格式化“发布时间戳”成中文描述

/**
* 格式化 "发布时间戳" 成中文描述
*
* 60分钟内 x分钟前
* 24小时内 x小时前
* 7天内 x天前
* 7天到14天 一周前
* 14天后到一年 x月x日
* 一年前 xx年x月x日（如 2019年5月1日）
*/
function formatPublishTime (val) {
    
    

  const nowTime = new Date().getTime()
  const publishTime = new Date(val).getTime()
  if (!nowTime || !publishTime || nowTime < publishTime) {
    
    
    return ''
  }

  const value = nowTime - publishTime
  const minute = 1000 * 60

  if (value <= minute * 60) {
    
    
    const temp = Math.floor(value / minute)
    return `${
      
      temp === 0 ? 1 : temp}分钟前`
  }

  const hour = minute * 60
  if (value <= hour * 24) {
    
    
    return `${
      
      Math.floor(value / hour)}小时前`
  }

  const day = hour * 24
  if (value <= day * 7) {
    
    
    return `${
      
      Math.floor(value / day)}天前`
  }

  if (value <= day * 14) {
    
    
    return '一周前'
  }
  const nowDate = new Date(nowTime)
  const publishDate = new Date(publishTime)
  let desc = ''

  if (nowDate.getFullYear() === publishDate.getFullYear()) {
    
    
    desc = `${
      
      Number(publishDate.getMonth() + 1)}月${
      
      Number(publishDate.getDate())}日`
  } else {
    
    
    desc = `${
      
      publishDate.getFullYear()}年${
      
      Number(publishDate.getMonth() + 1)}月${
      
      Number(publishDate.getDate())}日`
  }

  return desc
}

26、表单校验

/*正则匹配*/
export const validation = (str, type) => {
    
    
  switch (type) {
    
    
    case "phone": //手机号码
      return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);
    case "tel": //座机
      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
    case "card": //身份证
      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
    case "pwd": //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
      return /^[a-zA-Z]\w{5,17}$/.test(str);
    case "postal": //邮政编码
      return /[1-9]\d{5}(?!\d)/.test(str);
    case "QQ": //QQ号
      return /^[1-9][0-9]{4,9}$/.test(str);
    case "weixin": // 微信号(6至20位，以字母开头，字母，数字，减号，下划线)
      return /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(str);
    case "email": //邮箱
      return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
    case "money": //金额(小数点2位)
      return /^\d*(?:\.\d{0,2})?$/.test(str);
    case "URL": //网址
      return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(
        str
      );
    case "IP": //IP
      return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(
        str
      );
    case "date": //日期时间
      return (
        /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(
          str
        ) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
      );
    case "number": //数字
      return /^[0-9]$/.test(str);
    case "positiveInteger": //正整数
      return /^[1-9]\d*$/.test(str);
    case "float": // 小数
      return /^[-\+]?\d+(\.\d+)?$/.test(str);
    case "price": //价格
      return /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/.test(str); //价格非0则去掉'?'
    case "english": //英文
      return /^[a-zA-Z]+$/.test(str);
    case "chinese": //中文
      return /^[\u4E00-\u9FA5]+$/.test(str);
    case "lower": //小写
      return /^[a-z]+$/.test(str);
    case "upper": //大写
      return /^[A-Z]+$/.test(str);
    case "HTML": //HTML标记
      return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
    case "color16": // 16进制颜色校验
      return /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(str);
    case "carNo"： // 车牌号校验
      return /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/.test(str);
    default:
      return true;
  }
};

27、RGB颜色转16进制颜色

const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
RGBToHex(255, 165, 1); // 'ffa501'

28、RGBA颜色转16进制颜色

function getHexColor(r, g, b, a) {
    
    
  a = parseFloat(a || 1);
  r = Math.floor(a * parseInt(r) + (1 - a) * 255);
  g = Math.floor(a * parseInt(g) + (1 - a) * 255);
  b = Math.floor(a * parseInt(b) + (1 - a) * 255);
  return (
    ("0" + r.toString(16)).slice(-2) +
    ("0" + g.toString(16)).slice(-2) +
    ("0" + b.toString(16)).slice(-2)
  );
}
console.log(getHexColor(194, 7, 15, 1)); // c2070f

29、16进制颜色转化成RGBA颜色

注意输入6位，如果不足6位，需先补齐

function hexToRgba(hex) {
    
    
  const r = parseInt("0x" + hex.slice(1, 3));
  const g = parseInt("0x" + hex.slice(3, 5));
  const b = parseInt("0x" + hex.slice(5, 7));
  return `rgba(${
      
      r},${
      
      g},${
      
      b},1)`;
}

30、压缩图片

function compressImage (imgData, cb) {
    
    
  var canvas = document.createElement('canvas')
  var img = new Image()
  img.src = imgData
  img.onload = function () {
    
    
    var ctx = canvas.getContext('2d')
    var width = img.width
    var height = img.height
    var MAX_WIDTH = 800
    var MAX_HEIGHT = 600
    if (width > height) {
    
    
      if (width > MAX_WIDTH) {
    
    
        height *= MAX_WIDTH / width
        width = MAX_WIDTH
      }
    } else {
    
    
      if (height > MAX_HEIGHT) {
    
    
        width *= MAX_HEIGHT / height
        height = MAX_HEIGHT
      }
    }
    canvas.width = width
    canvas.height = height
    ctx.drawImage(img, 0, 0, width, height)
    var data = canvas.toDataURL('image/jpeg', 0.5)
    cb(data)
  }
}

31、将图片地址转base64

const getBase64 = function (img) {
    
    
  return new Promise((resolve, reject) => {
    
    
    let getBase64Image = function (img, width, height) {
    
    
      // width、height调用时传入具体像素值，控制大小,不传则默认图像大小
      let canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      let dataURL = canvas.toDataURL();
      return dataURL;
    };
    let image = new Image();
    image.src = img;
    image.crossOrigin = "anonymous";
    image.onload = function () {
    
    
      resolve(getBase64Image(image));
    };
    image.onerror = function () {
    
    
      reject();
    };
  });
};

32、base64图片下载至本地

const downloadFile = function (base64, fileName) {
    
    
  const base64ToBlob = function (code) {
    
    
    const parts = code.split(";base64,");
    const contentType = parts[0].split(":")[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
    
    
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
    
    
      type: contentType,
    });
  };
  const aLink = document.createElement("a");
  const blob = base64ToBlob(base64);
  const evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true); // 初始化新事件对象的属性 是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};

33、js引用组件实例

/**
* @param Component 组件实例的选项对象

* @param props 组件实例中的prop

*/
export function createComponent(Component, props) {
    
    
  const comp = new (Vue.extend(Component))({
    
     propsData: props }).$mount();

  document.body.appendChild(comp.$el);

  comp.remove = () => {
    
    
    document.body.removeChild(comp.$el);

    comp.$destroy();
  };

  return comp;
}

34、千分位格式化金额

const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // 12,305,030,388.909

35、驼峰字字符串格式化

const fromCamelCase = (str, separator = '_') =>str.replace(/([a-zd])([A-Z])/g, '$1' + separator + '$2').replace(/([A-Z]+)([A-Z][a-zd]+)/g, '$1' + separator + '$2').toLowerCase();

fromCamelCase('someDatabaseFieldName', ' '); // 'some database field name'
fromCamelCase('someLabelThatNeedsToBeCamelized', '-'); // 'some-label-that-needs-to-be-camelized'
fromCamelCase('someJavascriptProperty', '_'); // 'some_javascript_property'

36、提取富文本里的字符

function getListContent (conent) {
    
    
  if (!conent || conent === 'null' || conent === 'NULL') {
    
    
    return ''
  }
  return conent
    .replace(/(\n)/g, '')
    .replace(/(\t)/g, '')
    .replace(/(\r)/g, '')
    .replace(/<\/?[^>]*>/g, '')
    .replace(/\s*/g, '')
    .replace(/&nbsp;/gi, '')
    .replace(/&quot;/gi, '"')
    .replace(/&amp;/gi, '&')
    .replace(/&lt;/gi, '<')
    .replace(/&gt;/gi, '>')
    .replace(/&euro;/gi, '€')
    .replace(/&rsaquo;/gi, '›')
    .replace(/&lsaquo;/gi, '‹')
    .replace(/&permil;/gi, '‰')
    .replace(/&Dagger;/gi, '‡')
    .replace(/&dagger;/gi, '†')
    .replace(/&bdquo;/gi, '„')
    .replace(/&rdquo;/gi, '”')
    .replace(/&ldquo;/gi, '“')
    .replace(/&sbquo;/gi, '‚')
    .replace(/&rsquo;/gi, '’')
    .replace(/&lsquo;/gi, '‘')
    .replace(/&mdash;/gi, '—')
    .replace(/&ndash;/gi, '–')
    .replace(/&rlm;/gi, '')
    .replace(/&lrm;/gi, '')
    .replace(/&zwj;/gi, '')
    .replace(/&zwnj;/gi, '')
    .replace(/&thinsp;/gi, '')
    .replace(/&emsp;/gi, '')
    .replace(/&ensp;/gi, '')
    .replace(/&tilde;/gi, '˜')
    .replace(/&circ;/gi, 'ˆ')
    .replace(/&Yuml;/gi, 'Ÿ')
    .replace(/&scaron;/gi, 'š')
    .replace(/&Scaron;/gi, 'Š')
    .replace(/&oelig;/gi, 'œ')
    .replace(/&OElig;/gi, 'Œ')
    .replace(/&bull;/gi, '•')
    .replace(/&hellip;/gi, '…')
    .replace(/&prime;/gi, '′')
    .replace(/&Prime;/gi, '″')
    .replace(/&oline;/gi, '‾')
    .replace(/&frasl;/gi, '⁄')
    .replace(/&sdot;/gi, '⋅')
    .replace(/&perp;/gi, '⊥')
    .replace(/&otimes;/gi, '⊗')
    .replace(/&oplus;/gi, '⊕')
    .replace(/&supe;/gi, '⊇')
    .replace(/&sube;/gi, '⊆')
    .replace(/&nsub;/gi, '⊄')
    .replace(/&sup;/gi, '⊃')
    .replace(/&sub;/gi, '⊂')
    .replace(/&ge;/gi, '≥')
    .replace(/&le;/gi, '≤')
    .replace(/&equiv;/gi, '≡')
    .replace(/&ne;/gi, '≠')
    .replace(/&asymp;/gi, '≈')
    .replace(/&cong;/gi, '≅')
    .replace(/&sim;/gi, '∼')
    .replace(/&there4;/gi, '∴')
    .replace(/&int;/gi, '∫')
    .replace(/&cup;/gi, '∪')
    .replace(/&cap;/gi, '∩')
    .replace(/&or;/gi, '∨')
    .replace(/&and;/gi, '∧')
    .replace(/&ang;/gi, '∠')
    .replace(/&infin;/gi, '∞')
    .replace(/&prop;/gi, '∝')
    .replace(/&radic;/gi, '√')
    .replace(/&lowast;/gi, '∗')
    .replace(/&minus;/gi, '−')
    .replace(/&sum;/gi, '∑')
    .replace(/&prod;/gi, '∏')
    .replace(/&ni;/gi, '∋')
    .replace(/&notin;/gi, '∉')
    .replace(/&isin;/gi, '∈')
    .replace(/&nabla;/gi, '∇')
    .replace(/&empty;/gi, '∅')
    .replace(/&exist;/gi, '∃')
    .replace(/&part;/gi, '∂')
    .replace(/&forall;/gi, '∀')
}

37、字节大小转换

/**
 * 字节大小转换 bytes -> KB、MB、GB等
 * @param length    文件大小
 * @param decimals  保留小数点
 */
function formatBytes(length: number, decimals: number) {
    
    
  if (length == 0) {
    
    
    return '0Bytes'
  }
  const k = 1024
  const dm = decimals || 2
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const i = Math.floor(Math.log(length) / Math.log(k))
  return `${
      
      parseFloat((length / Math.pow(k, i)).toFixed(dm))}${
      
      sizes[i]}`
}

38、将普通字符串转码成 BASE64

function str2B64(input) {
    
    
  const b64pad = ''
  const tab = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
  let output = ''
  const len = input.length
  for (let i = 0; i < len; i += 3) {
    
    
    const triplet =
      (input.charCodeAt(i) << 16) |
      (i + 1 < len ? input.charCodeAt(i + 1) << 8 : 0) |
      (i + 2 < len ? input.charCodeAt(i + 2) : 0)
    for (let j = 0; j < 4; j++) {
    
    
      if (i * 8 + j * 6 > input.length * 8) output += b64pad
      else output += tab.charAt((triplet >>> (6 * (3 - j))) & 0x3f)
    }
  }
  return output
}

function encode(str){
    
    
  // 对字符串进行编码
  var encode = encodeURI(str);
  // 对编码的字符串转化base64
  var base64 = btoa(encode);
  return base64;
}
str2B64('absfs;fasfsfasf');  // 'YWJzZnM7ZmFzZnNmYXNm'
encode('absfs;fasfsfasf'); // 'YWJzZnM7ZmFzZnNmYXNm'

39、判断浏览器版本

function myBrowser() {
    
    
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
  var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
  var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
  var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
  var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
  if (isIE) {
    
    
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    if (fIEVersion == 7) {
    
    
      return "IE7";
    } else if (fIEVersion == 8) {
    
    
      return "IE8";
    } else if (fIEVersion == 9) {
    
    
      return "IE9";
    } else if (fIEVersion == 10) {
    
    
      return "IE10";
    } else if (fIEVersion == 11) {
    
    
      return "IE11";
    } else {
    
    
      return "0";
    } //IE版本过低
    return "IE";
  }
  if (isOpera) {
    
    
    return "Opera";
  }
  if (isEdge) {
    
    
    return "Edge";
  }
  if (isFF) {
    
    
    return "FF";
  }
  if (isSafari) {
    
    
    return "Safari";
  }
  if (isChrome) {
    
    
    return "Chrome";
  }
}

40、http请求封装

function request(url, sendData) {
    
    
  let promise = new Promise((resolve, reject) => {
    
    
    try {
    
    
      let response = "";
      let xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
    
    
        if (xmlhttp.status == 200 || xmlhttp.status == 0) {
    
    
          response = xmlhttp.responseText;
          if ("" !== response) {
    
    
            resolve({
    
     status: xmlhttp.status, response });
          }
        } else if (xmlhttp.status == 400) {
    
    
          console.warn("Bad Request(parameter is not json format)");
          reject({
    
     status: xmlhttp.status, response });
        } else if (xmlhttp.status == 500) {
    
    
          console.warn("Bad Request(parameter is not json array)");
          reject({
    
     status: xmlhttp.status, response });
        } else {
    
    
          reject({
    
     status: xmlhttp.status, response });
        }
      };
      xmlhttp.open("GET", url, true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.send(sendData);
    } catch (e) {
    
    
      reject(e);
    }
  });
  return promise;
}

41、判断元素是否在可视区域内

function checkInView(dom) {
    
    
  const {
    
     top, left, bottom, right } = dom.getBoundingClientRect();
  return (
    top >= 0 &&
    left >= 0 &&
    bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

42、事件防抖

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
const debounce = (func: any, wait: number, immediate?: boolean) => {
    
    
  let timeout: any;
  const debounced = () => {
    
    
    if (timeout) clearTimeout(timeout);
    if (immediate) {
    
    
      // 如果已经执行过，不再执行
      const callNow = !timeout;
      timeout = setTimeout(function () {
    
    
        // wait时间后把timeout设置为null
        timeout = null;
      }, wait);
      if (callNow) func();
    } else {
    
    
      timeout = setTimeout(() => {
    
    
        func();
      }, wait);
    }
  };

  debounced.cancel = () => {
    
    
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

43、事件节流

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
const throttle = (func: any, wait: number, type: number) => {
    
    
  let previous = 0;
  let timeout: any;
  return () => {
    
    
    if (type === 1) {
    
    
      const now = Date.now();
      if (now - previous > wait) {
    
    
        func();
        previous = now;
      }
    } else if (type === 2) {
    
    
      if (!timeout) {
    
    
        timeout = setTimeout(() => {
    
    
          timeout = null;
          func.apply();
        }, wait);
      }
    }
  };
};

44、加载外部单个js文件

/**
 * 加载外部单个js文件
 * @param {string} url js文件路径
 * @param {function} callback 加载完成的回调函数
 */
export function loadScript (url, callback) {
    
    
  const script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = url

  // 加载完成回调
  script.onload = function() {
    
    
    if (typeof callback === 'function') {
    
    
      callback()
    }
  }

  document.head.appendChild(script)
}

45、加载外部css文件

/**
 * 加载外部css文件
 * @param {string} url 外部css文件路径
 */
export function loadCSS (url) {
    
    
  const link = document.createElement('link')
  link.href = url
  link.rel = 'stylesheet'
  link.type = 'text/css'
  document.head.appendChild(link)
}

46、加载外部多个js文件

/**
 * 加载外部多个js文件
 * @param {array} urls 多个js文件路径
 * @param {function} callback 所有文件加载完成的回调函数
 */
export function loadScripts (urls, callback) {
    
    
  let promise = Promise.resolve()

  urls.forEach(url => {
    
    
    promise = promise.then(() => {
    
    
      return new Promise((resolve, reject) => {
    
    
        loadScript(url, resolve)
      })
    })
  })

  promise.then(callback)
}

47、身份证号获取出生日期、性别和年龄

/**
 * 只考虑二代身份证
 * 传入身份证号码，获取出生日期、性别和年龄
 * @param IdCard 身份证号码
 * @param type
 * 1 获取出生日期
 * 2 获取性别
 * 3 获取年龄，年龄小于1岁时默认为1岁
 */
export function getInfoByIdCard (IdCard, type) {
    
    
  if (!IdCard || IdCard.length !== 18) return ''

  switch (type) {
    
    
    case 1:
      const birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14)
      return birthday

    case 2:
      return parseInt(IdCard.charAt(16)) % 2 == 0 ? '女' : '男'

    case 3:
      var ageDate = new Date()
      var month = ageDate.getMonth() + 1
      var day = ageDate.getDate()
      var age = ageDate.getFullYear() - IdCard.substring(6, 10) - 1
      if (IdCard.substring(10, 12) < month || IdCard.substring(10, 12) == month && IdCard.substring(12, 14) <= day) {
    
    
        age++
      }
      if (age <= 0) {
    
    
        age = 1
      }
      return age
    default:
      return ''
  }
}

48、判断当前环境是否是企业微信/微信/小程序

// 判断是否为企业微信
export const isQyWechat = /WxWork/i.test(navigator.userAgent.toLowerCase())
// 判断是否为微信
export const isWechat = /MicroMessenger/i.test(navigator.userAgent.toLowerCase()) && navigator.userAgent.indexOf('miniProgram') === -1 && window.__wxjs_environment !== 'miniprogram' && !isQyWechat
// 是否在小程序环境
export const isMiniProgram = navigator.userAgent.indexOf('miniProgram') !== -1 || window.__wxjs_environment === 'miniprogram'

49、获得微信版本号

function getWechatVertion () {
    
    
  let version = ''
  if (isWechat) {
    
    
    const wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d.]+)/i)
    if (wechatInfo && wechatInfo.length > 1) {
    
    
      // 获取微信的版本号
      version = wechatInfo[1]
    }
  }
  return version
}