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

avwu 发布于2019-08-23 12:00 / 1620人阅读

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

这个函数呢是自己在写基于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)

// ...其他代码...

如果有写的不对或者不合适的地方请多多赐教，毕竟我还是个前端小菜鸡，happy coding！

云服务器 GPU云服务器 js将数据转成json对象 js中的对象 js将数组转成map js中函数参数的作用

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

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

Jquery就是这么简单

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

wpw 2019-08-30 14:04 评论0 收藏0
Jquery就是这么简单

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

oogh 2019-08-22 15:01 评论0 收藏0
无需Flash实现图片裁剪——HTML5中级进阶

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

JerryC 2019-08-19 18:17 评论0 收藏0