前端开发中常用的工具函数

前言

记录自己日常开发中，常用到的一些工具函数，如果有问题欢迎大家指正，谢谢~

---

1. 根据传入的对象构造url

/**
* 可以根据传递的对象构造url 常用在get请求或者链接跳转
* 例如 user/userList  {id:"123",name:"小王"}
* 返回 user/userList?id=123&name=小王
*/
export function createSearch(url, params) {
    const query = Object.keys(params).reduce((acc, cur) => {
        debugger
        if (params[cur]) {
            if (!acc) return `?${acc}=${params[cur]}`;
            return `${acc}&${cur}=${params[cur]}`
        }
        return acc
    }, '')
    return `${url}${query}`
}

2. JSON格式容错判断

/**
* JSON在 JSON.parse 的时候,在参数为 undefined、null 或者不合规时，会报错
* 所以在 JSON.parse 时候应该进行容错处理 可以简单封装成一个函数，放在项目中特定的文件中进行维护
* 对异常进行捕获 
*/

export const parse = <T = any> (text: string,func?: (test: T) => any ) => {
    let parsedString: strng | T = "";
    try {
        parsedString = JSON.parse(text);
    } catch (error) {
        parsedString = text;
    }
    if(typeof func === "function") return func(parsedString as T);
    return parsedString;
}

3. 一维数组去重

/**
* 一维数组或者一维对象数组去重
* @params arr 要去重的数据
* @params key 去重字段
*/
export const removeDuplicates = function (arr： any[], key?: string): any[]  {
    if (key) {
        const map = new Map();
        return arr.filter((item) => !map.has(item[key]) && map.set(item[key], 1))
    } else {
        return [... new Set(arr)]
    }
}


// [{name:"123"},{name:"456"},{name:"123"}]  => [{name:"123"},{name:"456"}]

4. 解析url中的参数

/**
* 解析url参数
* @params url 要解析的参数
*/
export const getSearcParamsUtil = function (url: string): Record<string, any>  {
    const result = {}

    // 取url中的参数部分
    const str = url.substr(url.indexOf('?') + 1)
    // 将参数部分按照 & 分割为数组
    const paramsArr = str.split('&')
    
    paramsArr.forEach(item => {
        const params = item.split('=');
        result[params[0]] = params[1];
    });
    return result
}

5. 解析带有HTML实体的字符串

/**
* 在某些情况下，后端在入库存储时可能会将HTML实体，例如：换行、引号等进行转义
* 但是在读库的时候又没有进行反转义，这时候在回填的时候可能会出现文本问题
*
* @params str 
*/
export const decodeHtmlEntities = (str?: string)  {
    if(!str) return "";
    else{
        let result = "";
        const span = document.createElement("span");
        span.innerHTML = str;
        span.childNodes?.forEach((v)=>result += v?.nodeValue);
        return result;
    }
}

6. 使用 a 标签下载文件

HTML <a> 元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

<a>元素的 href 和 download 是我们下载文件所需要的两个属性。

download 可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中()，这些浏览器会忽视download属性，文件名不变。简而言之，跨域会导致download属性无效。另外再说一下 target 属性

target _blank打开新页面  _self在本身页面中打开

 // GET 下载文件   
 const download = (path：sring, target?: "_blank" | "_self") => {
        const a = document.createElement("a");
        a.download = "";
        a.target = target ?? "_self";
        a.href = path;
        a.style.display = "none";

        // 向body的子节点末尾添加上面的 a 标签
        document.body.appendChild(a);
        a.click();
        // 触发下载之后，移除 a 标签
        document.body.removeChild(a);
 }






    /***
     * GET POST 使用Blob（二进制流）下载文件
     * 
     * 正常情况下 axaios 或者request 不会处理二进制数据，即：会去接收但是不会去处理，需要在请求的时候设置  responseType: "blob" 
     * 拿到文件流之后，这时候文件流就会被保存在内存里。需要我们生成一个 URL 来实现下载，，而生成的URL 就是文件流在内存中的地址（这个地址为临时的，浏览器在 document 卸载时，会自动释放它们）
     * 我们可以通过 URL.createObjectURL() 方法生成一个链接
     * 
     * 这里用了Blob对象，该方法的意思是用从服务器接收到的文件流创建了一个blob对象，
     * 并使用该blob创建一个指向类型数组的URL，将该url作为a标签的链接目标，然后去触发a标签的点击事件从而实现下载功能。
     * 
     * @ requestFn 文件导出的异步请求 
     * @ fileName 文件名称
    */
    const downloadBlod = async (requestFn, fileName) => {
        const { data, response } = await requestFn();
        const contentType = response.headers.get("Content-type")?.split(";")?.[0]; //获取请求的类型
        let reFileName = window.decodeURI(response.headers.get("Content-Disposition")?.split("=")?.[0]);  //获取请求文件名称

        if (["undefined", "null"].includes(reFileName)) reFileName = fileName;
        if (contentType === "application/json") return false; // 接口未正常导出文件时
        // 接口正常导出文件时 处理二进制文件流
        if (contentType === "application/octet-stream") { // 非IE下载
            const blob = new Blob([data], { type })
            if ("download" in document.createElement("a")) {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.setAttribute('download', reFileName);// a标签的 download 属性可以指定文件的名称

                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a); //移除 a 标签 
                URL.revokeObjectURL(url); //释放URL对象
            } else window.navigator.msSaveBlob(blob, reFileName);  //IE下载
            return true;
        }
        return false;

    }

    // 使用
    document.getElementById('down').onclick = async () => {
        downloadBlod(
            () => { exportRequest({ responseType: "blob", getResponse: true }) }, // 导出的异步请求
            "文件导出.xls"
        )
    }

7. 递归获取对象的key，如果对象不存在某个属性或属性值未获取到则返回默认的值

const user = {
  info: {
    name: "张三",
    address: { home: "Shaanxi", company: "Xian" },
  },
};


// obj是获取属性的对象，path是路径，fallback是默认值
function get(obj, path, fallback) {
  const parts = path.split(".");
  const key = parts.shift();
  if (typeof obj[key] !== "undefined") {
    return parts.length > 0 ?
      get(obj[key], parts.join("."), fallback) :
      obj[key];
  }
  // 如果没有找到key返回fallback
  return fallback;
}

console.log(get(user, "info.name")); // 张三
console.log(get(user, "info.address.home")); // Shaanxi
console.log(get(user, "info.address.company")); // Xian
console.log(get(user, "info.address.abc", "fallback")); // fallback



另外一种方法
function get(obj: any, path: string, fallback: any) {
let parts = path.split('.');
return parts.reduce((a, b) => a && a[b], obj) || fallback
}
但是由于reduce会有循环，即使已经undefined，方法还是会继续循环下去，不会及时停止，增加不必要的执行次数