JS的實用工具如何使用

這篇文章主要介紹“JS的實用工具如何使用”，在日常操作中，相信很多人在JS的實用工具如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS的實用工具如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

計算距離下次生日還有多少天

注意這里借助 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)
      )
    }

回到頂部

    // 這里我把 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)
    }

復制文本

    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

防抖/節流

簡單介紹

• 防抖：指定時間內 頻繁觸發一個事件，以最后一次觸發為準

• 節流：指定時間內 頻繁觸發一個事件，只會觸發一次

應用場景有很多比如:

防抖是： 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);
      };
    }

過濾特殊字符

    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

常用正則判斷

    // 校驗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);
    };

初始化數組

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

將 RGB 轉換為十六進制

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

檢測是否是一個函數

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

檢測是否為一個安全數組

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

檢測對象是否為一個安全對象

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

到此，關于“JS的實用工具如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！