JS常用10个方法

前端JS常用10个方法

1. 前端通过请求后台，把blob 数据流转为excel

// 下载导出excel 后台版
	/**
   * @param data 后台接口的文件流
   * @param fileName 需要下载的文件名
   */
const excelDownload = (data, fileName) => {
    const blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
    const virtualLink = document.createElement('a')
    virtualLink.download = decodeURIComponent(escape(fileName)) // 对文件名乱码进行编解码
    virtualLink.style.display = 'none'
    virtualLink.href = window.URL.createObjectURL(blob)
    document.body.appendChild(virtualLink)
    virtualLink.click()
    window.URL.revokeObjectURL(virtualLink.href) // 释放 URL 对象
    virtualLink.remove() // 移除a标签
}

2. 遍历修改树形结构中的对象的key

const changeKey = (arry=[], newObj) => {
	/**
   * @param arry 需要修改的数据对象
   * @param newObj 需要修改的key的对应关系对象
   */
    arry.forEach(item => {
        // 遍历item的key  找到对应key的值 
        for (const key in item) {
            const newKey = newObj[key]
            if (newKey) {
                // 删除旧key对应的值 把值赋给新key
                item[newKey] = item[key]
                delete item[key]
            }
        }
        // 此处以子节点为children为例 继续调用修改即可
        if (item.children && item.children.length > 0) {
            changeKey(item.children)
        }
    })
}

例:

const newObj = { 'label': 'name' }  修改key的对应关系 label->name
let data = [{ children: [{ label: '示例1-1' }], labe: "示例1", children: [] }, { label: '示例2', children: [{ label: '示例2-1', children: [{ label: '示例2-1-1' }] }] }]
changeKey(data ,newObj)

3. 根据键值对 返回数组中的当前对象 如果没有 返回 null

	/**
   * @param arr 需要查询的数据对象
   * @param key 需要查询的key值
   * @param value 需要查询的对应key值的value值
   */
const getElementByAttr = (arr, key, value) => {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i][key] === value) {
            return arr[i]
        }
    }
    return null
}

4. 数组排序 (基于数组的sort)

	/**
   * @param type 需要排序的方式 
   */
	// type 1：从小到大 2：从大到小 3：随机
const arraySort = (arr, type = 1) => {
    return arr.sort((a, b) => {
        switch (type) {
            case 1:
                return a - b;
            case 2:
                return b - a;
            case 3:
                return Math.random() - 0.5;
            default:
                return arr;
        }
    })
}

5. 数组去重 (基于Set)

	/**
   * @param type 需要排序的方式 
   */
const arrayUnique = (arr=[]) => {
    if (Array.hasOwnProperty('from')) {
        return Array.from(new Set(arr));
    } else {
        var n = {}, r = [];
        for (var i = 0; i < arr.length; i++) {
            if (!n[arr[i]]) {
                n[arr[i]] = true;
                r.push(arr[i]);
            }
        }
        return r;
    }
}

6. 在字符串指定索引位置 插入新的一段字段串 并返回修改后的值

	/**
   * @param soure 需要插入的字符串原数据
   * @param index 需要插入的指定位置(索引值)
   * @param newStr 需要插入新的一段字符串
   */
const insertStr = (soure, index=0, newStr) => {
    return soure.slice(0, index) + newStr + soure.slice(index);
}

例:

			let str = 'aefg';
            // 给导出的汇总表插入一个title
            let resultStr = insertStr(str,1,"bcd");
            // 输出 'abcdefg'

7. 主动去触发dom上的一个事件

	/**
   * @param Node 原生node节点对象
   * @param EventType 需要触发的事件名称 字符串类型
   */
const triggerEvent = (Node, EventType) => {
    if (EventType in Node) Node[EventType]()
}

例:

			let div = document.getElementById("div")
            triggerEvent(div,'click')

8. 获取上传图片的分辨率大小

	/**
   * @param file 上传的文件
   * @param width 需要的分辨率宽
   * @param height 需要的分辨率高
   */
const isSize = (file, width, height) => {
    return new Promise((resolve, reject) => {
        let filereader = new FileReader();
        filereader.onload = (e) => {
            let src = e.target.result;
            const image = new Image();
            image.onload = function () {
                if (
                    (width && this.width != width) ||
                    (height && this.height != height)
                ) {
                    alert("请上传按" + width + "*" + height + "等比缩放的图片");
                    reject();
                } else {
                    resolve();
                }
            };
            image.onerror = reject;
            image.src = src;
        };
        // file readAsDataURL 方法会读取指定的 Blob 或 File 对象。
        // 用组件库上传的文件貌似不可以   组件库的文件存放在file-list 数组 (这个可以直接readAsDataURL)
        filereader.readAsDataURL(file);
    });
}

9. 解决下载超时 不用请求后台二进制文件流 利用浏览器下载

	/**
   * @param filePath 参数文件地址(根据需求自行拼接)
   * @param fileName 文件名(参数无用)
   * @param url 请求的地址
   */
const exportData = (filePath, fileName, url) => {
    const a = document.createElement("a"); // 创建a标签
    a.download = fileName;
    // ?后面是参数  自行添加
    let url = `${url}?filePath=${filePath}`;
    a.setAttribute("href", url); // href链接
    a.click(); // 自执行点击事件
};

注: 此方法设置文件名无效，是直接请求的服务器上的文件(服务器上文件名叫什么,下载下来就叫什么)

10. 函数防抖

/**
   * @desc 函数防抖  合并版
   * @param func 目标函数
   * @param wait 延迟执行毫秒数
   * @param immediate true - 立即执行， false - 延迟执行
   */
const debounce = (func, wait, immediate) => {
    let timer;
    return function () {
        let context = this,
            args = arguments;

        if (timer) clearTimeout(timer);
        if (immediate) {
            let callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait);
            if (callNow) func.apply(context, args);
        } else {
            timer = setTimeout(() => {
                func.apply(context, args);
            }, wait)
        }
    }
}