当我们需要向服务器发送一个API请求时，通常会将参数拼接在URL的末尾，这些参数可能来自于用户输入、配置文件、API返回的数据等。而如果参数很多或者有多层嵌套结构，手动拼接URL会变得非常麻烦。这时候，可以使用JavaScript将JSON格式的对象拼接成复杂的URL参数字符串。

方法一：手写递归函数

以下是手写递归函数的示例代码：

function buildQueryString(params, prefix) {
  var str = [];

  for(var key in params) {
    if(params.hasOwnProperty(key)) {
      var value = params[key];

      var paramName = prefix ? prefix + '[' + key + ']' : key;

      if(typeof value === 'object') {
        str.push(buildQueryString(value, paramName));
      } else {
        str.push(encodeURIComponent(paramName) + '=' + encodeURIComponent(value));
      }
    }
  }

  return str.join('&');
}

该函数的参数params是一个JSON格式的对象，prefix用于记录递归前缀。函数的内部实现使用了for循环遍历JSON对象中的每一个键值对，如果值是一个对象，就递归调用buildQueryString函数，并传入参数和前缀；否则，就直接将键值对转化为URL参数格式，并加入到最终的字符串数组中。最后，将所有参数拼接成一个用&连接的字符串返回。

以下是该函数的示例调用：

var params = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'Beijing',
    street: 'Tiananmen Square'
  },
  skills: ['JavaScript', 'CSS', 'HTML']
};

console.log(buildQueryString(params));

输出结果为：

name=Alice&age=20&address[city]=Beijing&address[street]=Tiananmen%20Square&skills[0]=JavaScript&skills[1]=CSS&skills[2]=HTML

方法二：使用第三方库

如果你不想自己写递归函数，还可以使用第三方库，例如jQuery和Lodash。

以下是使用jQuery.param()函数将JSON对象转化为URL参数字符串的示例代码：

var params = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'Beijing',
    street: 'Tiananmen Square'
  },
  skills: ['JavaScript', 'CSS', 'HTML']
};

console.log($.param(params));

输出结果和方法一相同。

以下是使用Lodash库的示例代码：

var params = {
  name: 'Alice',
  age: 20,
  address: {
    city: 'Beijing',
    street: 'Tiananmen Square'
  },
  skills: ['JavaScript', 'CSS', 'HTML']
};

console.log(_.chain(params).map(function(value, key) {
  return encodeURIComponent(key) + '=' + encodeURIComponent(value);
}).join('&').value());

输出结果和方法一相同。

综上所述，使用JavaScript将JSON格式的对象拼接成复杂的URL参数字符串的方法有手写递归函数和使用第三方库两种，其中第三方库具有更高的可维护性和稳定性。

本文链接：http://task.lmcjl.com/news/8997.html