怎么把json对象拼接参数

如何优雅地将JSON对象拼接为参数字符串

在Web开发中，我们经常需要将JavaScript中的JSON对象转换为URL参数字符串（如?name=John&age=25），以便发送GET请求或构建查询链接，虽然看似简单，但处理过程中需要考虑编码、嵌套对象、数组等多种复杂情况，本文将系统介绍JSON对象拼接参数字符串的方法，从基础到进阶，帮助你写出健壮、可维护的代码。

基础方法：手动拼接与循环处理

对于简单的扁平化JSON对象（不包含嵌套对象或数组），可以通过遍历对象属性，手动拼接键值对，核心思路是：遍历对象，将每个键和值进行URL编码后，用连接，再用&拼接所有键值对。

示例：扁平化对象拼接

假设有以下JSON对象：

const params = {
  name: "张三",
  age: 25,
  city: "北京"
};

我们可以通过for...in循环遍历对象,拼接参数字符串：

function simpleStringify(params) {
  let queryString = "";
  for (const key in params) {
    // 跳过对象继承的属性
    if (Object.prototype.hasOwnProperty.call(params, key)) {
      // 对键和值进行URL编码（处理中文、特殊符号等）
      const encodedKey = encodeURIComponent(key);
      const encodedValue = encodeURIComponent(params[key]);
      queryString += `${encodedKey}=${encodedValue}&`;
    }
  }
  // 移除末尾多余的&
  return queryString.slice(0, -1);
}
const result = simpleStringify(params);
console.log(result); // "name=%E5%BC%A0%E4%B8%89&age=25&city=%E5%8C%97%E4%BA%AC"

说明：

• encodeURIComponent是必须的，它会对键和值中的特殊字符（如&、、、中文等）进行编码，避免破坏URL结构。
• Object.prototype.hasOwnProperty.call用于确保只处理对象自身的属性，避免遍历到原型链上的属性。

进阶方法：处理嵌套对象与数组

实际业务中，JSON对象往往包含嵌套对象或数组（如{user: {name: "John"}, hobbies: ["reading", "coding"]}），此时基础方法无法直接处理,我们需要递归或特定规则来展开嵌套结构。

处理嵌套对象：递归展开

对于嵌套对象，可以采用递归方式，将嵌套的键用特定符号（如）连接，形成扁平化的键名，例如{user: {name: "John"}}展开为user.name=John。

function deepStringify(params, parentKey = "") {
  let queryString = "";
  for (const key in params) {
    if (Object.prototype.hasOwnProperty.call(params, key)) {
      // 构建当前键的全名（如"user.name"）
      const fullKey = parentKey ? `${parentKey}.${key}` : key;
      const value = params[key];
      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
        // 递归处理嵌套对象
        queryString += deepStringify(value, fullKey);
      } else {
        // 处理基本类型或数组
        const encodedKey = encodeURIComponent(fullKey);
        const encodedValue = encodeURIComponent(value);
        queryString += `${encodedKey}=${encodedValue}&`;
      }
    }
  }
  return queryString.slice(0, -1); // 移除末尾&
}
const nestedParams = {
  user: { name: "李四", age: 30 },
  city: "上海",
  contact: { email: "lisi@example.com", phone: "13800138000" }
};
const nestedResult = deepStringify(nestedParams);
console.log(nestedResult);
// "user.name=%E6%9D%8E%E5%9B%BD&user.age=30&city=%E4%B8%8A%E6%B5%B7&contact.email=lisi%40example.com&contact.phone=13800138000"

处理数组：索引或逗号分隔

数组有两种常见处理方式：

• 索引法：将数组元素展开为key[0]=value1&key[1]=value2（类似PHP的数组序列化方式）。
• 逗号分隔法：将数组元素用逗号连接后编码为key=value1,value2（适用于后端支持解析逗号分隔数组的情况）。

索引法示例：

function arrayStringifyWithIndex(params) {
  let queryString = "";
  for (const key in params) {
    if (Object.prototype.hasOwnProperty.call(params, key)) {
      const value = params[key];
      if (Array.isArray(value)) {
        value.forEach((item, index) => {
          const encodedKey = `${encodeURIComponent(key)}[${index}]`;
          const encodedValue = encodeURIComponent(item);
          queryString += `${encodedKey}=${encodedValue}&`;
        });
      } else {
        const encodedKey = encodeURIComponent(key);
        const encodedValue = encodeURIComponent(value);
        queryString += `${encodedKey}=${encodedValue}&`;
      }
    }
  }
  return queryString.slice(0, -1);
}
const arrayParams = {
  hobbies: ["reading", "coding", "travel"],
  scores: [85, 90, 78]
};
const arrayResult = arrayStringifyWithIndex(arrayParams);
console.log(arrayResult);
// "hobbies[0]=reading&hobbies[1]=coding&hobbies[2]=travel&scores[0]=85&scores[1]=90&scores[2]=78"

逗号分隔法示例：

function arrayStringifyWithComma(params) {
  let queryString = "";
  for (const key in params) {
    if (Object.prototype.hasOwnProperty.call(params, key)) {
      const value = params[key];
      if (Array.isArray(value)) {
        const encodedKey = encodeURIComponent(key);
        const encodedValue = encodeURIComponent(value.join(","));
        queryString += `${encodedKey}=${encodedValue}&`;
      } else {
        const encodedKey = encodeURIComponent(key);
        const encodedValue = encodeURIComponent(value);
        queryString += `${encodedKey}=${encodedValue}&`;
      }
    }
  }
  return queryString.slice(0, -1);
}
const commaResult = arrayStringifyWithComma(arrayParams);
console.log(commaResult);
// "hobbies=reading,coding,travel&scores=85,90,78"

使用成熟库：简化开发

手动处理嵌套对象和数组虽然灵活，但容易遗漏边界情况（如null、undefined、循环引用等），在实际项目中，推荐使用成熟的URL参数处理库，如qs（Node.js/浏览器通用）、URLSearchParams（浏览器原生API）。

使用qs库

qs是专门处理URL参数的库，支持嵌套对象、数组、多种数组格式（如indices、brackets、repeat等）,且能正确处理编码。

安装：

npm install qs

示例：

import qs from 'qs';
const complexParams = {
  name: "王五",
  info: { age: 28, gender: "male" },
  tags: ["js", "node.js"],
  config: { theme: "dark", features: ["a", "b"] }
};
// 默认：嵌套对象用点号，数组用索引（类似手动递归结果）
const result1 = qs.stringify(complexParams);
console.log(result1);
// "name=%E7%8E%8B%E4%BA%94&info.age=28&info.gender=male&tags[0]=js&tags[1]=node.js&config.theme=dark&config.features[0]=a&config.features[1]=b"
// 数组用逗号分隔（arrayFormat: 'comma'）
const result2 = qs.stringify(complexParams, { arrayFormat: 'comma' });
console.log(result2);
// "name=%E7%8E%8B%E4%BA%94&info.age=28&info.gender=male&tags=js,node.js&config.theme=dark&config.features=a,b"
// 数组用方括号（arrayFormat: 'brackets'）
const result3 = qs.stringify(complexParams, { arrayFormat: 'brackets' });
console.log(result3);
// "name=%E7%8E%8B%E4%BA%94&info.age=28&info.gender=male&tags[]=js&tags[]=node.js&config.theme=dark&config.features[]=a&config.features[]=b"

使用浏览器原生URLSearchParams

现代浏览器提供了URLSearchParams API，可以方便地处理URL参数，但默认不支持嵌套对象和数组,需要先手动扁平化。

示例：

const params = {
  name: "赵六",
  age: 35,
  hobbies: ["sports", "music"]