zoukankan      html  css  js  c++  java
  • 分享一个好用的函数吧,将js中的对象转成url参数

    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
  • 相关阅读:
    Swift try try! try?使用和区别
    Sitemesh 3 配置和使用(最新)
    idea + mybatis generator + maven 插件使用
    (五)Hololens Unity 开发之 手势识别
    (四)Hololens Unity 开发之 凝视系统
    (二)Hololens Unity 开发入门 之 Hello HoloLens~
    (三)Hololens Unity 开发之 语音识别
    (一)Hololens Unity 开发环境搭建(Mac BOOTCAMP WIN10)
    iOS多线程技术方案
    基于OpenSSL的RSA加密应用(非算法)
  • 原文地址:https://www.cnblogs.com/qixidi/p/10138057.html
Copyright © 2011-2022 走看看