>  기사  >  웹 프론트엔드  >  js의 객체를 url 매개변수로 변환할 수 있는 함수 소개(코드 예시)

js의 객체를 url 매개변수로 변환할 수 있는 함수 소개(코드 예시)

不言
不言원래의
2018-09-17 15:31:454137검색

이 글은 js의 객체를 URL 매개변수로 변환할 수 있는 기능(코드 예제)에 대한 소개를 제공합니다. 특정 참조 값이 있습니다. 도움이 필요한 친구에게 도움이 되었으면 합니다.

이 함수는 Vue+ElementUI를 기반으로 관리 배경을 작성할 때 사용됩니다. 사용하는 방법은 두 가지가 있습니다.

가장 일반적인 방법은 js함수

 /**
   * 对象转url参数
   * @param {*} data
   * @param {*} isPrefix
   */
 urlencode (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('&') : ''
  }
js函数
const utils = {
  /**
   * 对象转url参数
   * @param {*} data
   * @param {*} isPrefix
   */
  urlencode (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

在Vue组件化开发时,我是这样写的

写了一个工具文件utils.js,将其作为工具包引入Vue的main.js,并将其附给Vue原型,这样在每个组件中就可以使用this.$utils来使用里面的一些工具函数了

utils.js文件

import Vue from 'vue'
import App from './App.vue'
import utils from '@/utils/utils'

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

Vue.prototype.$utils = utils

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

main.js컴포넌트 기반의 Vue를 개발할 때 이렇게 썼습니다툴 파일 utils.js를 작성해서 툴킷 메인으로 Vue에 도입했습니다. .js를 Vue 프로토타입에 첨부하면 각 구성 요소에서 this.$utils를 사용하여 내부의 일부 도구 기능을 사용할 수 있습니다

utils.jsFile#🎜 🎜#
// ....其他代码

this.$utils.urlencode(this.params)

// ...其他代码...
# 🎜🎜#main.js 파일

rrreee

사용시 이렇게 쓰면 됩니다

rrreee

#🎜🎜#

위 내용은 js의 객체를 url 매개변수로 변환할 수 있는 함수 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.