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

分享一个好用的函数吧,将js中的对象转成url参数的更多相关文章

  1. 创建一个JS函数,运用JS中arguments对象

    Javascript中有个内置的arguments对象. arguments对象包含了参数调用的参数数组. <p>查找最大的数.</p> <p id="demo ...

  2. JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域

    文章目录 1.对象的简介 2.对象的基本操作 2.1 代码 2.2 测试结果 3.属性和属性值 3.1 代码 3.2 测试结果 4.对象的方法 4.1 代码 4.2 测试结果 5.对象字面量 5.1 ...

  3. 用Java开发一个工具类,提供似于js中eval函数功能的eval方法

    今天在看到<Java疯狂讲义>中一个章节习题: 开发一个工具类,该工具类提供一个eval()方法,实现JavaScript中eval()函数的功能--可以动态运行一行或多行程序代码.例如: ...

  4. JavaScript函数认识,Js中的常见函数

    JavaScript函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...

  5. 替换空格-请实现一个函数,将一个字符串中的空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。

    class Solution { public: void replaceSpace(char *str,int length) { char *tmp; ; int i; ;i<length; ...

  6. 符号替换问题:请实现一个函数,将一个字符串中的空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。

    public class Solution { public String replaceSpace(StringBuffer str) { String str1=str.toString(); c ...

  7. 由命名空间函数而引发思考--js中的对象赋值问题

    最近没有编码任务,作为一个才毕业的小辣鸡,给的任务就是看一下公司的新系统,熟悉怎么用哪些地方是干什么的. 下午喝了两杯水,感觉有点浪.然后就开始看了下代码.发现有一个函数是这样子的. var TX = ...

  8. js中window对象的opener属性的一个坑

    2018-05-08 17:48:33 今天我编写代码碰到了一个让我纠结了很久的坑,特别想在此说一下,让其他人避免我踏过的这个坑. 这个坑就是:在我自己写的子窗口中用opener属性却获取不到父窗口的 ...

  9. python练习题自己实现一个字符串的find函数

    # 第五题:自己实现一个字符串的find函数 # 1.在一个字符串中查找另一个字符串 # 2.找到了返回第一次出现的位置 # 3.没找到返回-1 # 4.参数s1为源字符串,参数s2为要查找的字符串 ...

随机推荐

  1. Numpy 布尔型数组

    一  给定一个列表,返回大于10的元素. 在python中,有两种方法.一种方法是循环遍历,第二种方法是使用内置函数filter() 在数组中,有更为简单的方法.即布尔型索引 布尔型索引: 将同样大小 ...

  2. 标准C程序设计七---06

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  3. 转载 cc、gcc、g++、CC的区别概括

    gcc是C编译器:g++是C++编译器:linux下cc一般是一个符号连接,指向gcc:gcc和g++都是GUN(组织)的编译器.而CC则一般是makefile里面的一个名字,即宏定义,嘿,因为Lin ...

  4. Python入门--8--现在需要先学习可视化--包:easygui

    一.安装.了解easygui 下载地址:http://bbs.fishc.com/forum.php?mod=viewthread&tid=46069&extra=page%3D1%2 ...

  5. Mac快速查看隐藏文件

    使用终端 显示隐藏文件的最简单方法是使用终端.只要打开终端(位于应用程序--实用工具),将以下代码复制进去然后回车 defaults write com.apple.finder AppleShowA ...

  6. 在 VirtualBox 5.0 系列中让虚拟机支持 USB 3.0 必须开启 APIC

    VirtualBox 5.0 系列正式支持 USB 3.0,能够在宿主机支持 USB 3.0 的情况下,让虚拟机也选择具备 USB 3.0 的功能.但是经过多方试验,发现必须在 VirtualBox ...

  7. 如何选择 IT 技术书籍

    ★第1招:看网上评论 首先,上一些权威的图书网站,看看大伙儿的评价如何(要相信群众的眼睛是雪亮的).对于英文书籍,我一般上亚马逊网站去看看:中文书籍则上豆瓣网.这两个网站都提供星级评分,一般 > ...

  8. jsp/servlet实现简单上传和下载

    使用JSP/Servlet简单实现文件上传与下载 jsp上传页面代码: <%@ page language="java" import="java.util.*&q ...

  9. 《深入理解mybatis原理》 MyBatis的一级缓存实现详解 及使用注意事项

    MyBatis是一个简单,小巧但功能非常强大的ORM开源框架,它的功能强大也体现在它的缓存机制上.MyBatis提供了一级缓存.二级缓存 这两个缓存机制,能够很好地处理和维护缓存,以提高系统的性能.本 ...

  10. Java利用Mybatis进行数据权限控制

    权限控制主要分为两块,认证(Authentication)与授权(Authorization).认证之后确认了身份正确,业务系统就会进行授权,现在业界比较流行的模型就是RBAC(Role-Based ...