分享一个好用的函数吧,将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
posted @ 2018-12-18 16:29  栖息地  阅读(2589)  评论(0编辑  收藏  举报