代码之家 › 专栏 › 技术社区 › Wasteland

js-将对象合并到数组中

array-merge ecmascript-6 javascript

Wasteland · 技术社区 · 3 年前

我有一个数组,其结构如下:

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

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,
        },
      },
    ];

我一直在谷歌搜索spread操作符,但似乎无法将两者合并。

2 回复 | 直到 3 年前

Phil 3 年前

我们的想法是 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 方法是一种方便的通用方法。

nay 3 年前

如果这对你有帮助的话。
只需循环数组并附加headerStyle。这三个点表示提取数据,以防止引用。

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)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前