如何将后端返回的数组型JSON转换为嵌套键值对象格式？

嘿，我刚学React的时候也碰到过这种格式转换的需求，给你一步步拆解怎么处理，顺便聊聊这种结构的门道～

一、把数组格式转换成目标对象格式 #

你可以用JavaScript的reduce方法快速完成转换，这是处理这类数组转对象场景的常用手段。

假设你从后端拿到的数据是这样的：

const backendResponse = {
  "deals": [
    { "id": "1", "name": "a", "text": "text" },
    { "id": "2", "name": "b", "text": "text" }
  ]
};

转换代码如下：

// 从后端数据里取出数组
const dealsArray = backendResponse.deals;

// 用reduce转换成目标结构
const transformedDeals = dealsArray.reduce((accumulator, currentDeal) => {
  // 按照教程里的规则生成键：obj-加上deal的id
  accumulator[`obj-${currentDeal.id}`] = currentDeal;
  return accumulator;
}, {}); // 初始值是空对象

转换后transformedDeals就是你需要的格式：

{
  'obj-1': { id: '1', name: 'a', text: 'text' },
  'obj-2': { id: '2', name: 'b', text: 'text' }
}

如果是在React组件里使用，比如获取数据后转换并存入状态，可以这么写：

import { useState, useEffect } from 'react';

function DealsList() {
  const [deals, setDeals] = useState({});

  useEffect(() => {
    // 模拟请求后端接口
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(backendData => {
        const converted = backendData.deals.reduce((acc, deal) => {
          acc[`obj-${deal.id}`] = deal;
          return acc;
        }, {});
        setDeals(converted);
      });
  }, []);

  // 遍历转换后的对象展示内容
  return (
    <div className="deals-container">
      {Object.values(deals).map(deal => (
        <div key={deal.id} className="deal-item">
          <h3>{deal.name}</h3>
          <p>{deal.text}</p>
        </div>
      ))}
    </div>
  );
}

二、聊聊这种“命名子对象”的结构模型 #

这种结构通常被叫做索引对象（Indexed Object）或者字典（Dictionary），和数组相比，它的核心优势在于快速查找与操作：

• 直接访问：如果你知道某个deal的id，直接通过deals['obj-1']就能拿到对应的对象，不用遍历整个数组去找，数据量越大，这个优势越明显。
• 精准更新/删除：比如要更新id为1的deal，直接修改deals['obj-1']的属性就行；要删除的话，用delete deals['obj-1']就搞定，不用像数组那样先找索引再splice。
• 唯一性保障：对象的键是唯一的，这能确保同一个id的deal不会重复出现在结构里，避免数组可能出现的重复项问题。

当然它也有小缺点：比如不能直接依赖对象的属性顺序（虽然现代浏览器会保留数字/类数字键的顺序，但最好不要依赖这个），如果要按顺序展示，还是得用Object.values()或者Object.entries()转成数组再处理。

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