如何在JavaScript对象中以specialities[]为键传递数组给API？

1. 用字符串字面量包裹特殊键名 #

JavaScript中，对象的键名如果包含[]这类特殊字符，必须用引号（单引号或双引号）包裹起来，即可避免语法错误：

const data = {
  name: name,
  phone: phone,
  email: registerEmail,
  pmc_number: pmcNumber,
  "speciality[]": speciality.split(","), // 用双引号包裹带特殊字符的键名
  city: city 
}

const { res } = await axios.post("api-url", data);

2. 处理数组参数的序列化（适配表单格式API） #

如果你的API期望以application/x-www-form-urlencoded格式接收数组（比如PHP等后端框架习惯用speciality[]解析数组），仅修改键名可能不够——因为axios默认会把对象序列化为JSON字符串，后端可能无法正确识别数组。这时可以用以下两种方式处理：

方法一：使用URLSearchParams手动构建表单数据 #

const params = new URLSearchParams();
params.append("name", name);
params.append("phone", phone);
params.append("email", registerEmail);
params.append("pmc_number", pmcNumber);
// 循环添加数组元素，每个元素复用同一个键名
speciality.split(",").forEach(item => {
  params.append("speciality[]", item.trim());
});
params.append("city", city);

const { res } = await axios.post("api-url", params, {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
});

方法二：使用qs库便捷序列化 #

如果项目已安装qs（多数前端项目默认依赖），可以用它自动处理数组格式：

import qs from "qs";

const data = {
  name: name,
  phone: phone,
  email: registerEmail,
  pmc_number: pmcNumber,
  speciality: speciality.split(","),
  city: city 
};

const { res } = await axios.post("api-url", qs.stringify(data, { arrayFormat: "brackets" }), {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
});

arrayFormat: "brackets"参数会将数组序列化为speciality[]=value1&speciality[]=value2的格式，完全匹配API的参数要求。

内容的提问来源于stack exchange，提问作者Zain