资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/分享一个好用的函数吧，将js中的对象转成url参数

分享一个好用的函数吧，将js中的对象转成url参数

avwu / 1715人阅读

摘要：这个函数呢是自己在写基于管理后台时用到的，下面列出来两种使用方式最普通的，封装一个函数对象转参数去掉为空的参数在组件化开发时，我是这样写的写了一个工具文件，将其作为工具包引入的，并将其附给原型，这样在每个组件中就可以使用来使用里面的一些工具

这个函数呢是自己在写基于Vue+ElementUI管理后台时用到的,，下面列出来两种使用方式：

最普通的，封装一个js函数 
</>复制代码 
  1.  /**
  2.    * 对象转url参数
  3.    * @param {*} data
  4.    * @param {*} isPrefix
  5.    */
  6.  queryParams (data, isPrefix) {
  7.     isPrefix = isPrefix ? isPrefix : false
  8.     let prefix = isPrefix ? "?" : ""
  9.     let _result = []
  10.     for (let key in data) {
  11.       let value = data[key]
  12.       // 去掉为空的参数
  13.       if (["", undefined, null].includes(value)) {
  14.         continue
  15.       }
  16.       if (value.constructor === Array) {
  17.         value.forEach(_value => {
  18.           _result.push(encodeURIComponent(key) + "[]=" + encodeURIComponent(_value))
  19.         })
  20.       } else {
  21.         _result.push(encodeURIComponent(key) + "=" + encodeURIComponent(value))
  22.       }
  23.     }
  24.     return _result.length ? prefix + _result.join("&") : ""
  25.   }
在Vue组件化开发时，我是这样写的 
</>复制代码 
  1. 写了一个工具文件utils.js，将其作为工具包引入Vue的main.js，并将其附给Vue原型，这样在每个组件中就可以使用this.$utils来使用里面的一些工具函数了
utils.js文件 
</>复制代码 
  1. const utils = {
  2.   /**
  3.    * 对象转url参数
  4.    * @param {*} data
  5.    * @param {*} isPrefix
  6.    */
  7.   queryParams (data, isPrefix = false) {
  8.     let prefix = isPrefix ? "?" : ""
  9.     let _result = []
  10.     for (let key in data) {
  11.       let value = data[key]
  12.       // 去掉为空的参数
  13.       if (["", undefined, null].includes(value)) {
  14.         continue
  15.       }
  16.       if (value.constructor === Array) {
  17.         value.forEach(_value => {
  18.           _result.push(encodeURIComponent(key) + "[]=" + encodeURIComponent(_value))
  19.         })
  20.       } else {
  21.         _result.push(encodeURIComponent(key) + "=" + encodeURIComponent(value))
  22.       }
  23.     }
  24.     return _result.length ? prefix + _result.join("&") : ""
  25.   },
  26.   // ....其他函数....
  27. }
  28. export default utils
main.js文件 
</>复制代码 
  1. import Vue from "vue"
  2. import App from "./App.vue"
  3. import utils from "@/utils/utils"
  4. // ...其他代码...
  5. Vue.prototype.$utils = utils
  6. // ...其他代码...
在使用的时候可以这样写 
</>复制代码 
  1. // ....其他代码
  2. this.$utils.queryParams(this.params)
  3. // ...其他代码...
</>复制代码 
  1. 如果有写的不对或者不合适的地方请多多赐教，毕竟我还是个前端小菜鸡，happy coding！
GPU云服务器 云服务器 js将数据转成json对象 js中的对象 js将数组转成map js中函数参数的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97814.html

相关文章

  • Jquery就是这么简单

    摘要：在内部还是调用这些方法。对象下标，从开始对象下标，从开始再次重申对象只能调用对象的，对象只能调用对象的对象转成值得注意的是在脚本内，是代表对象的。对象转成对象语法也非常简单在内写上对象，就变成了对象了。在文档中对它的解释是这样子的。 什么是Jquery？ Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作 就是封装了JavaScript，能够...

    wpw 评论0 收藏0

  • Jquery就是这么简单

    摘要：在内部还是调用这些方法。对象下标，从开始对象下标，从开始再次重申对象只能调用对象的，对象只能调用对象的对象转成值得注意的是在脚本内，是代表对象的。对象转成对象语法也非常简单在内写上对象，就变成了对象了。在文档中对它的解释是这样子的。 什么是Jquery？ Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作 就是封装了JavaScript，能够...

    oogh 评论0 收藏0

  • 无需Flash实现图片裁剪——HTML5中级进阶

    摘要：需求就是那么简单，在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。 前言 图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。 需求就是那么简单，在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是，将图片和裁剪参数（x...

    JerryC 评论0 收藏0

发表评论

登陆后可评论

0条评论

avwu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<