如何在JavaScript中扁平化对象数组及实现下拉列表与对象数组绑定？

扁平化嵌套数组是日常开发里很常见的需求，我分两种场景给你实用的解决方案：

1. 浅层嵌套（仅一层数组嵌套） #

如果你的数组只是简单的一层嵌套（比如[[1,2], [3,4]]），直接用数组原生的flat()方法就能搞定，默认会扁平化一层：

const nestedArray = [[1, 2], [3, 4], [5]];
const flatArray = nestedArray.flat();
// 结果: [1, 2, 3, 4, 5]

要是不确定嵌套的深度，给flat()传个Infinity参数，它会自动扁平化所有层级的嵌套：

const deepNested = [[1, [2, [3]]]];
const fullyFlat = deepNested.flat(Infinity);
// 结果: [1, 2, 3]

2. 包含对象的嵌套数组（类似你问题二中的结构） #

如果是对象数组里嵌套着数组字段（比如每个对象带values数组），用flatMap()会更顺手——它先执行map转换，再自动把结果扁平化：

const data = [
  { id: 1, items: ["a", "b"] },
  { id: 2, items: ["c", "d"] }
];
const flatData = data.flatMap(item => item.items);
// 结果: ["a", "b", "c", "d"]

要是需要保留原对象的部分属性，也可以在flatMap里返回处理后的对象数组：

const flatWithProps = data.flatMap(item => 
  item.items.map(subItem => ({ parentId: item.id, value: subItem }))
);
// 结果: [{parentId:1, value:"a"}, {parentId:1, value:"b"}, ...]

看了你的代码和预期输出，问题出在你用map加reduce生成了包含对象的数组，但我们需要的是直接装着text/value对象的单层数组。换成flatMap就能完美解决这个问题，它可以把每个原对象处理后的小数组直接合并成最终的大数组。

修改后的代码如下：

const objArray = [
  {
    "type": "select",
    "required": false,
    "label": "WorkTime",
    "name": "select-1659012135405-0",
    "customFieldId": "4330",
    "fieldCode": "WT1",
    "advancedSettings": "Edit",
    "typeDescription": "Select",
    "values": [
      { "label": "Apples", "value": "AP", "selected": false },
      { "label": "Bananas", "value": "BA", "selected": false },
      { "label": "Pineapples", "value": "PI", "selected": false }
    ]
  },
  {
    "type": "select",
    "required": false,
    "label": "WorkHours",
    "name": "select-1659012135415-0",
    "customFieldId": "13916",
    "fieldCode": "WH",
    "advancedSettings": "Edit",
    "typeDescription": "Select",
    "values": [
      { "label": "Day", "value": "D", "selected": false },
      { "label": "Night", "value": "N", "selected": false }
    ]
  }
];

const result = objArray.flatMap(({ customFieldId, fieldCode, label, values }) => {
  // 如果没有values，返回空数组，不会影响最终结果
  if (!values) return [];
  // 把每个value转换成需要的text/value对象，返回一个小数组
  return values.map(key => ({
    value: `${customFieldId}-${fieldCode}-${key.value}`,
    text: `${fieldCode} - ${label} - ${key.label}`
  }));
});

console.log(result);

代码说明： #

1. 替换map为flatMap：flatMap会把每个元素处理后返回的数组，直接拼接成一个单层数组，不会像map那样保留数组嵌套。
2. 移除reduce：不需要把values合并成一个对象，直接用map把每个values元素转换成你需要的{text, value}结构，返回这个小数组即可。
3. 空值处理：如果某个对象没有values，返回空数组，flatMap会自动忽略它，不会在结果里添加undefined。

运行这段代码后，输出就是你想要的预期结果，完全适配下拉列表的绑定需求。

内容的提问来源于stack exchange，提问作者Donald N. Mafa