JS常用工具类utils，持续更新中2022

1. 枚举

//枚举
class Enum {
    constructor(...args) {
        Array.from(args).forEach((arg) => {
            this[arg] = arg;
        });
    }
}

2 深拷贝

//深度拷贝
function deepclone(obj) {
    let rent;
    if(Array.isArray(obj)) {
        rent = [];
    }else if(obj.constructor === Object) {
        rent = {};
    }else {
        return obj;
    }
    if(Array.isArray(obj)) {
        for(var i = 0; i < obj.length; i++) {
            rent.push(deepclone(obj[i]));
        }
    }
    if(obj.constructor === Object) {
        for(var key in obj) {
            rent[key] = deepclone(obj[key]);
        }
    }
    return rent;
}

3 多对象合并

//多对象合并
function merage(deep = false, target = {}, ...args) {
    console.log(args)
    var src, copy, options, clone;
    for(var i = 0; i < args.length; i++) {
        options = args[i];
        if(options != null) {
            for(var key in options) {
                src = target[key];
                copy = options[key];
                if(src != copy) {
                    if(deep && copy && (copy.constructor === Object || Array.isArray(copy))) {
                        if(copy.constructor === Object) {
                            clone = src && src.constructor === Object ? src : {};
                        }else if(Array.isArray(copy)) {
                            clone = src && Array.isArray(src) ? src : [];
                        }
                        target[key] = merage(true, clone, copy);
                    }else {
                        target[key] = options[key];
                    }
                }
            }
        }
    }
    return target;
}

4. 数字转中文

function toChinesNum(num) {
        let changeNum = [
          "零",
          "一",
          "二",
          "三",
          "四",
          "五",
          "六",
          "七",
          "八",
          "九",
        ];
        let unit = ["", "十", "百", "千", "万"];
        num = parseInt(num);
        let getWan = (temp) => {
          let strArr = temp.toString().split("").reverse();
          let newNum = "";
          let newArr = [];
          strArr.forEach((item, index) => {
            newArr.unshift(
              item === "0" ? changeNum[item] : changeNum[item] + unit[index]
            );
          });
          let numArr = [];
          newArr.forEach((m, n) => {
            if (m !== "零") numArr.push(n);
          });
          if (newArr.length > 1) {
            newArr.forEach((m, n) => {
              if (newArr[newArr.length - 1] === "零") {
                if (n <= numArr[numArr.length - 1]) {
                  newNum += m;
                }
              } else {
                newNum += m;
              }
            });
          } else {
            newNum = newArr[0];
          }
          return newNum;
        };
        let overWan = Math.floor(num / 10000);
        let noWan = num % 10000;
        if (noWan.toString().length < 4) {
          noWan = "0" + noWan;
        }
        return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
      }
      console.log(toChinesNum(99));

5 解析url

  function GetUrlParam(urlStr) {
        // ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
        let url = urlStr.toString();
        let arrObj = url.split("?"); // split字符串分割成字符串数组,按照？分割
        let params = Object.create(null);
        if (arrObj.length > 1) {
          arrObj = arrObj[1].split("&");
          arrObj.forEach((item) => {
            item = item.split("=");
            params[item[0]] = item[1];
          });
        }
        return params;
      }
      console.log(
        GetUrlParam("http://192.168.1.12:9528/#/report?Id=359&name=ABC")
      );
      // 解析结果：{Id: '359', name: 'ABC'}

6 指定范围的随意数

 function RandomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

7 防抖:

输入框，事件被触发后,延迟n秒后再执行回调函数,如果在这n秒内事件被再次触发,则重新计时.

function debounce(fn, delay) {
        let timer;
        return function (...args) {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            fn.apply(this, args);
          }, delay);
        };
      }
    

8 节流

频繁触发比如按钮，单位时间内只执行一次

      function throttle(fn, delay) {
        let last = 0; // 上次触发时间
        return (...args) => {
          const now = Date.now();
          if (now - last > delay) {
            last = now;
            fn.apply(this, args);
          }
        };
      }

9 扁平化数组转树结构（导航栏）

function arrayToTree(items) {
        const result = []; // 存放结果集
        const itemMap = {}; //
        for (const item of items) {
          const id = item.id;
          const pid = item.pid;
          if (!itemMap[id]) {
            itemMap[id] = {
              children: [],
            };
          }
          itemMap[id] = {
            ...item,
            children: itemMap[id]["children"],
          };
          const treeItem = itemMap[id];
          if (pid === 0) {
            result.push(treeItem);
          } else {
            if (!itemMap[pid]) {
              itemMap[pid] = {
                children: [],
              };
            }
            itemMap[pid].children.push(treeItem);
          }
        }
        return result;
      }

10 利用图片的url直接下载图片

function downloadIamge(imgsrc, name) {
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
          let a = document.createElement("a"); // 生成一个a元素
          let event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "photo"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
      }

11 随机颜色

const generateRandomHexColor = () =>
        `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;

12. 实时事件，年月日时分秒

 // 12. 实时事件，年月日时分秒
      function getCurrentDate() {
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth();
        month = month + 1 > 12 ? 1 : month + 1;
        month = month > 9 ? month : "0" + month.toString();
        var day = d.getDate();
        var hour = d.getHours();
        hour = hour > 9 ? hour : "0" + hour.toString();
        var minute = d.getMinutes();
        minute = minute > 9 ? minute : "0" + minute.toString();
        var second = d.getSeconds();
        console.log(
          "实时时间",
          `${year}-${month}-${day} ${hour}:${minute}:${second}`
        );
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      }

13. 实时时间，时分秒

      function getCurrentHour() {
        var d = new Date();
        var hour = d.getHours();
        hour = hour > 9 ? hour : "0" + hour.toString();
        var minute = d.getMinutes();
        minute = minute > 9 ? minute : "0" + minute.toString();
        var second = d.getSeconds();
        console.log("实时时间", `${hour}:${minute}:${second}`);
        return `${hour}:${minute}:${second}`;
      }

14. 一般数组，转成2纬数组，list:array; group:二维数组每一项的长度

      // [1,2,3,4,5] => [[1,2],[3,4],[5]]
      function convertTo2DArray(list, group) {
        const res = [];
        for (let i = 0; i < list.length; i += group) {
          res.push(list.slice(i, i + group));
        }
        return res;
      }
      let newArr = convertTo2DArray([1, 2, 3, 4, 5, 6, 7], 5);

15. 把对象{a: ‘11’, b: ‘22’, c: ‘33’}转换成[‘a: 11’, ‘b: 22’, ‘c: 33’]

      function transformDict2List(dict) {
        if (!dict) return [];
        const list = [];
        for (const [key, value] of Object.entries(dict)) {
          list.push(`${key}: ${value}`);
        }
        return list;
      }

16. 数组[“a”, “b”]转换成a\r\b

      function normalizeList2Text(list) {
        if (!list || typeof list === "string") {
          return list;
        }
        let text = "";
        list.forEach((element) => {
          text += `${element}\r\n`;
        });
        return text;
      }

17. 模拟鼠标点击调用浏览器下载接口下载文件

      // response:{data:'Bold{}', fileName:''}
      function downloaFiles(response) {
        const blob = new Blob([response.data]);
        const src = URL.createObjectURL(blob);
        if (src && "download" in document.createElement("a")) {
          const elink = document.createElement("a");
          elink.download = `${decodeURI(response.fileName)}`;
          elink.href = src;
          elink.click();
        } else {
          warn("您的浏览器不支持下载功能", true);
        }
      }

18.打开一个新的 tab 页面

      function openNewTab(url) {
        // 首先创建一个空白页，防止被浏览器屏蔽打开新 tab 页
        const target = window.open("about:blank");
        if (target) {
          target.location.href = url;
        }
      }

19. 判断一个对象自身，是否包含了给定的所有属性

      function hasOwnProperties(obj, prop) {
        const props = Array.isArray(prop) ? prop : [prop];
        for (const p of props) {
          if (!Object.prototype.hasOwnProperty.call(obj, p)) {
            return false;
          }
        }
        return true;
      }

20. 遍历对象

      function forEach(obj) {
        if (typeof obj !== "object" || obj === null) {
          throw new TypeError("forEach can only iterate iteratable object");
        }
        for (const [key, value] of Object.entries(obj)) {
          fn(value, key, obj);
        }
      }

21. 转换对象的key 为 指定字段，比如label

      function key2label(obj) {
        if (typeof obj !== "object" || obj === null) {
          throw new TypeError("forEach can only iterate iteratable object");
        }
        const res = [];
        forEach(obj, (value, key) => {
          res.push({ label: key, value });
        });
        return res;
      }

22. 计算两个日期之间的间隔

   // 应用：距离过年还有多少天
      function dayDif(date1, date2) {
        Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);
      }
      dayDif(new Date("2021-11-3"), new Date("2022-2-1")); // 90
      /*
      *new Date("2021-11-3") 生成Wed Nov 03 2021 00:00:00 GMT+0800 (中国标准时间) 
      new Date("2021-11-3").getTime()获取时间戳（毫秒）
      Math.abs()绝对值， Math.ceil()向上取
      */

23. 日期位于一年中的第几天

 function dayOfYear(date) {
        Math.floor(
          (date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24
        );
      }

      dayOfYear(new Date()); // 307

24. 字符串首字母大写

  function capitalize(str) {
        str.charAt(0).toUpperCase() + str.slice(1);
      }
      capitalize("hello world"); // Hello world
      /*
      * chartAt()返回在指定位置的字符。
      */

25. 翻转字符串

  function reverse(str){ str.split('').reverse().join('')}

      reverse('hello world');   // 'dlrow olleh'

      // 26 生成随机字符串
      function randomSting(str){
        Math.random.toString(36).slice(2)
      }
      randomSting()

26. 生成随机字符串

  function randomSting(str){
        Math.random.toString(36).slice(2)
      }
      randomSting()

27. 截断字符串

function truncateStrig(str, len){
        return str.length < len ? str : `${str.slice(0, len - 3)}...`
      }
      truncateStrig('hi, i should be trancated because i an to looooonggggg', 50)

28. 赋值内容到剪贴板

    function copyToClipboard(text){ navigator.clipboard.writeText(text)}

      copyToClipboard("请直接粘贴我");

29. 获取选中的文本

function getSelectedText (){ 
        let aa =  window.getSelection().toString()
        console.log('aa',aa)
      }

      getSelectedText();

30. 滚动到页面顶部

 function goToTop(){ window.scrollTo(0, 0)}

      goToTop();

31. 随机布尔值

 function randomBoolean(){
       return  Math.random() > 0.5
       }
       let bb = randomBoolean()
       console.log('bb', bb)

手写promise（自己备份）

//手写promise
(function(){
    console.log("手写promise")
    const PENDING = "pengding";
    const RESLOVED = "resloved";
    const REJECTED = "rejected";
    function MyPromise(executor) {
        this.status = PENDING;
        this.data = undefined;
        this.callbacks = [];
        var resolve = (value) => {
            if(this.status !== PENDING) {
                return;
            }
            this.status = RESLOVED;
            this.data = value;
            if(this.callbacks.length > 0) {
                setTimeout(() => {
                    this.callbacks.forEach(callbackObj => {
                        callbackObj.onResloved(value);
                    })
                })
            }
        };
        var reject = (error) => {
            if(this.status !== PENDING) {
                return;
            }
            this.status = REJECTED;
            this.data = error;
            if(this.callbacks.length > 0) {
                setTimeout(() => {
                    this.callbacks.forEach(callbackObj => {
                        callbackObj.onRejected(error);
                    })
                })
            }
        };
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    };
    MyPromise.prototype.then = function (onResloved, onRejected) {
        return new MyPromise((resolve, reject) => {
            var self = this;
            function handle(callback) {
                try {
                    const result = callback(self.data);
                    if(result instanceof MyPromise) {
                        result.then(
                            value => {resolve(value)},
                            error => {reject(error)}
                        )
                    }else {
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            };
            if(this.status === PENDING) {
                this.callbacks.push({
                    onResloved: () => {
                        handle(onResloved);
                    },
                    onRejected: () => {
                        handle(onRejected);
                    }
                })
            }else if(this.status === RESLOVED) {
                setTimeout(() => {
                    handle(onResloved);
                });
            }else if(this.status === REJECTED) {
                setTimeout(() => {
                    handle(onRejected);
                });
            }
        });
    };
    MyPromise.prototype.catch = function(onRejected) {
        return this.then(undefined, onRejected);
    };
    MyPromise.resolve = function(value) {
        return new MyPromise((resolve, reject) => {
            resolve(value);
        });
    };
    MyPromise.reject = function(error) {
        return new MyPromise((resolve, reject) => {
            reject(error);
        });
    };
    //只有当所有promise成功时才成功
    MyPromise.all = function(promiss) {
        return new MyPromise(async (resolve, reject) => {
            let result = [];
            let isReject = false;
            for(var i = 0; i < promiss.length; i++) {
                try {
                    let rent = await promiss[i];
                    result.push(rent)
                } catch (error) {
                    result.push(error)
                    isReject = true;
                    break;
                }
            }
            if(!isReject) {
                resolve(result);
            }else{
                reject(result);
            }
        });
    };
    //其结果由第一个完成的promise决定
    MyPromise.race = function(promiss) {
        return new MyPromise(async (resolve, reject) => {
            let result = [];
            let isReject = false;
            for(var i = 0; i < promiss.length; i++) {
                try {
                    let rent = await promiss[i];
                    result.push(rent)
                } catch (error) {
                    result.push(error)
                    if(i = 0) {
                        isReject = true;
                        break;
                    }
                }
            }
            if(!isReject) {
                resolve(result);
            }else{
                reject(result);
            }
        });
    };
    window.MyPromise = MyPromise;
})();