如何用ES6扁平化嵌套对象数组并将键重命名为迭代序号

我有一组民意调查响应对象数组，每个对象的结构如下：

{ 
  "slug": "18-AZ-Gov-GE-DvF", 
  "name": "2018 Arizona Gubernatorial GE", 
  "tags": [], 
  "charts": [], 
  "election_date": "2018-11-06", 
  "n_polls": 1, 
  "created_at": "2017-06-13T13:32:26.000Z", 
  "responses": [ 
    { "label": "Ducey", "name": "Doug Ducey", "party": "Republican", "incumbent": true }, 
    { "label": "Farley", "name": "Steve Farley", "party": "Democrat", "incumbent": false }, 
    { "label": "Other", "name": "Other", "party": null, "incumbent": false }, 
    { "label": "Undecided", "name": "Undecided", "party": null, "incumbent": false } 
  ] 
}

我需要扁平化其中的responses数组，将数组中每个对象的键加上迭代序号作为顶层键，最终对象结构如下：

{ 
  "slug": "18-AZ-Gov-GE-DvF", 
  "name": "2018 Arizona Gubernatorial GE", 
  "tags": [], 
  "charts": [], 
  "election_date": "2018-11-06", 
  "n_polls": 1, 
  "created_at": "2017-06-13T13:32:26.000Z", 
  "label1": "Ducey", 
  "name1": "Doug Ducey", 
  "party1": "Republican", 
  "incumbent1": true, 
  "label2": "Farley", 
  "name2": "Steve Farley", 
  "party2": "Democrat", 
  "incumbent2": false, 
  "label3": "Other", 
  "name3": "Other", 
  "party3": null, 
  "incumbent3": false, 
  "label4": "Undecided", 
  "name4": "Undecided", 
  "party4": null, 
  "incumbent4": false 
}

此前查阅的方案要么在扁平化时不重命名键，要么针对集合处理，我尝试过几种方案，想了解是否有简便的ES6实现方式。

可以结合对象解构、Array.prototype.reduce和扩展运算符来实现，代码简洁且完全符合你的需求：

const flattenPollResponse = (poll) => {
  // 解构出responses数组，剩余属性保留在rest对象中
  const { responses, ...rest } = poll;
  // 处理responses数组，生成带序号的键值对
  const flattenedResponses = responses.reduce((acc, item, index) => {
    const suffix = index + 1; // 序号从1开始计数
    // 遍历当前response的所有键值对，生成带序号的新键
    Object.entries(item).forEach(([key, value]) => {
      acc[`${key}${suffix}`] = value;
    });
    return acc;
  }, {});
  // 合并原始属性和扁平化后的响应属性
  return { ...rest, ...flattenedResponses };
};

// 示例使用
const originalPoll = { 
  "slug": "18-AZ-Gov-GE-DvF", 
  "name": "2018 Arizona Gubernatorial GE", 
  "tags": [], 
  "charts": [], 
  "election_date": "2018-11-06", 
  "n_polls": 1, 
  "created_at": "2017-06-13T13:32:26.000Z", 
  "responses": [ 
    { "label": "Ducey", "name": "Doug Ducey", "party": "Republican", "incumbent": true }, 
    { "label": "Farley", "name": "Steve Farley", "party": "Democrat", "incumbent": false }, 
    { "label": "Other", "name": "Other", "party": null, "incumbent": false }, 
    { "label": "Undecided", "name": "Undecided", "party": null, "incumbent": false } 
  ] 
};

const flattenedPoll = flattenPollResponse(originalPoll);
console.log(flattenedPoll);

代码细节解释： #

1. 对象解构：一次性提取出responses数组，把原对象的其他属性都保留在rest里，不用手动逐个复制顶层属性，减少冗余代码。
2. reduce遍历处理：用reduce累积生成扁平化后的键值对，每个数组元素的索引加1作为序号后缀，通过Object.entries遍历每个response对象的键值对，生成label1、name1这类带序号的新键。
3. 扩展运算符合并：最后用...运算符把原始属性和扁平化后的响应属性合并成一个新对象，完美得到你需要的结构。

这个方案可读性强，完全是ES6的简洁风格，能轻松处理任意长度的responses数组。

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