可以把js中的物件轉成url參數的函數介紹（程式碼實例）

這篇文章帶給大家的內容是關於可以把js中的物件轉成url參數的函數介紹（程式碼實例）），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

這個函數呢是自己在寫基於Vue ElementUI管理後台時用到的,，下面列出來兩種使用方式：

#最普通的，封裝一個js函數

 /**
   * 对象转url参数
   * @param {*} data
   * @param {*} isPrefix
   */
 urlencode (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
   */
  urlencode (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.urlencode(this.params)

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

#

以上是可以把js中的物件轉成url參數的函數介紹（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！