分享一个好用的函数吧,将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为要查找的字符串 ...
随机推荐
- Java线程的学习_线程池
系统启动一个新线程需要很高的成本,因为它涉及与操作系统交互.在这种情况下,使用线程池可以很好地提高性能,尤其是当程序中需要创建大量生存期很短暂的线程时. 线程池在系统启动时即创建大量空闲的线程,程序将 ...
- 货车运输(codevs 3287)
题目描述 Description A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过 ...
- Log4j2同步异步性能比较以及教程和问题(坑)汇总
线程数:500个 每个线程日志输出次数: 500次 log4j2其实有两个输出异步日志的方式:AsyncLogger和AsyncAppend 他两的区别在于: AsyncLogger使用的是无锁高 ...
- git fetch tag 获取远程tag
获取远程的tag( 远程存在,本地不存在) git fetch origin tag 2.4.7 出现如下文字,说明获取远程tag成功 remote: Counting objects: 2, don ...
- 网上找的一篇博文,原文搞错了,应该是\r\n,本文已改正!——回车CR和换行line feed
"回车"(carriage return)和"换行"(line feed)与 ASCII表 关于“回车”(carriage return)和“换行”(line ...
- ZOJ - 4019 Schrödinger's Knapsack (背包,贪心,动态规划)
[传送门]http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5747 [题目大意]:薛定谔的背包.薛定谔的猫是只有观测了才知道猫的死 ...
- 关于RPi.GPIO、BCM2835 c library、WiringPi、Gertboard
1.RPi.GPIO//RPi.GPIO-0.5.5.tar.gz 开发者:python官网:https://www.python.org/ 官网:https://pypi.python.org/py ...
- Mybatis批量插入与批量删除
转自:http://www.cnblogs.com/liaojie970/p/5577018.html (一)批量插入 Mapper.xml: <?xml version="1.0&q ...
- 7.Java web—tomcat9部署
1)安装 在此之前要安装 好jdk和jre 下载绿色版 http://tomcat.apache.org/ 解压至:D:\Program Files (x86)\tomcat9 环境变更path添加两 ...
- gcc、arm-Linux-gcc和arm-elf-gcc的组成及区别
2017-01-19 嵌入式ARM 嵌入式ARM 一.GCC简介 The GNU Compiler Collection,通常简称 GCC,是一套由 GNU 开发的编译器集,为什么是编辑器集而不是编译 ...