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);