JS的實(shí)用工具如何使用

這篇文章主要介紹“JS的實(shí)用工具如何使用”，在日常操作中，相信很多人在JS的實(shí)用工具如何使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JS的實(shí)用工具如何使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

計(jì)算距離下次生日還有多少天

注意這里借助 moment 實(shí)現(xiàn)

    getBirthdayFun(){
       // 首先要獲取到今年的生日
      let birthdayTime = moment().format('YYYY-') + '12-19'
      // 通過(guò)時(shí)間戳  去判斷當(dāng)前的時(shí)間戳是否大于今年生日的時(shí)間戳 
      if (moment().unix() >= moment(birthdayTime).unix()) {
        // 如果大于的話，那么就在今年的生日上再添加一年，已達(dá)到獲取下次生日的時(shí)間
        birthdayTime = moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
      }
      // 這個(gè)直接通過(guò)計(jì)算 （下次生日的時(shí)間戳 - 當(dāng)前日期的時(shí)間戳) / (60 * 60 * 24) 最后求出來(lái)的就是 XX 天
      return parseInt(
        (moment(birthdayTime).unix() - moment().unix()) / (60 * 60 * 24)
      )
    }

回到頂部

    // 這里我把 vue3 的案例拿過(guò)來(lái)
    const bindTop = () => {
       // 方法一 這樣可以實(shí)現(xiàn)，但是效果不太行
       window.scrollTo(0, 0)
       document.documentElement.scrollTop = 0;
        
      // 方法二 通過(guò)計(jì)時(shí)器去滾動(dòng) 視覺(jué)上會(huì)絲滑一些，沒(méi)有太大的卡頓效果
      const timeTop = setInterval(() => {
        // 去控制他的滑行距離
        document.documentElement.scrollTop = scrollTopH.value -= 50
        // 當(dāng)滑到頂部的時(shí)候記得清除計(jì)時(shí)器(*) 重點(diǎn)
        if (scrollTopH.value <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    }

復(fù)制文本

    const copyText = (text) => {
        // clipboardData 在頁(yè)面上將需要的東西復(fù)制到剪貼板上
        const clipboardData = window.clipboardData
        if (clipboardData) {
          clipboardData.clearData()
          clipboardData.setData('Text', text)
          return true
        } else if (document.execCommand) {  // 注意 document.execCommand 已棄用 但是有些瀏覽器依舊支持 用的時(shí)候記得看兼容情況
          // 通過(guò)創(chuàng)建 dom 元素，去把要復(fù)制的內(nèi)容拿到 
          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()
          // 拷貝當(dāng)前內(nèi)容到剪貼板
          document.execCommand('copy')
          // 刪除 el 節(jié)點(diǎn)
          document.body.removeChild(el)
          return true
        }
        return false
      }
      copyText('hello!') // ctrl + v = copyText  | true

防抖/節(jié)流

簡(jiǎn)單介紹

• 防抖：指定時(shí)間內(nèi) 頻繁觸發(fā)一個(gè)事件，以最后一次觸發(fā)為準(zhǔn)

• 節(jié)流：指定時(shí)間內(nèi) 頻繁觸發(fā)一個(gè)事件，只會(huì)觸發(fā)一次

應(yīng)用場(chǎng)景有很多比如:

防抖是： input搜索，用戶在不斷輸入內(nèi)容的時(shí)候，用防抖來(lái)減少請(qǐng)求的次數(shù)并且節(jié)約請(qǐng)求資源

節(jié)流：場(chǎng)景普遍就是按鈕點(diǎn)擊，一秒點(diǎn)擊 10 下會(huì)發(fā)起 10 次請(qǐng)求，節(jié)流以后 1 秒點(diǎn)再多次，都只會(huì)觸發(fā)一次

下面我們來(lái)實(shí)現(xiàn)

    // 防抖
    // fn 需要防抖的函數(shù)，delay 為定時(shí)器時(shí)間
    function debounce(fn,delay){
        let timer =  null  // 用于保存定時(shí)器
        return function () { 
            // 如果timer存在 就清除定時(shí)器，重新計(jì)時(shí)
            if(timer){
                clearTimeout(timeout);
            }
            //設(shè)置定時(shí)器，規(guī)定時(shí)間后執(zhí)行真實(shí)要執(zhí)行的函數(shù)
            timeout = setTimeout(() => {
               fn.apply(this);
            }, delay);
        }
    }
    
    // 節(jié)流
    function throttle(fn) {
      let timer = null; // 首先設(shè)定一個(gè)變量，沒(méi)有執(zhí)行定時(shí)器時(shí),默認(rèn)為 null
      return function () {
        if (timer) return; // 當(dāng)定時(shí)器沒(méi)有執(zhí)行的時(shí)候timer永遠(yuǎn)是false,后面無(wú)需執(zhí)行
        timer = setTimeout(() => {
          fn.apply(this, arguments);
           // 最后在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true(關(guān)鍵)
           // 表示可以執(zhí)行下一次循環(huán)了。
          timer = null;
        }, 1000);
      };
    }

過(guò)濾特殊字符

    function filterCharacter(str){
        // 首先設(shè)置一個(gè)模式
        let pattern = new RegExp("[`~!@#$^&*()=：”“'。，、？|{}':;'%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；]")
        let resultStr = "";
        for (let i = 0; i < str.length; i++) {
            // 主要通過(guò) replace ，pattern 規(guī)則 去把字符替換成空 最后拼接在 resultStr
            resultStr = resultStr + str.substr(i, 1).replace(pattern, '');
        }
        // 當(dāng)循環(huán)結(jié)束的時(shí)候返回最后結(jié)果 resultStr
        return resultStr;
    }
    
    // 示例
    filterCharacter('gyaskjdhy12316789#$%^&!@#1=123,./[') // 結(jié)果:gyaskjdhy123167891123

常用正則判斷

    // 校驗(yàn)2-9位文字 不符合為 false  符合為 true
    const validateName = (name) => {
      const reg = /^[\u4e00-\u9fa5]{2,9}$/;
      return reg.test(name);
    };

    // 校驗(yàn)手機(jī)號(hào)
    const validatePhoneNum = (mobile) => {
      const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
      return reg.test(mobile);
    };

    // 校驗(yàn)6到18位大小寫(xiě)字母數(shù)字下劃線組成的密碼
    const validatePassword = (password) => {
      const reg = /^[a-zA-Z0-9_]{6,18}$/;
      return reg.test(password);
    };

初始化數(shù)組

    // fill()方法 是 es6新增的一個(gè)方法 使用指定的元素填充數(shù)組,其實(shí)就是用默認(rèn)內(nèi)容初始化數(shù)組
    const arrList = Array(6).fill()
    console.log(arrList)  // 此處打印的是 ['','','','','','']

將 RGB 轉(zhuǎn)換為十六進(jìn)制

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

檢測(cè)是否是一個(gè)函數(shù)

    // 檢測(cè)是否是一個(gè)函數(shù)  其實(shí)寫(xiě)法以后直接 isFunction 就好了，避免重復(fù)寫(xiě)判斷
    const isFunction = (obj) => {
        return typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";
    };

檢測(cè)是否為一個(gè)安全數(shù)組

  // 檢測(cè)是否為一個(gè)安全數(shù)組,若不是返回空數(shù)組  這里借助isArray 方法
  const safeArray = (array) => {
    return Array.isArray(array) ? array : []
  }

檢測(cè)對(duì)象是否為一個(gè)安全對(duì)象

    // 首先要去判斷 當(dāng)前對(duì)象是否為有效對(duì)象 
    const isVaildObject = (obj) => {
        return typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length
    }
    // 這里直接用上面的函數(shù) 如果有效就返回本身，無(wú)效就返回空對(duì)象
    const safeObject = obj => isVaildObject(obj) ? obj : {}

到此，關(guān)于“JS的實(shí)用工具如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！