最新要闻

广告

手机

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

光庭信息跌4.57% 2021上市超募11亿2022扣非降74% 时快讯

 搜狐汽车全球快讯 | 大众汽车最新专利曝光：仪表支持拆卸 可用手机、平板替代-环球关注

搜狐汽车全球快讯 | 大众汽车最新专利曝光：仪表支持拆卸 可用手机、平板替代-环球关注

家电

  1. 首页
  2. 移动通信
  3. 内容

JS必学的11个工具方法(避免重复造轮子) 世界快看

来源：博客园


(资料图)

1. 计算距离下次生日还有多少天

注意这里借助moment实现

getBirthdayFun(){       // 首先要获取到今年的生日      let birthdayTime = moment().format("YYYY-") + "12-19"      // 通过时间戳  去判断当前的时间戳是否大于今年生日的时间戳       if (moment().unix() >= moment(birthdayTime).unix()) {        // 如果大于的话，那么就在今年的生日上再添加一年，已达到获取下次生日的时间        birthdayTime = moment(birthdayTime).add(1, "y").format("YYYY-MM-DD")      }      // 这个直接通过计算 （下次生日的时间戳 - 当前日期的时间戳) / (60 * 60 * 24) 最后求出来的就是 XX 天      return parseInt(        (moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)      )    }

2. 回到顶部

// 这里我把 vue3 的案例拿过来    const bindTop = () => {       // 方法一 这样可以实现，但是效果不太行       window.scrollTo(0, 0)       document.documentElement.scrollTop = 0;              // 方法二 通过计时器去滚动 视觉上会丝滑一些，没有太大的卡顿效果      const timeTop = setInterval(() => {        // 去控制他的滑行距离        document.documentElement.scrollTop = scrollTopH.value -= 50        // 当滑到顶部的时候记得清除计时器(*) 重点        if (scrollTopH.value <= 0) {          clearInterval(timeTop)        }      }, 10)    }

3.过滤特殊字符

function filterCharacter(str){        // 首先设置一个模式        let pattern = new RegExp("[`~!@#$^&*()=：”“"。，、？|{}":;"%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；]")        let resultStr = "";        for (let i = 0; i < str.length; i++) {            // 主要通过 replace ，pattern 规则 去把字符替换成空 最后拼接在 resultStr            resultStr = resultStr + str.substr(i, 1).replace(pattern, "");        }        // 当循环结束的时候返回最后结果 resultStr        return resultStr;    }        // 示例    filterCharacter("gyaskjdhy12316789#$%^&!@#1=123,./[") // 结果:gyaskjdhy123167891123

4. 检测对象是否为一个安全对象

// 首先要去判断 当前对象是否为有效对象     const isVaildObject = (obj) => {        return typeof obj === "object" && !Array.isArray(obj) && Object.keys(obj).length    }    // 这里直接用上面的函数 如果有效就返回本身，无效就返回空对象    const safeObject = obj => isVaildObject(obj) ? obj : {}

5. 检测是否为一个安全数组

// 检测是否为一个安全数组,若不是返回空数组  这里借助isArray 方法  const safeArray = (array) => {    return Array.isArray(array) ? array : []  }

6. 检测是否是一个函数

// 检测是否是一个函数  其实写法以后直接 isFunction 就好了，避免重复写判断    const isFunction = (obj) => {        return typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";    };

7. 将 RGB 转换为十六进制

function getColorFun(r,g,b) {       return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)    }        getColorFun(178,232,55) // 这里输出的是 #b2e837

8. 初始化数组

// fill()方法 是 es6新增的一个方法 使用指定的元素填充数组,其实就是用默认内容初始化数组    const arrList = Array(6).fill()    console.log(arrList)  // 此处打印的是 ["","","","","",""]

9. 常用正则判断

// 校验2-9位文字 不符合为 false  符合为 true    const validateName = (name) => {      const reg = /^[\u4e00-\u9fa5]{2,9}$/;      return reg.test(name);    };    // 校验手机号    const validatePhoneNum = (mobile) => {      const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;      return reg.test(mobile);    };    // 校验6到18位大小写字母数字下划线组成的密码    const validatePassword = (password) => {      const reg = /^[a-zA-Z0-9_]{6,18}$/;      return reg.test(password);    };

10. 防抖/节流

简单介绍

  • 防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
  • 节流：指定时间内 频繁触发一个事件，只会触发一次

应用场景有很多比如:

防抖是： input搜索，用户在不断输入内容的时候，用防抖来减少请求的次数并且节约请求资源

节流：场景普遍就是按钮点击，一秒点击 10 下会发起 10 次请求，节流以后 1 秒点再多次，都只会触发一次

// 防抖    // fn 需要防抖的函数，delay 为定时器时间    function debounce(fn,delay){        let timer =  null // 用于保存定时器        return function () {             // 如果timer存在 就清除定时器，重新计时            if(timer){                clearTimeout(timeout);            }            //设置定时器，规定时间后执行真实要执行的函数            timeout = setTimeout(() => {               fn.apply(this);            }, delay);        }    }        // 节流    function throttle(fn) {      let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null      return function () {        if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行        timer = setTimeout(() => {          fn.apply(this, arguments);           // 最后在setTimeout执行完毕后再把标记设置为true(关键)           // 表示可以执行下一次循环了。          timer = null;        }, 1000);      };    }

11. 复制文本

const copyText = (text) => {        // clipboardData 在页面上将需要的东西复制到剪贴板上        const clipboardData = window.clipboardData        if (clipboardData) {          clipboardData.clearData()          clipboardData.setData("Text", text)          return true        } else if (document.execCommand) {  // 注意 document.execCommand 已弃用 但是有些浏览器依旧支持 用的时候记得看兼容情况          // 通过创建 dom 元素，去把要复制的内容拿到           const el = document.createElement("textarea")          el.value = text          el.setAttribute("readonly", "")          el.style.position = "absolute"          el.style.left = "-9999px"          document.body.appendChild(el)          el.select()          // 拷贝当前内容到剪贴板          document.execCommand("copy")          // 删除 el 节点          document.body.removeChild(el)          return true        }        return false      }      copyText("hello!") // ctrl + v = copyText  | true

有更好的意见和建议不另赐教哈

关键词：