js字符串"a=1&b=2"怎么转数组或对象

方案一：现代标准 URLSearchParams（推荐）

自 ECMAScript 与 WHATWG 标准确立以来，现代浏览器和 Node.js（v10+）均原生内置了 URLSearchParams 构造函数。它专门用于操作和解析 URL 键值对，具备天然的字符解码、遍历器协议和高容错能力。

1. 转换为纯普通对象（Object）

结合 ES2019 推出的 Object.fromEntries()，可以直接将 URLSearchParams 生成的可迭代条目还原为一个标准 JavaScript 键值对象，仅需一行代码：

const str = "a=1&b=2";
const paramsObj = Object.fromEntries(new URLSearchParams(str));

console.log(paramsObj);
// 示例输出: { a: "1", b: "2" }
console.log(paramsObj.a); // 示例输出: "1"

执行过程非常直观：new URLSearchParams("a=1&b=2") 生成一个参数实例，该实例原生部署了 [Symbol.iterator]，每一步迭代都会产生一个 [key, value] 数组。Object.fromEntries() 消费这些键值对并组装成普通对象。

2. 转换为键值二维数组（Array）

若业务场景需要保持参数的物理顺序，或者要交给支持键值元组的函数处理，可以直接利用 ES6 扩展运算符 ... 或 Array.from() 将其铺平为二维数组：

const str = "a=1&b=2";

// 形式 A：解构为二维元组数组 [['a', '1'], ['b', '2']]
const tupleArr = [...new URLSearchParams(str)];
console.log(tupleArr);
// 示例输出: [["a", "1"], ["b", "2"]]

// 形式 B：映射为对象数组 [{ key: 'a', value: '1' }, ...]
const objArr = tupleArr.map(([key, value]) => ({ key, value }));
console.log(objArr);
// 示例输出: [{ key: "a", value: "1" }, { key: "b", value: "2" }]

方案二：经典原生 split() 字符串分步切割（无依赖/手写版）

在某些无浏览器宿主环境、极老旧运行时，或者需要高度自定义参数合并逻辑时，使用 JavaScript 字符串的原生 split() 方法是另一条经典技术路径。

其核心逻辑分为两个明确阶段：首先按连接符 "&" 切出每个单独的键值表达式单元，再按等号 "=" 将每个单元拆解为键与值。

1. 手工转为二维数组

使用 split('&') 结合数组的 map() 方法，即可将字符串映射为二维结构：

const str = "a=1&b=2";

const arrayResult = str.split('&').map(pair => {
  const [key, ...values] = pair.split('=');
  // 考虑到值内部可能也包含等号（例如 token=abc==），采用 join 重组剩余部分
  return [decodeURIComponent(key), decodeURIComponent(values.join('='))];
});

console.log(arrayResult);
// 示例输出: [["a", "1"], ["b", "2"]]

2. 使用 reduce() 归纳为目标对象

若需输出为对象，可以在分割之后使用 Array.prototype.reduce() 进行结果累加。为了保证代码在生产环境下的稳健性，必须在处理前剔除空字符串判断：

function parseQueryStringToObject(queryStr) {
  // 防御空串或非法入参
  if (!queryStr || typeof queryStr !== 'string') return {};

  // 剔除可能存在的起始 "?" 符号
  const cleanStr = queryStr.replace(/^[?#]/, '');

  return cleanStr.split('&').reduce((accumulator, currentItem) => {
    if (!currentItem) return accumulator;
    
    const separatorIndex = currentItem.indexOf('=');
    let rawKey, rawVal;

    if (separatorIndex === -1) {
      // 应对无等号情况，例如 "a&b=2" 中的 a
      rawKey = currentItem;
      rawVal = "";
    } else {
      rawKey = currentItem.slice(0, separatorIndex);
      rawVal = currentItem.slice(separatorIndex + 1);
    }

    const key = decodeURIComponent(rawKey);
    const val = decodeURIComponent(rawVal);

    accumulator[key] = val;
    return accumulator;
  }, {});
}

console.log(parseQueryStringToObject("a=1&b=2"));
// 示例输出: { a: "1", b: "2" }

关键差异：两种解析方式在一致条件下的表现对比

在实际业务场景中，传入的字符串往往不总是规整的 "a=1&b=2"。对比 URLSearchParams 与纯 split 手动处理，理解它们在一致边界输入下的具体差异至关重要：

常见边界问题与处理技巧

1. 多值同名参数的数组化合并

当参数出现多次（例如多选过滤 "tag=js&tag=react&user=tom"）时，若直接使用 Object.fromEntries，属性 tag 最终只保留 "react"。若需要完整保留为数组，可对 URLSearchParams 进行定制循环提取：

function parseParamsWithMultiValues(str) {
  const params = new URLSearchParams(str);
  const result = {};

  for (const [key, value] of params.entries()) {
    if (result.hasOwnProperty(key)) {
      // 如果已存在同名键，转换为数组追加
      result[key] = [].concat(result[key], value);
    } else {
      result[key] = value;
    }
  }
  return result;
}

console.log(parseParamsWithMultiValues("tag=js&tag=react&user=tom"));
// 示例输出: { tag: ["js", "react"], user: "tom" }

2. 空值与缺失等号的边界表现

面对形如 "a=&b" 的非典型字符串，URLSearchParams 的标准处理规则是：

• "a="：键为 "a"，值为空字符串 ""。
• "b"：键为 "b"，值依然为空字符串 ""。

这种行为符合标准规范。如果你的业务要求无等号参数必须当成布尔值 true（如命令行参数风格），则更适合采用第二节的手写 reduce 进行个性化定制。

总结

将 JavaScript 字符串 "a=1&b=2" 转换为数组或对象，在现代开发中首选 URLSearchParams：

• 转对象：直接调用 Object.fromEntries(new URLSearchParams(str))，语义清晰且自动完成字符解码。
• 转数组：直接使用扩展运算 [...new URLSearchParams(str)] 获得二维条目数组，便于遍历与流式处理。
• 特殊场景：当面对参数重复聚合、定制类型强制转换或极度严苛的老旧环境时，采用 split() 搭配 reduce() 手工解析具备更强的数据定制空间。