常用前端方法总结

目的:记录一下 我用到的常用的 方法

// 随机生成id
export const uuid = () => Math.random().toString(24).substring(2, 12);
// 1. 判断对象是否为数组 Array.isArray(obj)

// 2. 数组内是否用重复数据
const isOk = array.some((i, index, arr) => {
          return index !== arr.findIndex((k) => k.id=== i.id);
       });
// 3. 过滤掉数组内某一条数据 可以用 filter 或者 我喜欢用 splice 等等
     array.splice(index, 1); // splice(索引,删除个数,追加的数据...) 注意:二维数组循环会出问题
// 4. 平铺的数组 转为树形数据
/**
 * 数组 转为树形数据
 * @param list 数组
 * @param rootValue 初始父节点值
 * @param id 当前id的字段名
 * @param parentId 父级id的字段名
 * @returns
 */
export const arrTransformTreeData = (list,rootValue,id= 'menuId',parentId = 'parentId') => {
  let array = []
  list.forEach((i) => {
    if (i[parentId] === rootValue) {
      const children = arrTransformTreeData(list, i[id])
      if (children.length) {
        i.children = children
      }
      array.push(i)
    }
  })
  return array
}
// 5. 根据id 查找对应的树形数据 这好像是之前百度的方法 
export const findTreeData = (list, searchId = 'id') => {
  for (let _i = 0; _i < list.length; _i++) {
    if (list[_i].id === searchId) {
      return list[_i];
    } else {
      if (list[_i].children && list[_i].children.length > 0) {
        let res = findTreeData(list[_i].children, searchId);
        if (res) {
          return res;
        }
      }
    }
  }
  return null;
};
/** 5.
 * 一维数组 转为指定 数组元素个数的 二维数组
 * @param arr 
 * @param num 二维数组内 一维数组内元素个数
 * @param eleNum 数组元素的个数 划分数
 * @returns 
 */
export const convertTwoDimensionalArr = (arr: [], num: number = 2, eleNum: number = 2) => {
  const len = arr.length
  const arrNum = len % eleNum === 0 ? len / eleNum : Math.floor((len / eleNum) + 1)  //得出多少份
  const res: any = [] //定义数组接受最终的数据
  for (let i = 0; i < arrNum; i++) {
    const newArr: any = arr.slice(i * num, i * num + num) //得到每份的数据
    res.push(newArr) //往res数组里加数据
  }
  return res
}
// 6. 截取字符串 符号对应的后面字符
export const subLastOfStr = (str: string, key='$') => {
  return str.slice(str.lastIndexOf(`${key}`) + 1);
};
/**
 * 7. 根据地址打开新窗口 可以修改窗口名称
 * @param url 地址
 * @param title 窗口名称
 */
function openWindow(url: string, title: string = '窗口名称') {
  const newWindow: any = window.open('about:blank', title);
  newWindow.document.title = title;
  let iframe = document.createElement('iframe');
  iframe.src = url;
  iframe.style.width = '100%';
  iframe.style.height = '100vh';
  iframe.style.margin = '0';
  iframe.style.padding = '0';
  iframe.style.overflow = 'hidden';
  iframe.style.border = 'none';
  newWindow.document.body.style.margin = '0';
  newWindow.document.body.appendChild(iframe);
}
// 8. 表单只能输入1-100数字
  <el-input
              type="number"
              :min="0"
              placeholder="再次确认比例"
              v-model="spotForm.repeatSpot"
              oninput="value=value.replace(/^0|[^0-9]/g,'');if(value>100)value=100;"
            >
// 9. 根据url地址 下载文件 并且修改文件名 (一定要注意文件名的后缀名 .xlsx或者别的格式之类的)
//传入url路径以及文件名即可
export function handleFileDown(url, fileName = "") {
  getBlob(url).then(blob => {
    console.log(blob, 'blob');
    downBlobFile(blob, fileName);
  });
}
// 获取blob格式数据
function getBlob(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };
    xhr.send();
  });
}
// 对blob格式文件 进行下载并改名
function downBlobFile(blob, filename, fileSuffixName) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const link = document.createElement("a");
    const body = document.querySelector("body");
    const url = window.URL.createObjectURL(blob);
    console.log(url, 'url');
    link.href = url;
    link.download = filename;
    // fix Firefox
    link.style.display = "none";
    body.appendChild(link);
    link.click();
    body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
  }
}
// 10. 对文本进行省略号处理 可以js(截取+拼接...就行) 也可以css 我这里写css处理的
// 这是可以控制文本几行显示省略号的
.text_exceed_4row_ellipsis {
  //white-space 指定元素内的空白怎样处理,属性值pre-wrap指保留空白符序列，但是正常地进行换行。
  white-space: pre-wrap;
  //overflow属性指定如果内容溢出一个元素的框，会发生什么;属性值hidden：内容会被修剪，并且其余内容是不可见的。
  overflow: hidden;
  //text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示;属性值ellipsis:显示省略符号 ... 来代表被修剪的文本。
  text-overflow: ellipsis;
  //下面这些组合完成实现多行文本溢出显示...效果
  // display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。
  // -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  // -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
  display: -webkit-box;
  word-break: break-all; // 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
// 这是单行显示省略号的
.text_exceed_1row_ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 11. 后端返回的文件流 进行下载
export const fileStreamDownload = res => {
  const fileName = getSessionStorage(fileNameKey, true) ?? ['文件名','.xlsx'];
  let blob = new Blob([res]);
  let a = document.createElement("a");
  const objectURL = window.URL.createObjectURL(blob);
  a.download = fileName[0] + "." + fileName[1];
  a.href = objectURL;
  a.click();
  URL.revokeObjectURL(objectURL);
  a = null;
};
// 如果下载的文件破损 注意 不是方法的问题 接口要加 responseType: 'blob'