JavaScript如何将含嵌套fields数组的对象展平为单层键值结构

你要的扁平化效果核心逻辑非常清晰，不需要复杂的内置API，只要三步就能实现：先保留外层原有非嵌套属性，再遍历fields数组把每一项转成独立键值对，最后合并成无嵌套的新对象即可。

新手友好的无语法糖实现（逻辑直观，容易调试） #

这种写法没有复杂的高级语法，逐行都能看懂每一步在做什么，新手排查问题也方便：

// 补全语法后的原始对象（你提供的示例代码少了fields数组的闭合]）
const sourceObj = {
  name: 'name',
  type: 'type',
  fields: [
    { name: 'field1', value: 2 },
    { name: 'field2', value: 3 }
  ]
}

// 初始化空的结果对象
const flatResult = {}

// 第一步：把外层原有属性拷贝到结果里，跳过嵌套的fields字段
for (const key in sourceObj) {
  if (key === 'fields') continue
  flatResult[key] = sourceObj[key]
}

// 第二步：遍历fields数组，把每一项的name当键、value当值塞进结果
for (const field of sourceObj.fields) {
  flatResult[field.name] = field.value
}

console.log(flatResult)
// 最终输出完全符合预期：{ name: 'name', type: 'type', field1: 2, field2: 3 }

现代JS简洁实现 #

熟悉基础语法后，可以用对象展开、数组reduce的方法压缩代码量，效果完全一致：

const flatResult = {
  // 先展开原对象所有顶层属性
  ...sourceObj,
  // 把fields数组转换为键值对对象，合并到结果里
  ...sourceObj.fields.reduce((map, field) => ({
    ...map,
    [field.name]: field.value
  }), {}),
  // 移除结果里多余的原fields数组属性
  fields: undefined
}

新手常见注意点 #

• 尽量生成新对象做处理，不要直接修改原始传入的对象，避免后续代码引用原对象时出现不可预期的副作用
• 如果fields里的字段名和外层原有键名（比如外层本身有个叫name的属性），合并时会直接覆盖原有值，有需要的话可以加判断做冲突拦截
• 注意原始对象的语法完整性：你示例里的fields数组漏了闭合的]，实际编写时要补全语法，否则会直接报语法错误

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