脚本宝典收集整理的这篇文章主要介绍了分享一个好用的函数吧,将js中的对象转成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('&') : ''
}
写了一个工具文件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)
// ...其他代码...
如果有写的不对或者不合适的地方请多多赐教,毕竟我还是个前端小菜鸡,happy coding!
以上是脚本宝典为你收集整理的分享一个好用的函数吧,将js中的对象转成url参数全部内容,希望文章能够帮你解决分享一个好用的函数吧,将js中的对象转成url参数所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。