js常用快捷封装方法utils工具

Hi_MrXiao

于 2023-12-19 10:15:00 发布

阅读量457

点赞数 4

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Hi_MrXiao/article/details/135068304

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

判断数据是否为空

function isEmpty(data){
    return data == undefined || data == "undefined" || data == null || data == "null" || data == '' || data.length == 0;
}

判断是否为数组

function isArray(arr){
    return Object.prototype.toString.call(arr) === '[object Array]';;
}

判断是否为对象

function isObject(obj){
    return Object.prototype.toString.call(obj) === '[object Object]';;
}

浅拷贝

/** // 扩展运算符浅拷贝
    var newObj = { ...obj }

    // 通过Object.assign方法实现
    Object.assign(newObj, obj[, obj2,...])
*/

// forin拷贝
function shallowClone(obj){
    const newObj = {};
    for (const key in obj1) {
        if (obj1.hasOwnProperty(key)) {
            newObj[key] = obj1[key];
        }
    }
    return newObj
}

深拷贝


function deepClone(obj) {
    let newObj;
    if (Array.isArray(obj)) {
        newObj = [];
    } else if (obj.constructor === Object) {
        newObj = {};
    } else {
        return obj;
    }
    if (Array.isArray(obj)) {
        for (var i = 0; i < obj.length; i++) {
            newObj.push(deepclone(obj[i]));
        }
    }
    if (obj.constructor === Object) {
        for (var key in obj) {
            newObj[key] = deepclone(obj[key]);
        }
    }
    return newObj;
}

翻转字符串

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

生成随机指定位数的字符串

function randomSting(len){
    var chartStr="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
    var str=""
    for (let index = 0; index < len; index++) {
      var chartI=Math.floor(Math.random()*chartStr.length)
      str+=chartStr.charAt(chartI)
    }
    return str
},

滚动到页面顶部

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

随机布尔值

function randomBoolean() {
    return Math.random() > 0.5
}

获取url地址指定属性的值

function getUrlKeyValue(name){
    let url = window.location.search;
    let paramStr = url.substring(url.indexOf("?") + 1, url.length);
    let paramArray = paramStr.split("&");
    let value = "";
    if(this.isEmpty(paramArray)){
        return  value;
    }
    for (let i = 0;   i < paramArray.length; i++) {
        let paramKeyValue = paramArray[i];
        if (paramKeyValue.indexOf(name) == 0) {
            value = paramKeyValue.substring(name.length + 1, paramKeyValue.length);
            break;
        }
    }
    return value;
}
// "http://192.168.1.12:9528/user?id=2&name=test"  // getUrlKeyValue("id")   2

解析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;
}

// getUrlParam("http://192.168.1.12:9528/user?id=2&name=test")  // {id: '2', name: 'ABtestC'}

通过已加载的图片标签得到图片真实的宽高

async function getImageSize(img) {
    // naturalWidth
    if (img.naturalWidth) {
        // 适用于Firefox/IE9/Safari/Chrome/Opera浏览器
        return {
            width: img.naturalWidth,
            height: img.naturalHeight
        }
    } else {
        // 如果img元素不存在naturalWidth属性，则需要使用图片地址重新加载获取
        return await this.getImageSizeByUrl(img.src);
    }
}

// 使用Image对象获取图片真实宽高
function getImageSizeByUrl(url) {
    console.log('new---',url)
    return new Promise(function (resolve, reject) {
        let image = new Image();
        image.onload = function () {
            resolve({
                width: image.width,
                height: image.height
            });
        };
        image.onerror = function () {
            reject(new Error('error'));
        };
        image.src = url;
    });
}

复制元素上的内容到剪贴板

function copyToClipboard(dom) { 
    // navigator.clipboard.writeText(text) 
    if(document.execCommand){
      var range
      if (document.body.createTextRange) {
          range = document.body.createTextRange();
          range.moveToElementText(dom);
          range.select();
      } else if (window.getSelection) {
          var selection = window.getSelection();
          range = document.createRange();
          range.selectNodeContents(dom); // 创建选取内容范围
          selection.removeAllRanges();  // 清除已选择的内容
          selection.addRange(range);   // 添加选取内容，模拟用户选取
          /*if(selection.setBaseAndExtent){
              selection.setBaseAndExtent(text, 0, text, 1);
          }*/
      } else {
          console.warn("none");
      }
      document.execCommand('copy');   // 触发复制事件
      alert("复制成功")
      document.execCommand("unselect", "false", null) // 取消选取区域
    }else{
      var texts=dom.innerText
      if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        navigator.clipboard.writeText(texts).then(function() {
            alert("复制成功")
        }, function() {
            alert("复制失败")
        });
      }   
    }
}

指定范围的随意数

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

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

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

节流
频繁触发比如按钮，一定时间内只执行一次

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

利用图片的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;
}

随机颜色

function generateRandomHexColor(){
    return "#"+Math.floor(Math.random() * 0xffffff).toString(16)
}

实时事件，年月日时分秒

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();
    return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
}

实时时间，时分秒

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();
    return hour+":"+minute+":"+second;
}

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

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

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

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;
}

计算两个日期之间的间隔

// 例如：距离节假日还有多少天
function dayDif(date1, date2) {
    return Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);
}
dayDif(new Date("2022-10-1"), new Date("2023-1-1"));  // 92

日期位于一年中的第几天

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

dayOfYear(new Date()); // 307

字符串首字母大写

function capitalize(str) {
    str.charAt(0).toUpperCase() + str.slice(1);
}

数字转中文

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);
}