Js url传递对象和数组类型的参数，无法解析

Question

这段代码是我使用的解析对象拼接成url字符串的方法 encodeParamsStr: function(obj) {    var params = [];    Object.keys(obj).forEach(function(key) {      var value = obj[key];      // 如果值为undefined我们将其置空      if (typeof value === "undefined") {        value = "";      }      // 对于需要编码的文本（比如说中文）我们要进行编码      params.push([key, encodeURIComponent(value)].join("="));    });    return params.join("&");  },下面这个是我的调用   let baseUrl = 'static/html/charting_library/static/tv-chart.e816a7a6edc9de3ed709.html';      let obj = {        localserver:1,        widgetbar:{"datawindow":false,"details":false,"watchlist":false,"watchlist_settings":{"default_symbols":[]}},        drawingsAccess:{"type":"black","tools":[{"name":"Regression Trend"}]},        timeFrames:[          {"text":"5Y","resolution":"W","description":"5年","title":"5年"},          {"text":"1Y","resolution":"D","description":"1年","title":"1年"},          {"text":"6M","resolution":"120","description":"6月","title":"6月"},          {"text":"3M","resolution":"60","description":"3月","title":"3月"},          {"text":"1M","resolution":"30","description":"1月","title":"1月"},          {"text":"5D","resolution":"5","description":"5日","title":"5日"},          {"text":"1D","resolution":"1","description":"1日","title":"1日"}        ],        locale:'zh',        customCSS:'night.css',        debug:false,        timezone:'Asia/Shanghai',      }      this.chartUrl = `${baseUrl}#${this.$utils.encodeParamsStr(obj)}`;      $("#chart_iframe").attr('src', this.chartUrl);下图这个是访问的url，其中对象并没有被解析出来，还是Object，我需要的正确效果应该是像图二这样被编译

Answer 1

你这个函数只解析了obj属性是原始值的情况吧？如果属性值是对象和数组就不行了。里面只判断了undefined的情况，没有对对象和数组的处理

Answer 2

const encodeParams = window.encodeURIComponent(JSON.stringify(obj));

const params = JSON.parse(window.decodeURIComponent(encodeParams));

补充回答

let baseUrl =

  'static/html/charting_library/static/tv-chart.e816a7a6edc9de3ed709.html';

let obj = {

  localserver: 1,

  widgetbar: {

    datawindow: false,

    details: false,

    watchlist: false,

    watchlist_settings: { default_symbols: [] },

  },

  drawingsAccess: { type: 'black', tools: [{ name: 'Regression Trend' }] },

  timeFrames: [

    { text: '5Y', resolution: 'W', description: '5年', title: '5年' },

    { text: '1Y', resolution: 'D', description: '1年', title: '1年' },

    { text: '6M', resolution: '120', description: '6月', title: '6月' },

    { text: '3M', resolution: '60', description: '3月', title: '3月' },

    { text: '1M', resolution: '30', description: '1月', title: '1月' },

    { text: '5D', resolution: '5', description: '5日', title: '5日' },

    { text: '1D', resolution: '1', description: '1日', title: '1日' },

  ],

  locale: 'zh',

  customCSS: 'night.css',

  debug: false,

  timezone: 'Asia/Shanghai',

};

// 序列化对象为 JSON 字符串并使用 base64 编码

this.chartUrl = `${baseUrl}#${btoa(encodeURIComponent(JSON.stringify(obj)))}`;

$('#chart_iframe').attr('src', this.chartUrl);

解析参数

const params = JSON.parse(

  decodeURIComponent(

    atob(

      document

        .querySelector('#chart_iframe')

        .contentWindow.location.hash.substr(1)

    )

  )

);

console.log(params);