如何用JavaScript将指定JSON结构转换为目标格式？

需求说明 #

• 将每个fotos元素内的foto单元素数组转换为字符串值
• 将tekst数组转换为以zz+数组索引为键、数组元素为值的键值对
• 保留原JSON的整体结构不变

示例数据 #

原始JSON #

{
  "items": [
    {
      "fotos": [
        {
          "foto": ["image1.jpg"]
        }
      ],
      "tekst": ["第一行文本", "第二行文本"]
    },
    {
      "fotos": [
        {
          "foto": ["image2.jpg"]
        }
      ],
      "tekst": ["第三行文本"]
    }
  ]
}

目标JSON #

{
  "items": [
    {
      "fotos": [
        {
          "foto": "image1.jpg"
        }
      ],
      "tekst": {
        "zz0": "第一行文本",
        "zz1": "第二行文本"
      }
    },
    {
      "fotos": [
        {
          "foto": "image2.jpg"
        }
      ],
      "tekst": {
        "zz0": "第三行文本"
      }
    }
  ]
}

当前实现（示例） #

假设你当前的实现类似如下：

function transformData(rawData) {
  return {
    ...rawData,
    items: rawData.items.map(item => {
      const transformedFotos = item.fotos.map(fotoItem => ({
        foto: fotoItem.foto[0]
      }));
      const transformedTekst = {};
      for (let i = 0; i < item.tekst.length; i++) {
        transformedTekst[`zz${i}`] = item.tekst[i];
      }
      return {
        ...item,
        fotos: transformedFotos,
        tekst: transformedTekst
      };
    })
  };
}

更优实现方案 #

方案1：简化版（针对扁平结构） #

利用数组reduce方法简化tekst的转换逻辑，代码更简洁可读性更高：

function transformJSON(rawData) {
  return {
    ...rawData,
    items: rawData.items.map(item => ({
      ...item,
      // 转换foto单元素数组为字符串
      fotos: item.fotos.map(f => ({ foto: f.foto[0] })),
      // 用reduce批量生成zz+索引的键值对
      tekst: item.tekst.reduce((acc, text, idx) => {
        acc[`zz${idx}`] = text;
        return acc;
      }, {})
    }))
  };
}

方案2：通用递归版（支持深层嵌套） #

如果你的JSON存在深层嵌套结构，递归方案可以自动处理所有符合规则的foto和tekst字段，无需针对不同层级修改代码：

function transformNode(node) {
  // 处理对象节点
  if (typeof node === 'object' && node !== null) {
    // 转换foto单元素数组为字符串
    if ('foto' in node && Array.isArray(node.foto) && node.foto.length === 1) {
      node.foto = node.foto[0];
    }
    // 转换tekst数组为目标键值对
    if ('tekst' in node && Array.isArray(node.tekst)) {
      node.tekst = node.tekst.reduce((acc, text, idx) => {
        acc[`zz${idx}`] = text;
        return acc;
      }, {});
    }
    // 递归处理所有子节点
    Object.keys(node).forEach(key => {
      node[key] = transformNode(node[key]);
    });
  }
  // 处理数组节点
  if (Array.isArray(node)) {
    return node.map(item => transformNode(item));
  }
  return node;
}

// 使用方式：传入解析后的JSON对象
const transformedData = transformNode(rawData);

方案优势 #

• 方案1：代码精简，针对已知的扁平结构，执行效率高，易于维护
• 方案2：通用性强，适配任意深度的嵌套JSON，扩展性更好

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