分享一个好用的函数吧,将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('&') : ''
}
在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
分享一个好用的函数吧,将js中的对象转成url参数的更多相关文章
- 创建一个JS函数,运用JS中arguments对象
Javascript中有个内置的arguments对象. arguments对象包含了参数调用的参数数组. <p>查找最大的数.</p> <p id="demo ...
- JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
文章目录 1.对象的简介 2.对象的基本操作 2.1 代码 2.2 测试结果 3.属性和属性值 3.1 代码 3.2 测试结果 4.对象的方法 4.1 代码 4.2 测试结果 5.对象字面量 5.1 ...
- 用Java开发一个工具类,提供似于js中eval函数功能的eval方法
今天在看到<Java疯狂讲义>中一个章节习题: 开发一个工具类,该工具类提供一个eval()方法,实现JavaScript中eval()函数的功能--可以动态运行一行或多行程序代码.例如: ...
- JavaScript函数认识,Js中的常见函数
JavaScript函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...
- 替换空格-请实现一个函数,将一个字符串中的空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。
class Solution { public: void replaceSpace(char *str,int length) { char *tmp; ; int i; ;i<length; ...
- 符号替换问题:请实现一个函数,将一个字符串中的空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。
public class Solution { public String replaceSpace(StringBuffer str) { String str1=str.toString(); c ...
- 由命名空间函数而引发思考--js中的对象赋值问题
最近没有编码任务,作为一个才毕业的小辣鸡,给的任务就是看一下公司的新系统,熟悉怎么用哪些地方是干什么的. 下午喝了两杯水,感觉有点浪.然后就开始看了下代码.发现有一个函数是这样子的. var TX = ...
- js中window对象的opener属性的一个坑
2018-05-08 17:48:33 今天我编写代码碰到了一个让我纠结了很久的坑,特别想在此说一下,让其他人避免我踏过的这个坑. 这个坑就是:在我自己写的子窗口中用opener属性却获取不到父窗口的 ...
- python练习题自己实现一个字符串的find函数
# 第五题:自己实现一个字符串的find函数 # 1.在一个字符串中查找另一个字符串 # 2.找到了返回第一次出现的位置 # 3.没找到返回-1 # 4.参数s1为源字符串,参数s2为要查找的字符串 ...
随机推荐
- cf615D Multipliers
Ayrat has number n, represented as it's prime factorization pi of size m, i.e. n = p1·p2·...·pm. Ayr ...
- LA 并查集路径压缩
题目大意:有n个节点,初始时每个节点的父亲节点都不存在.有两种操作 I u v:把点节点u的父亲节点设为v,距离为|u-v|除以1000的余数.输入保证执行指令前u没有父亲节点. E u:询问u到根节 ...
- Oracle常用操作【自己的练习】
Oracle查询的时候条件要用单引号包裹,不能用双引号;Oracle的in子查询里面的值最多有1000个........ 连接orcl数据库 C:\Windows\system32@orcl as s ...
- Linux下AT&T汇编语法格式与Intel汇编语法格式异同
由于绝大多数的国内程序员以前只接触过Intel格式的汇编语言,很少或几乎没有接触过AT&T汇编语言,虽然这些汇编代码都是Intel风格的.但在Unix和Linux系统中,更多采用的还是AT&a ...
- [转发]Android 系统稳定性 - ANR(二)
文章都为原创,转载请注明出处,未经允许而盗用者追究法律责任. 很久之前写的了,留着有点浪费,共享之.编写者:李文栋P.S. OpenOffice粘贴过来后格式有些混乱. http://rayleeya ...
- Java成长之路
怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序员也是工作三五年之后开始迷茫的老程序员经常会问到的问题.希 ...
- Ubuntu 16.04安装CrossOver容器来安装QQ(终极解决办法,亲测有效)
说明:此版本的QQ基本完美,但是有个缺点就是历史记录有些会显示乱码! 注意:此方法能完美解决这篇文章http://www.cnblogs.com/EasonJim/p/7118693.html的所有问 ...
- Java计算文件MD5值代码
原文:http://www.open-open.com/code/view/1424930488031 import java.io.File; import java.io.FileInputStr ...
- http://www.cnblogs.com/shihaiming/
原文:http://www.bubuko.com/infodetail-917303.html 右击项目,点击Run as,如下图: 即可看到有很多现有的maven命令,点击即可运行,并在控制台可以看 ...
- IOS界面调试神器DCIntrospect
对于使用代码来写UI的同志,使用DCIntrospect来查看元素信息调整布局,再也不用凭眼睛来估了,先来看看截图 DCIntrospect是github上的开源项目:下载源码 大概介绍下用法: DC ...