zoukankan      html  css  js  c++  java
  • 分享一个好用的函数吧,将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
  • 相关阅读:
    cookie会话技术
    Vue实现任务列表效果
    Vue实现选项卡效果
    数组API(2)
    数组常用API(1)
    sticky,粘性定位
    了解HTTP协议和TCP协议
    快速排序
    冒泡排序
    【译】x86程序员手册21-6.3.5为操作系统保留的指令
  • 原文地址:https://www.cnblogs.com/qixidi/p/10138057.html
Copyright © 2011-2022 走看看