前端工具函數

or0fun 發布于2019-05-23 12:19 / 3249人閱讀

摘要：將一級的數據結構處理成樹狀數據結構處理成樹狀結構，一般就是需要節點和父節點標識，或者需要考慮以哪個節點為根節點生成樹結構數據使用示例代碼將一級的數據結構處理成樹狀數據結構字段名稱比如父字段名稱比如根節點的父字段的值需要處理的數據是否

將一級的數據結構處理成樹狀數據結構

處理成樹狀結構，一般就是需要節點和父節點標識，或者需要考慮以哪個節點為根節點生成樹結構數據

// 使用示例代碼：
list: [{id: 1, pid: 0, name: 11}, {id: 2, pid: 1, name: 2}]
getTreeArr({ key: "id", pKey: "pid", data: list })
result: [
    {id: 1, pid: 0, name: 11, children: [
        {id: 2, pid: 1, name: 2}
    ]}
]

  /**
 * 將一級的數據結構處理成樹狀數據結構
 * @param {Object} obj {key, pKey, data}
 *  @param obj.key  字段名稱 比如id
 *  @param obj.pKey 父字段名稱 比如 pid
 *  @param obj.rootPValue 根節點的父字段的值
 *  @param obj.data 需要處理的數據
 *  @param obj.jsonData 是否深復制數據（默認是true）
 * @return {Array} arr
   */
  getTreeArr: (obj) => {
    if (!Array.isArray(obj.data)) {
      console.log("getTreeArr=>請傳入數組")
      return []
    }
    obj.jsonData = obj.jsonData === false ");true
    const arr = obj.jsonData ");let index = 0
      item.children = []
      arr.forEach(item1 => {
        // 得到樹結構關系
        if (item[obj.key] === item1[obj.pKey]) {
          item.children.push(item1)
        }
        // 判斷根節點
        if (item1[obj.key] !== item[obj.pKey]) {
          index++
        }
      })
      // 沒傳入根節點，根據當前數據結構得到根節點
      if (!("rootPValue" in obj) && index === arr.length) {
        arr1.push(item)
      }
    })
    // 傳入根節點，根據傳入的根節點組成樹結構
    if ("rootPValue" in obj) {
      arr.forEach(item => {
        if (item[obj.pKey] === obj.rootPValue) {
          arr1.push(item)
        }
      })
    }
    return arr1
  }

數組去重

數組去重方法有許多，還分為普通數組和對象數組，這里列舉了一些，并把其中優缺點分析了一下

  /**
   * 數組去重
   * @param {Array} data 要去重的數組
   * @param {String} key 作為去重依據的字段 (處理對象數組時需要傳入)
   * @return arr 返回處理后的數據
   */

根據對象的屬性不同去重

推薦使用

  handleRepeatArr ({ data, key }) {
    if (!Array.isArray(data)) {
      console.log("請傳入數組")
      return
    }
    const arr = []; const obj = {}
    data.forEach((item, index) => {
      const attr = key ");if (!obj[attr]) {
        obj[attr] = index + 1
        arr.push(item)
      }
    })
    return arr
  }

遞歸去重

缺點：會將數據默認排序

  handleRepeatArr ({ data, key }) {
    if (!Array.isArray(data)) {
      console.log("請傳入數組")
      return
    }
    /** 1.遞歸去重，缺點，會將數據默認排序 */
    // 先對數據做排序處理
    data = data.sort((item, item1) => {
      if (key) {
        return item[key] - item1[key]
      }
      return item - item1
    })
    // 遞歸去重
    function getData (index) {
      if (index >= 1) {
        // 判斷當前數據和下一條數據是否相等
        let result = key ");if (result) {
          data.splice(index, 1)
        }
        getData(index - 1)
      }
    }
    getData(data.length - 1)
    return data
  }

利用indexOf以及forEach

缺點：適合處理數組，不適合處理對象數組

  handleRepeatArr ({ data, key }) {
    if (!Array.isArray(data)) {
      console.log("請傳入數組")
      return
    }
    let arr = []
    data.forEach((item, index) => {
      // 如果當前元素在之后沒有出現過(后面出現的數據會保留)
      // let result = data.indexOf(item, index + 1)
      // 如果當前元素在之前沒有出現過(前面出現的數據會保留)
      let result = index === 0 ");if (result === -1) {
        arr.push(item)
      }
    })
    return arr
  }

new Set

缺點：適合處理數組，不適合處理對象數組

return [...new Set(data)]

雙層循環去重

缺點：占用內存高

  handleRepeatArr ({ data, key }) {
    if (!Array.isArray(data)) {
      console.log("請傳入數組")
      return
    }
    for (let i = 0, len = data.length; i < len; i++) {
      for (let j = i + 1; j < len; j++) {
        let result = key ");if (result) {
          data.splice(j, 1)
          len--
          j--
        }
      }
    }
    return data
  }

復制內容

復制成功后如果需要提示，需要自定義相關回調，當前函數使用的是element-ui的彈窗

  /**
   * 復制
   * @param {String} value 要復制的值
   */
  copyData (value) {
    const inputDom = document.createElement("input")
    inputDom.value = value
    document.body.appendChild(inputDom)
    inputDom.select() // 選擇對象
    document.execCommand("Copy") // 執行瀏覽器復制命令
    document.body.removeChild(inputDom) // 刪除DOM
    Message({
      type: "success",
      message: "復制成功"
    })
  }

a模擬window.open打開窗口

因為有些瀏覽器會默認攔截window.open，當需要函數中打開窗口，可以使用a標簽模擬window.open

  /**
   * a模擬window.open，不會被瀏覽器攔截
   * @param {String} url        a標簽打開的地址
   * @param {String} id         a標簽的ID
   * @param {String} targetType a標簽點擊打開的方式（當前頁面打開還是新窗口打開）
   */
  openWindow: (url, targetType = "_blank", id = "open", download = false) => {
    // 如果存在則刪除
    if (document.getElementById(id)) {
      document.body.removeChild(document.getElementById(id))
    }
    const a = document.createElement("a")
    a.setAttribute("href", url)
    if (download) {
      a.setAttribute("download", url)
    }
    a.setAttribute("target", targetType)
    a.setAttribute("id", id)
    document.body.appendChild(a)
    a.click()
  }

得到想要的時間格式

這個在業務中用的比較頻繁

// 使用示例代碼：
switchTime(new Date(), "YYYY-MM-DD hh") // 返回 2019-05-22 11
switchTime(new Date(), "YYYYMMDD hh:mm:ss") // 返回 20190522 11:00:00

  /**
   * 傳入時間戳，轉換指定的時間格式
   * @param {Number} val      時間戳
   * @param {String} dateType 要得到的時間格式 例如 YYYY-MM-DD hh:mm:ss
   * @return dataStr 例如 YYYY-MM-DD hh:mm:ss
   */
  switchTime: (val = +new Date(), dateType = "YYYY-MM-DD hh:mm:ss") => {
    // 將字符串轉換成數字
    const timeStamp = +new Date(val)

    // 如果轉換成數字出錯
    if (!timeStamp) {
      return val
    }
    let str
    // 得到時間字符串
    const dateStr = new Date(timeStamp)
    str = dateType.replace("YYYY", dateStr.getFullYear())
    str = str.replace("MM", (dateStr.getMonth() + 1 < 10 ");"0" : "") + (dateStr.getMonth() + 1))
    str = str.replace("DD", (dateStr.getDate() < 10 ");"0" : "") + dateStr.getDate())
    str = str.replace("hh", (dateStr.getHours() < 10 ");"0" : "") + dateStr.getHours())
    str = str.replace("mm", (dateStr.getMinutes() < 10 ");"0" : "") + dateStr.getMinutes())
    str = str.replace("ss", (dateStr.getSeconds() < 10 ");"0" : "") + dateStr.getSeconds())

    return str
  }

時間顯示轉換

這個方法中需要應用到上一個方法，獲取當前時間，或者可以自行得到時間然后再去處理

假設當前時間為 2019-05-20 00:00:00
// 使用示例代碼：
timeView(new Date()) // 剛剛發布
timeView("2019-05-19 23:01:00") // 59分鐘前
timeView("2019-05-19 12:00:00") // 12小時前
timeView("2019-05-15 12:00:00") // 5天前
timeView("2019-04-15 12:00:00") // 04-15
timeView("2018-04-15 12:00:00") // 2018-04-15

  /**
   * 時間顯示
   */
  timeView: function (val) {
    const now = +new Date() // 當時時間
    const timeStamp = +new Date(val) // 需要處理的時間
    const result = now - timeStamp // 相差的時間戳
    const min = 60 * 1000 // 分鐘的毫秒數
    const hour = 60 * 60 * 1000 // 小時的毫秒數
    const day = 60 * 60 * 1000 * 24 // 日的毫秒數
    if (result / min < 1) {
      return "剛剛發布"
    } else if (result / min < 60) {
      return Math.floor(result / min) + "分鐘前"
    } else if (result / hour > 1 && result / hour < 24) {
      return Math.floor(result / hour) + "小時前"
    } else if (result / day > 1 && result / day < 7) {
      return Math.floor(result / day) + "天前"
    } else if (this.switchTime(now, "YYYY") === this.switchTime(timeStamp, "YYYY")) {
      return this.switchTime(timeStamp, "MM月DD日")
    } else {
      return this.switchTime(timeStamp, "YYYY年MM月DD日")
    }
  }

處理搜索欄參數

  getLocationSearch () {
    const str = window.location.search
    const arr = str.substr(1).split("&")
    const obj = {}
    for (const item of arr) {
      const data = item.split("=")
      obj[data[0]] = data[1]
    }
    return obj
  }

文件大小顯示轉換

// 使用示例代碼：
bytesToSize(12) // 12.0 B
bytesToSize(683468) // 667 KB
bytesToSize(4544) // 4.44 KB
bytesToSize(98223445) // 93.7 MB
bytesToSize(9822344566) // 9.15 GB

  bytesToSize (bytes) {
    if (bytes === 0) return "0 B"
    var k = 1024 // or 1024
    var sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
    var i = Math.floor(Math.log(bytes) / Math.log(k))
    return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i]
  }

對請求失敗的HTTP狀態碼做處理

  /**
   * 對請求失敗的HTTP狀態碼做處理
   * @param {Number} code     HTTP狀態碼
   * @param {String} message  錯誤提示
   * @return message 返回處理過的提示信息
   */
  requestError: (code, message) => {
    const statusCode = (code + "").replace(/[^0-9]+/g, "") - 0

    switch (statusCode) {
      case 400:
        return "Bad Request (錯誤的請求)"
      case 401:
        return "Unauthorized (請求要求身份驗證)"
      case 403:
        return "Forbidden (服務器拒絕請求)"
      case 404:
        return "NOT Found (服務器找不到請求的資源)"
      case 405:
        return "Bad Request (禁用請求中指定的方法)"
      case 406:
        return "Not Acceptable (無法使用請求的內容特性響應請求的網頁)"
      case 407:
        return "Proxy Authentication Required (需要代理授權)"
      case 408:
        return "Request Timed-Out (服務器等候請求時發生超時)"
      case 409:
        return "Conflict (服務器在完成請求時發生沖突。服務器必須在響應中包含有關沖突的信息)"
      case 410:
        return "Gone (請求的資源已被永久刪除)"
      case 411:
        return "Length Required (服務器不接受不含有效內容長度標頭字段的請求)"
      case 412:
        return "Precondition Failed (未滿足前提條件)"
      case 413:
        return "Request Entity Too Large (請求實體過大)"
      case 414:
        return "Request, URI Too Large (請求的 URI 過長)"
      case 415:
        return "Unsupported Media Type (不支持的媒體類型)"
      case 429:
        return "您的操作過于頻繁,請稍后重試"
      case 500:
        return "Internal Server Error (服務器內部錯誤)"
      case 501:
        return "Not Implemented (尚未實施)"
      case 502:
        return "Bad Gateway (錯誤網關)"
      case 503:
        return "Server Unavailable (服務不可用)"
      case 504:
        return "Gateway Timed-Out (網關超時)"
      case 505:
        return "HTTP Version not supported (HTTP 版本不受支持)"
      default:
        return message
    }
  }

通過key找到在列表中對應的名字

// 使用示例代碼：
list: [{key: "紅色", value: 1}]
getDataName({dataList: list, value: "value", label: "key", data: 1}) // 紅色

  /**
   * 通過key找到在列表中對應的顯示
   * @param {Object} obj
   *  @param obj.dataList 數據列表
   *  @param obj.value    數據的值對應的字段名稱   例如 "value"
   *  @param obj.label    數據的說明對應的字段名稱 例如 "label"
   *  @param obj.data     當前傳入的數據值
   * @return name        返回當前傳入值在數組中對應的名字
   */
  getDataName: (obj) => {
    let name = obj.data
    if (Array.isArray(obj.dataList) && obj.dataList.length > 0) {
      for (let i = 0; i < obj.dataList.length; i++) {
        if (obj.dataList[i][obj.value] === obj.data) {
          name = obj.dataList[i][obj.label]
        }
      }
    }
    return name
  }

代碼地址

工具庫地址

編寫一個驗證函數

云服務器 GPU云服務器前端工具函數工具函數工具函數封裝前端工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6955.html

前端面試題（3）現代技術

摘要：什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面，后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時，將導航頁傳輸到客戶端，其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。什么是單頁面應用(SPA)？單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續請求都無需再離開此頁目標：旨在用為用戶提供了更接近本地...

EasonTyler 2019-08-26 11:58 評論0 收藏0
前端面試題（3）現代技術

摘要：什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面，后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時，將導航頁傳輸到客戶端，其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。什么是單頁面應用(SPA)？單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續請求都無需再離開此頁目標：旨在用為用戶提供了更接近本地...

trigkit4 2019-08-02 10:37 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 評論0 收藏0