js - 将对象合并到数组中

Question

我有一个结构如下的数组：

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

和我需要插入到上面的'options:'中的一段数据。我可以随意重塑的数据。可能是：

const header = {
    headerStyle: {
      borderBottomWidth: 0.5,
      borderColor: 'black',
    },
};

或

header2 = [
  {
    borderColor: 'red',
    borderWidth: 0.5,
  },
];

最终目标是：

const screens = [
      {
        name: 'John',
        options: {
          headerTitle: 'Book Title',
          headerStyle: {
            borderColor: 'red',
            borderWidth: 0.5,
        },
      },
      {
        name: 'Bill',
        options: {
          headerTitle: 'Another title',
          headerStyle: {
            bordercolor: 'red',
            borderWidth: 0.5,
        },
      },
    ];

我一直在谷歌搜索传播运算符，但我似乎无法将两者合并。

Answer 1

我们的想法是 map 将现有数组合并为一个新数组

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

const header = {
  headerStyle: {
    borderBottomWidth: 0.5,
    borderColor: 'black'
  }
}

const merged = screens.map(screen => ({
  ...screen,
  options: {
    ...screen.options,
    ...JSON.parse(JSON.stringify(header))
  }
}))

console.log(merged)

.as-console-wrapper { max-height: 100% !important; }

这里要注意的一件事是，如果没有 JSON.parse(JSON.stringify(header))，数组中的每个对象将共享相同的 headerStyle 对象引用。使用扩展语法可能有更简单的方法来破坏对象引用，但考虑到要合并的对象的潜在动态特性，使用 JSON 方法是一种方便的包罗万象的方法。

Answer 2

如果这对你有帮助。
只是循环数组并附加headerStyle.the三个点表示提取数据，旨在防止引用。

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

const header = {
    headerStyle: {
      borderBottomWidth: 0.5,
      borderColor: 'black',
    },
};

screens.forEach(item=>{item.options['headerStyle']={...header.headerStyle}})

console.log(screens)

js - 将对象合并到数组中

js - incorporate an object into an array

javascript

array-merge

ecmascript-6