前端常用的工具函数

操作Cookie

/**
 * @description 获取cookie
 * @param name key
 * @returns {*} 值
 */
export function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
    return (arr[2]);
  else
    return null;
}

/**
 *@description 设置cookie
 * @param c_name key
 * @param value 值
 * @param expiredays 过期时间
 */
export function setCookie(c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};

/**
 * @description 删除cookie
 * @param name key
 */
export function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};

获取地址栏参数

• 方法一：

// 获取地址栏参数的函数方法
GetQueryString = (name) => {
     let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     let r = window.location.search.substr(1).match(reg);
     if(r!=null) return  decodeURIComponent(r[2]); return null;
}

// 调用方式
let URL = `https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=axios` // 地址栏
GetQueryString('tn'); // 输出值为 baidu


window.getQueryString = name => {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  var r = window.location.search
    ? window.location.search.substr(1).match(reg)
    : window.location.href.split('?')[1]
      ? window.location.href
          .split('?')[1]
          .substr(0)
          .match(reg)
      : '';
  if (r != null) return decodeURIComponent(r[2]);
  return null;
};

• 方法二

function UrlSearch(){
   var name,value; 
   var str=location.href; //取得整个地址栏
   var num=str.indexOf("?") 
   str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

   var arr=str.split("&"); //各个参数放到数组里
   for(var i=0;i < arr.length;i++){ 
    num=arr[i].indexOf("="); 
    if(num>0){ 
     name=arr[i].substring(0,num);
     value=arr[i].substr(num+1);
     this[name]=value;
     } 
    } 
} 
// 调用方式
let GetQueryString = new UrlSearch() // 获取所有参数的对象集合
GetQueryString.key || GetQueryString['key'] // 取值

• 方法三

/**
 *
 * @description   url参数转对象
 * @param  {String} url  default: window.location.href
 * @return {Object}
 */
let parseQueryString = function(url) {
  url = url == null ? window.location.href : url
  var search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1)
  if (search === '') return {}
  search = search.split('&');
  var query = {};
  for (var i = 0; i < search.length; i++) {
    var pair = search[i].split('=');
    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
  }
  return query;
}

• 方法四

var GetQueryJson2 = function () {
	let url = location.href; // 获取当前浏览器的URL
	let param = {}; // 存储最终JSON结果对象
	url.replace(/([^?&]+)=([^?&]+)/g, function (s, v, k) {
		param[v] = decodeURIComponent(k); //解析字符为中文
		return k + '=' + v;
	});
	return param;
}
GetQueryJson2() // 得到所有地址栏参数的Object

hash模式下获取地址栏参数（针对授权code获取）

window.getQueryStringOther = name => {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  var link =
    window.location.search +
    '&' +
    window.location.href.split('#/')[1].split('?')[1];
  console.log(link);
  var r = window.location.search
    ? link.substr(1).match(reg)
    : link.split('?')[1]
      ? window.location.href
          .split('?')[1]
          .substr(0)
          .match(reg)
      : '';
  if (r != null) return decodeURIComponent(r[2]);
  return null;
};

对象序列化(对象转成url参数)

/**
 *
 * @description   对象序列化(对象转成url参数)
 * @param  {Object} obj
 * @return {String}
 */
let stringfyQueryString = function(obj) {
  if (!obj) return '';
  var pairs = [];

  for (var key in obj) {
    var value = obj[key];

    if (value instanceof Array) {
      for (var i = 0; i < value.length; ++i) {
        pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
      }
      continue;
    }

    pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
  }

  return pairs.join('&');
}

已知时间戳-转标准时间格式

/**
*
* @desc 时间戳转标准时间
* @params { num } timestamp:时间戳
* @params { String } linkLine：标准时间年月日链接方式
* @return { String }
*/
function transformTime(timestamp = +new Date(),linkLine) {
    if (timestamp) {
        var time = new Date(timestamp);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var m = time.getMinutes();
        var s = time.getSeconds();
        return y + linkLine + addZero(M) + linkLine + addZero(d) + ' ' + addZero(h) + ':' + addZero(m) + ':' + addZero(s);
      } else {
          return '';
      }
}
function addZero(m) {
    return m < 10 ? '0' + m : m;
}
transformTime(1538370892000,'-'); // "2018-10-01 13:14:52"
transformTime(1538370892000,'/'); // "2018/10/01 13:14:52"

时间格式转时间戳

var date = new Date('2014-04-23 18:55:49:123');
var _DATE = new Date('2019-04-19T02:26:22Z');
    // 有二种方式获取
    var time1 = date.getTime(); // 1398250549123
    var time2 = date.valueOf(); // 1398250549123
    var time11 = _DATE.getTime(); // 1555640782000
    var time22 = _DATE.valueOf(); // 1555640782000

判断是否是邮箱格式

/**
 *
 * @desc   判断是否为邮箱地址
 * @param  {String}  str
 * @return {Boolean}
 */
let isEmail = function(str) {
  return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
}

判断是否为URL地址

/**
 *
 * @description   判断是否为URL地址
 * @param  {String} str
 * @return {Boolean}
 */
let isUrl = function(str) {
  return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(str);
}

随机生成颜色（16进制）

/**
 *
 * @description 随机生成颜色
 * @return {String}
 */
let randomColor  = function() {
  return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}

生成知道位数随机数

/**
 *
 * @description 生成指定范围[min, max]的随机数
 * @param  {Number} min
 * @param  {Number} max
 * @return {Number}
 */
let randomNum = function(min, max) {
  return Math.floor(Math.random() * (max-min+1) )+ min;
}

深拷贝

/**
 * @description 深拷贝，支持常见类型
 * @param {Any} values
 */
let deepClone = function(values) {
  var copy;

  // Handle the 3 simple types, and null or undefined
  if (null == values || "object" != typeof values) return values;

  // Handle Date
  if (values instanceof Date) {
    copy = new Date();
    copy.setTime(values.getTime());
    return copy;
  }

  // Handle Array
  if (values instanceof Array) {
    copy = [];
    for (var i = 0, len = values.length; i < len; i++) {
      copy[i] = deepClone(values[i]);
    }
    return copy;
  }

  // Handle Object
  if (values instanceof Object) {
    copy = {};
    for (var attr in values) {
      if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
    }
    return copy;
  }

  throw new Error("Unable to copy values! Its type isn't supported.");
}

键盘弹起事件和键盘缩回

/**
 *
 * @description H5软键盘缩回、弹起回调
 * 当软件键盘弹起会改变当前 window.innerHeight，监听这个值变化
 * @param {Function} downCb 当软键盘弹起后，缩回的回调
 * @param {Function} upCb 当软键盘弹起的回调
 */
let windowResize = function(downCb, upCb) {
  var clientHeight = window.innerHeight;
  downCb = typeof downCb === 'function' ? downCb : function () {}
  upCb = typeof upCb === 'function' ? upCb : function () {}
  window.addEventListener('resize', () => {
    var height = window.innerHeight;
    if (height === clientHeight) {
      downCb();
    }
    if (height < clientHeight) {
      upCb();
    }
  });
}

获取浏览器的版本和类型

/**
 *
 * @desc 获取浏览器类型和版本
 * @return {String}
 */
let getExplore = function() {
  var sys = {},
    ua = navigator.userAgent.toLowerCase(),
    s;
  (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
  (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
  (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
  (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
  (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
  (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
  (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
  // 根据关系进行判断
  if (sys.ie) return ('IE: ' + sys.ie)
  if (sys.edge) return ('EDGE: ' + sys.edge)
  if (sys.firefox) return ('Firefox: ' + sys.firefox)
  if (sys.chrome) return ('Chrome: ' + sys.chrome)
  if (sys.opera) return ('Opera: ' + sys.opera)
  if (sys.safari) return ('Safari: ' + sys.safari)
  return 'Unkonwn'
}

获取操作系统类型

/**
 *
 * @description 获取操作系统类型
 * @return {String}
 */
let getOS = function() {
  var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
  var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
  var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';

  if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) return 'ios'
  if (/android/i.test(userAgent)) return 'android'
  if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
  if (/mac/i.test(appVersion)) return 'MacOSX'
  if (/win/i.test(appVersion)) return 'windows'
  if (/linux/i.test(appVersion)) return 'linux'
}

获取滚动条距离顶部的距离

/**
 *
 * @description 获取滚动条距顶部的距离
 */
let getScrollTop = function() {
  return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
}

现金额转大写

/**
 *
 * @description   现金额转大写
 * @param  {Number} n
 * @return {String}
 */
let digitUppercase = function(n) {
  var fraction = ['角', '分'];
  var digit = [
    '零', '壹', '贰', '叁', '肆',
    '伍', '陆', '柒', '捌', '玖'
  ];
  var unit = [
    ['元', '万', '亿'],
    ['', '拾', '佰', '仟']
  ];
  var head = n < 0 ? '欠' : '';
  n = Math.abs(n);
  var s = '';
  for (var 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 (var 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(/^整$/, '零元整');
};

验证是否是微信环境

  isWechat() {
    let ua = window.navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == "micromessenger";
  }

验证是否是钉钉环境

  isDingTalk() {
    let ua = window.navigator.userAgent.toLowerCase();
    return ua.match(/DingTalk/i) == "dingtalk";
  }

保留有效数字

let num = 3.141592653;
num.toFixed() // 3
num.toFixed(1) // 3.1
num.toFixed(2) // 3.14
num.toFixed(3) // 3.142

判断ios

// 是IOS返回true，不是返回false
function isIOS() {
	var u = navigator.userAgent;
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
	return isiOS;
}

计算字符串占用字节

	function getLength(str){
	var length = str.length;
	var init = length;
	for(var i = 0;i<init;i++){
		if(str.charCodeAt(i) >255){
			length++;
		}
	}
	return length;
}

过滤对象中的空值

var data={
	a:1,
	b:2,
	c:3,
	4:''
}
for ( var key in data ){
	if ( data[key] === '' ){
		delete data[key]
	}
}
console.log(data);

input输入框保留2位小数

value => {
  if (typeof value === 'string') {
    return !isNaN(Number(value))
      ? value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')
      : '';
  } else if (typeof value === 'number') {
    return !isNaN(value)
      ? String(value).replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')
      : '';
  } else {
    return '';
  }
};

antd InputNumber限制输入正整数

// 方法1:
<InputNumber min={0} max={9999} precision={0}/>

// 方法2:
const limitNumber = (value: string | undefined) => {
  const reg = /^(0+)|[^\d]+/g;
  if (typeof value === 'string') {
    return !isNaN(Number(value)) ? value.replace(reg, '$1') : '';
  } else if (typeof value === 'number') {
    return !isNaN(value) ? String(value).replace(reg, '$1') : '';
  } else {
    return '';
  }
}
<InputNumber min={'0'} max={'10000'} formatter={limitNumber} parser={limitNumber}/>

替换或添加url参数

// 可以在小程序中使用
/**
 *
 * @description   替换或添加url参数
 * @param  {string} base 链接
 * @param  {string} find 替换或增加的key
 * @param  {string|number} value 替换或增加的value
 * @return {String}
 */
changeUrl(base, find, value) { 
    var offset = base.indexOf(find); 
    var index; 
    var rr = ''; 
    if(offset < 0){ 
        if(base.indexOf('?') < 0) { 
            base += '?'; 
        }else{ 
            base += '&'; 
        } 
        base += find + '=' + value; 
    }else{ 
        let left = base.substr(0, offset); 
        let right = base.substr(offset); 
        index = right.indexOf('&'); 
        if(index >= 0){ 
            rr = right.substr(index); 
        } 
        base = left + find + "=" + value + rr; 
    } 
    return base; 
}

// 常用的替换参数的方法（小程序中不适用，eval方法不可用）
function changeUrlArg(url, arg, val){
    var pattern = arg+'=([^&]*)';
    var replaceText = arg+'='+val;
    return url.match(pattern) ? url.replace(eval('/('+ arg+'=)([^&]*)/gi'), replaceText) : (url.match('[\?]') ? url+'&'+replaceText : url+'?'+replaceText);
}

获取时间区间内所有月份

function getMonthBetween (start, end) {//返回月份的数组 如 ['2020-07','2020-08']
        var result = [];
        var s = start.split("-");
        var e = end.split("-");
        var min = new Date();
        var max = new Date();
        min.setFullYear(s[0], s[1] * 1 - 1, 1);//开始日期
        //console.log(moment(min).format('YYYY-MM-DD'));
        max.setFullYear(e[0], e[1] * 1 - 1, 1);//结束日期
        //console.log(moment(max).format('YYYY-MM-DD'));
        var curr = min;
        while (curr <= max) {
            //console.log(moment(curr).format('YYYY-MM-DD'));
            var month = curr.getMonth();
            console.log(month + 1);
            //var str = curr.getFullYear() + "-" + (month);
            //var s = curr.getFullYear() + "-0";
            //if (str == s) {
            //str = curr.getFullYear() + "-1";
            // }
            result.push(curr.getFullYear()+"-"+PrefixInteger((month + 1),2));
            curr.setMonth(month + 1);
        }
        return result;
    }

中文、字母、数字正则

/^[A-Za-z0-9\u4e00-\u9fa5]+$/