前端常用的一些函数公共方法_前端项目公共数据和函数有哪些

1、修改数组中对象的属性

/**
 * 修改数组中对象的属性
 * @param attr 对象-键值对：{ 需要的属性：被修改的属性 }
 * @param array 数组
 * @returns 修改对象名称属性后的数组
 * 注意格式！！！
 * 举例：const data = changeAttr({ key: 'venueId', name: 'venueName' }, res.data)
 * 将res.data内属性venueId改为key, 将venueName属性改为name
 */
 
export const changeAttr = (attr, array) => {
  const attrKeys = Object.keys(attr); // 需要的属性
  const attrValue = Object.values(attr); // 将被修改的属性
  const obj = {};
  const data = [];
  array &&
    array.length &&
    array.forEach((element) => {
      attrKeys.forEach((item, index) => {
        const key = attrValue?.[index];
        obj[item] = element?.[key];
      });
      data.push({ ...obj });
    });
  return data;
};

2、下载文件

/**
 * 下载文件
 * @param file 文件流
 * @param fileName 文件名称
 * @param type 文件类型（默认excel，下载MP3时需设置为'audio/mpeg'）
 */
export function download(file: File, fileName, type = 'application/vnd.ms-excel') {
  // 将文件流转成blob形式
  const blob = new Blob([file], { type });
  // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
  const eLink = document.createElement('a');
  eLink.download = fileName;
  eLink.style.display = 'none';
  eLink.href = URL.createObjectURL(blob);
  document.body.appendChild(eLink);
  eLink.click();
  URL.revokeObjectURL(eLink.href); // 释放URL 对象
  document.body.removeChild(eLink);
}

3、自定义唯一id

// 自定义唯一id
export const getUuid = () => {
  const s = [];
  const hexDigits = '0123456789abcdef';
  for (let i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
 
  s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
  // eslint-disable-next-line no-bitwise
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  // eslint-disable-next-line no-multi-assign
  s[8] = s[13] = s[18] = s[23] = '-';
 
  const uuid = s.join('');
  return uuid;
};

4、图片压缩

// 压缩方法
// 图片大于2M进行压缩
export const compressImg = (file) => {
  const fileSize = parseFloat(parseInt(file.size, 10) / 1024 / 1024).toFixed(2);
  const read = new FileReader();
  read.readAsDataURL(file);
  return new Promise((resolve, reject) => {
    read.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        // 默认按比例压缩
        const w = this.width;
        const h = this.height;
        // 生成canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        let base64;
        // 创建属性节点
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);
        ctx.drawImage(this, 0, 0, w, h);
        if (fileSize < 1) {
          // 如果图片小于一兆 那么压缩0.5
          base64 = canvas.toDataURL(file.type, 0.5);
        } else if (fileSize > 1 && fileSize < 2) {
          // 如果图片大于1M并且小于2M 那么压缩0.5
          base64 = canvas.toDataURL(file.type, 0.5);
        } else {
          // 如果图片超过2m 那么压缩0.2
          base64 = canvas.toDataURL(file.type, 0.2);
        }
 
        // 回调函数返回file的值（将base64编码转成file）
        // files = that.dataURLtoFile(base64, file.name); // 如果后台接收类型为base64的话这一步可以省略
        resolve(base64);
      };
    };
  });
};

5、递归树

6、二维数组过滤，返回满足条件的项[{ ...item }, { ...item }, ...]   可用于提取公共项，公共参数

eg：

[

    [{ ...item }, { ...item }],

    [{ ...item }, { ...item }],

    [{ ...item }, { ...item }, { ...item }],

    [{ ...item }, { ...item }, { ...item }, { ...item }]

]

getCommonItems(...arrays) {
        if (arrays.length === 0 || arrays.length === 1) return [];
        // 二维数组分为第一个和其他项，使用以第一项为参考，后续得到的项也是第一项的结果
        // 所以第一项数据很重要，如有特殊需求，请进行一些处理
        const [baseArray, ...remainingArrays] = this.changeBaseArray(arrays);
        return baseArray.filter(item =>
          remainingArrays.every(array => array.some(el => this.isEqual(el, item))));
}
 
 
// 对比计算item项 某些参数  是否是一致的
isEqual(obj1, obj2) {
        if (obj1.name === obj2.name && obj1.displayname === obj2.displayname && obj1.defaultvalue === obj2.defaultvalue) {
            if (obj1.listitems && obj2.listitems) { // 数组
                if (this.isListitemsEqual(obj1.listitems, obj2.listitems)) {
                    return true;
                } else {
                    return false;
                }
            } else if (obj1.range && obj2.range) { // 最大最小值
                if (obj1.range.startval === obj2.range.startval && obj1.range.stopval === obj2.range.stopval) return true;
                return false;
            } else {
                return true;
            }
        }
 
        return false;
}

7、修改 二维数组 第一项数组，使其第一项某些字段必须为最大值，也可自定义第一项规则

// 改变第一项结构
    changeBaseArray = (arrays) => {
        const newBaseArray = arrays[0];
        arrays.forEach((item) => {
            item.forEach((ele) => {
                const existItem = newBaseArray.find(i => i.name === ele.name);
                const existItemIndex = newBaseArray.findIndex(i => i.name === ele.name);
                if (ele.listitems && existItem && existItem.listitems.length < ele.listitems.length) {
                    newBaseArray[existItemIndex].listitems = ele.listitems;
                }
 
                if (ele.range && existItem && 
                    Number(ele.range.startval) <= Number(existItem.range.startval) && 
                    Number(ele.range.stopval) >= Number(existItem.range.stopval)) {
                    newBaseArray[existItemIndex].range = ele.range;
                }
            })
        })
        arrays[0] = newBaseArray;
        return arrays;
    }