JS如何将指定对象合并到数组中每个元素的options属性内

核心逻辑为：先统一待插入配置的格式，再遍历数组对每个元素的options属性做对象合并即可，具体实现如下：

基础数据参考 #

你给出的原数组结构：

const screens = [
  {
    name: 'John',
    options: {
      headerTitle: 'Book Title',
    },
  },
  {
    name: 'Bill',
    options: {
      headerTitle: 'Another title',
    },
  },
];

两种待插入的配置格式：

// 格式1：标准对象格式
const header = {
    headerStyle: {
      borderBottomWidth: 0.5,
      borderColor: 'black',
    },
};

// 格式2：样式数组格式
const header2 = [
  {
    borderColor: 'red',
    borderWidth: 0.5,
  },
];

兼容两种配置格式的通用实现 #

该方案不会修改原数组，会返回全新的合并后数组：

function mergeScreenOptions(screens, extraConfig) {
  // 统一不同输入的配置格式
  const mergedConfig = Array.isArray(extraConfig) 
    ? { headerStyle: extraConfig[0] } 
    : extraConfig;

  return screens.map(item => ({
    ...item,
    options: {
      ...item.options,
      ...mergedConfig
    }
  }));
}

调用示例 #

// 传入格式1的配置
const result1 = mergeScreenOptions(screens, header);
// 传入格式2的配置
const result2 = mergeScreenOptions(screens, header2);

直接修改原数组的简化实现 #

如果你不需要保留原数组数据，可以直接遍历修改：

// 以header2为例，如果是header格式可以跳过格式适配步骤
const mergedConfig = { headerStyle: header2[0] };
screens.forEach(item => {
  item.options = {...item.options, ...mergedConfig};
});

常见问题说明 #

之前使用展开运算符合并失败，大概率是没有正确进入options嵌套层级操作，直接对外层数组项展开不会修改内部的options属性，需要显式指定合并options下的内容。
注意：上述实现使用的是浅拷贝，如果你需要合并的对象有超过2层的深层嵌套且不希望修改原对象的深层属性，可以自行替换为深拷贝逻辑。

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