• 分享一个好用的函数吧,将js中的对象转成url参数


    JavaScript&jQuery获取url参数方法

    这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,,下面列出来两种使用方式:

    最普通的,封装一个js函数

    
     /**
       * 对象转url参数
       * @param {*} data
       * @param {*} isPrefix
       */
     queryParams (data, isPrefix) {
        isPrefix = isPrefix ? isPrefix : false
        let prefix = isPrefix ? '?' : ''
        let _result = []
        for (let key in data) {
          let value = data[key]
          // 去掉为空的参数
          if (['', undefined, null].includes(value)) {
            continue
          }
          if (value.constructor === Array) {
            value.forEach(_value => {
              _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
            })
          } else {
            _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
          }
        }
    
        return _result.length ? prefix + _result.join('&') : ''
      }
    

    在Vue组件化开发时,我是这样写的

    写了一个工具文件utils.js,将其作为工具包引入Vue的main.js,并将其附给Vue原型,这样在每个组件中就可以使用this.$utils来使用里面的一些工具函数了

    utils.js文件

    
    const utils = {
      /**
       * 对象转url参数
       * @param {*} data
       * @param {*} isPrefix
       */
      queryParams (data, isPrefix = false) {
        let prefix = isPrefix ? '?' : ''
        let _result = []
        for (let key in data) {
          let value = data[key]
          // 去掉为空的参数
          if (['', undefined, null].includes(value)) {
            continue
          }
          if (value.constructor === Array) {
            value.forEach(_value => {
              _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
            })
          } else {
            _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
          }
        }
    
        return _result.length ? prefix + _result.join('&') : ''
      },
    
      // ....其他函数....
    
    }
    
    export default utils
    
    

    main.js文件

    
    import Vue from 'vue'
    import App from './App.vue'
    import utils from '@/utils/utils'
    
    // ...其他代码...
    
    Vue.prototype.$utils = utils
    
    // ...其他代码...
    

    在使用的时候可以这样写

    // ....其他代码
    

    this.$utils.queryParams(this.params)

    // ...其他代码...

    
    <blockquote>如果有写的不对或者不合适的地方请多多赐教,毕竟我还是个前端小菜鸡,happy coding!</blockquote>
    
    来源:https://segmentfault.com/a/1190000016416023
  • 相关阅读:
    spring boot +mybatis 操作sqlite数据库
    katalon studio教程之通过录制/回放创建测试用例
    #katalon studio# 安装和设置(Installation and Setup)
    NET Core 基于Aspect Injector 实现面向AOP编程
    NET Core 3.1使用AutoMapper实现对象映射
    给NET core 智能感知提示安装中文汉化包
    代码注释规范
    软件升级版本号迭代规范-Semantic Versioning
    使用阿里云的Helm私有仓库
    Helm操作指南
  • 原文地址:https://www.cnblogs.com/qixidi/p/10138057.html
Copyright © 2020-2023  润新知