【整理分享】11個JS必須學會的實用工具方法

    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

    // 防抖
    // 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)  // 此處列印的是 ['','','','','','']

    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 : {}