Question

尝试使用es6的传播，但没有得到正确的

const arr1 = [{
  gap: 10
}, {
  gap: 20
}, {
  gap: 30
}]
const arr2 = [{
  english: null
}, {
  france: null
}]

如何生成一个新数组，arr2的属性与arr1分开？

来自jsfiddle：

    //expected new_arr to be
/*[{
  gap: 10,
  english: null,
  france: null
}, {
  gap: 20,
  english: null,
  france: null
}, {
  gap: 30,
  english: null,
  france: null
}]*/

尝试失败 Creating custom project and item templates

Answer 1

你想要

const arr1 = [{
  gap: 10
}, {
  gap: 20
}, {
  gap: 30
}]
const arr2 = [{
  english: null
}, {
  france: null
}]

const new_arr = arr1.map(obj => Object.assign({}, obj, ...arr2));

console.log(new_arr);

注意：

我最初有

const new_arr = arr1.map(obj => Object.assign(obj, ...arr2));

但更改arr1[0].gap会更改new_arr[0].gap - 代码段中的代码会修复

重新评论你能解释一下你在头脑中对象分配的定义吗？

我脑子里没有定义

我使用文档中的定义

Object.assign（）方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign（target，... sources）

MDN source

Answer 2

[编辑] 这实际上解决了错误的问题，因为我读得太快了，但我会在这里留下原始代码作为如何做类似事情的例子。感谢 Jaromanda X 指出这一点。

正如Jaromanda X所说，正确的解决方案是

const new_arr = arr1.map(obj => Object.assign({}, obj, ...arr2));

如果您尝试将arr2中的对象的属性压缩到arr1，那么就是这样做的：

const new_arr = arr1.map((obj, i) => ({
  ...obj, ...arr2[i]
}));

Answer 3

问题是＆＃34; ...＆＃34;语法也可以作为数组的Spread运算符，所以当你写下：...arr2时，你有效地传播了该数组的项目。但是，您可以这样做：

const new_arr = arr1.map(obj => ({
...obj, ...arr2[0], ...arr2[1]
}))

Answer 4

您也可以使用array#map和array#reduce来连接两个数组中的对象。

＆＃13;

const arr1 = [{gap: 10}, {gap: 20}, {gap: 30}]
const arr2 = [{english: null}, {france: null}]

var result = arr1.map(obj => {
  return arr2.reduce((r, o) => {
    return Object.assign(r, obj, o);
  },Object.create(null));
});

console.log(result);

＆＃13;

Answer 5

这是另一个使用＆＃34; reduce＆＃34;的解决方案。方法。像魅力一样：

const arr1 = [{
  gap: 10
}, {
  gap: 20
}, {
  gap: 30
}]
const arr2 = [{
  english: null
}, {
  france: null
}]

const new_arr = arr1.map(obj => ({
  ...obj, ...arr2.reduce((acc, langObj) => ({...acc, ...langObj
  }), {})
}))
console.log(new_arr)

将另一个数组作为属性放入另一个数组失败

5 个答案: