美文网首页前端实践题目
前端项目开发中常用方法整理

前端项目开发中常用方法整理

作者: 虎牙工务员刘波 | 来源:发表于2022-01-09 15:20 被阅读0次

    业务开发中常用的方法整理,持续更新,后续打算打成npm包提供下载

    1、

    2、获取url中的某个参数

    /**
     * @description 
     * @param {String} variable 要获取的字段名称
     */
    export function getQueryVariable(variable) {
      // 普通url路由
      const query = window.location.search.substring(1)
      const vars = query.split('&')
      for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      // hash路由
      const w = location.hash.indexOf('?')
      const hashQuery = location.hash.substring(w + 1)
      const hashVars = hashQuery.split('&')
      for (let i = 0; i < hashVars.length; i++) {
        const pair = hashVars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return undefined
    }
    

    3、驼峰转下划线

    /**
     * @param data  需要转换的数据
     * @returns {{}|*}
     */
    export function objectHumpToLine(data) {
      if (typeof data != 'object' || !data) return data
      if (Array.isArray(data)) {
        return data.map(item => objectHumpToLine(item))
      }
    
      const newData = {}
      for (let key in data) {
        let newKey = key.replace(/([A-Z])/g, (p, m) => `_${m.toLowerCase()}`)
        newData[newKey] = objectHumpToLine(data[key])
      }
      return newData
    }
    

    4、下划线转驼峰

    /**
     * @param data 需要转换的数据
     * @returns {{}|*}
     */
    export function lineToCamel(data) {
      if (typeof data != 'object' || !data) return data
      if (Array.isArray(data)) {
        return data.map(item => lineToCamel(item))
      }
    
      const newData = {}
      for (let key in data) {
        let newKey = key.replace(/_([a-z])/g, (p, m) => m.toUpperCase())
        newData[newKey] = lineToCamel(data[key])
      }
      return newData
    }
    

    5、随机生成数字

    /**
     * 示例:生成长度为 12 的随机数:randomNumber(12)
     * 示例:生成 3~23 之间的随机数:randomNumber(3, 23)
     *
     * @param1 最小值 | 长度
     * @param2 最大值
     * @return int 生成后的数字
     */
    export function randomNumber() {
      // 生成 最小值 到 最大值 区间的随机数
      const random = (min, max) => {
        return Math.floor(Math.random() * (max - min + 1) + min)
      }
      if (arguments.length === 1) {
        let [length] = arguments
        // 生成指定长度的随机数字,首位一定不是 0
        let nums = [...Array(length)
          .keys()].map((i) => (i > 0 ? random(0, 9) : random(1, 9)))
        return parseInt(nums.join(''))
      } else if (arguments.length >= 2) {
        let [min, max] = arguments
        return random(min, max)
      } else {
        return Number.NaN
      }
    }
    

    6、随机生成字符串

    
    /**
     * 随机生成字符串
     * @param length 字符串的长度
     * @param chats 可选字符串区间(只会生成传入的字符串中的字符)
     * @return string 生成的字符串
     */
    export function randomString(length, chats) {
      if (!length) length = 1
      if (!chats) chats = '0123456789qwertyuioplkjhgfdsazxcvbnm'
      let str = ''
      for (let i = 0; i < length; i++) {
        let num = randomNumber(0, chats.length - 1)
        str += chats[num]
      }
      return str
    }
    

    7、深拷贝

    // 深拷贝 主要解决数组里面有函数的
    export function deepCopy(source) {
      if (!isObject(source)) return source //如果不是对象的话直接返回
      let target = Array.isArray(source) ? [] : {} //数组兼容
      for (var k in source) {
        if (source.hasOwnProperty(k)) {
          if (typeof source[k] === 'object') {
            target[k] = deepCopy(source[k])
          } else {
            target[k] = source[k]
          }
        }
      }
      return target
    }
    

    相关文章

      网友评论

        本文标题:前端项目开发中常用方法整理

        本文链接:https://www.haomeiwen.com/subject/blmucrtx.html