解决JavaScript中常见问题的实用方法

1.如何获取基础URL

const getBaseURL = (url) => url.replace(/[?#].*$/, '');
getBaseURL('https://mp.csdn.net/mp_blog/creation/editor/new?spm=1001.2014.3001.5352'); 
// https://mp.csdn.net/mp_blog/creation/editor/new

2.如何获取URL参数作为对象

const getURLParameters = (url) => {
    const val = url.match(/([^?=&]+)(=([^&]*))/g) || [];
    val.reduce((a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a), {});
};
getURLParameters('https://mp.csdn.net/mp_blog/creation/editor/new?spm=1001.2014.3001.5352');
// {spm: '1001.2014.3001.5352'}

3.检查对象是否为空

const isEmpty = (obj) => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}); // true
isEmpty({ m: 'web' }); //false

4.反转字符串

const getReverse = (str) => str.split('').reverse().join('');
getReverse('Hello World');// dlroW olleH

5.文字复制到剪贴板

const copyText = async (text) => await navigator.clipboard.writeText(text);
copyText('海贼王');

6. js生成唯一标识符id/uuid

const getUUID = () => {
  let d = new Date().getTime();
  const x = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
  const uuid = x.replace(/[xy]/g, (c) => {
    const r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
  });
  return uuid;
};

7.生成随机颜色

const getColorRandom = (num: number) => {
  var colorarr: any = [];
  //构成颜色的字符元素
  var cArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  for (var i = 0; i < num; i++) {
    var color = '#';
    for (var j = 0; j < 6; j++) {
      var cIndex = Math.round(Math.random() * 15);
      color += cArray[cIndex];
    }
    colorarr[i] = color;
  }
  return colorarr;
}

8.下载图片

const downloadIamge = (url, name) => {
  // 解决图片不同源下载问题(访问的网站域名与服务器域名不一致)
  // imgsrc:代表图片地址, name:代表图片名称
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous');
  image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context: any = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    var url = canvas.toDataURL('image/png');
    var a = document.createElement('a');
    var event = new MouseEvent('click');
    a.download = name || 'photo'; // 设置图片名称
    a.href = url;
    a.dispatchEvent(event);
  };
  image.src = url;
};

9.导出表格数据-xlsx

const handleExport = (data, name) => {
  var blob = new Blob([data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
  });
  var downloadElement = document.createElement('a');
  var href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = name; //定义文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); //点击下载
  document.body.removeChild(downloadElement); //下载完成移除元素
  window.URL.revokeObjectURL(href); //释放掉blob对象
};

10.去除数字之外的所有字符

const formatNum = (data: any) => {
  const rule = /[^\d]/g;
  let str: boolean = rule.test(data);
  return str;
};

11.解决浮点数计算不精确问题(加法)

const accAddition = (num1, num2) => {
  const num1Digits = (num1.toString().split('.')[1] || '').length;
  const num2Digits = (num2.toString().split('.')[1] || '').length;
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
  const str = (Math.round(num1 * baseNum) + Math.round(num2 * baseNum)) / baseNum;
  return str;
};

12.解决浮点数计算不精确问题(减法)

const accSubtract = (num1, num2) => {
  const num1Digits = (num1.toString().split('.')[1] || '').length;
  const num2Digits = (num2.toString().split('.')[1] || '').length;
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
  const str = (Math.round(num1 * baseNum) - Math.round(num2 * baseNum)) / baseNum;
  return str;
};

13.解决浮点数计算不精确问题(乘法)

const accMultiply = (num1, num2) => {
  const num1Digits = (num1.toString().split('.')[1] || '').length;
  const num2Digits = (num2.toString().split('.')[1] || '').length;
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
  const str = (Math.round(num1 * baseNum) * Math.round(num2 * baseNum)) / baseNum / baseNum;
  return str;
};

14.解决浮点数计算不精确问题(除法)

const accDivision = (num1, num2) => {
  const num1Digits = (num1.toString().split('.')[1] || '').length;
  const num2Digits = (num2.toString().split('.')[1] || '').length;
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
  const str = Math.round(num1 * baseNum) / Math.round(num2 * baseNum);
  return str;
};