Javascript如何将新元素从初始数组推送到相同索引的数组数组中的每个数组？

Question

我想使用两者的索引从另一个数组向一个数组添加新属性。

例如，假设我有以下数组：

initArray = [
  { name: 'John', family: 'Doe'},
  { name: 'Joanna', family: 'Doe'}
];

以及我想从中取出并推入initArray的数组：

genderArray = [
  { gender: 'Male' },
  { gender: 'Female' }
];

我需要的是一个像这样的最终数组：

initArray = [
  { name: 'John', family: 'Doe', gender: 'Male'},
  { name: 'Joanna', family: 'Doe', gender: 'Female'}
];

我尝试了以下方法：

ngOnInit() {
  Object.keys(this.genderArray).forEach((idx) => {
    console.log(this.initArray)
    this.initArray[idx].push(this.genderArray)
  });

  console.log(this.initArray)
}

但是它返回了一个错误：

错误：_this.initArray[idx].push 不是函数

这是stackblitz。

Answer 1

问题是你试图在一个对象上使用array.push()，这是行不通的。

相反，您可以使用 for 循环遍历数组，并通过为其分配一个值来简单地将“性别”类别添加到该索引，即另一个数组中该索引处的性别：

initArray = [
  { name: 'John', family: 'Doe'},
  { name: 'Joanna', family: 'Doe'}
];

genderArray = [
  { gender: 'Male' },
  { gender: 'Female' }
];

for (var i = 0; i < initArray.length; i++) {
  initArray[i].gender = genderArray[i].gender;
}

console.log(initArray);

或者，您可以使用array.forEach()：

initArray = [
  { name: 'John', family: 'Doe'},
  { name: 'Joanna', family: 'Doe'}
];

genderArray = [
  { gender: 'Male' },
  { gender: 'Female' }
];

initArray.forEach(addGender);

function addGender(_, i) {
  initArray[i].gender = genderArray[i].gender;
}

console.log(initArray);

Answer 2

首先，您不应该推送到initArray：您不向initArray 添加元素，而是向其每个元素添加属性。

一种可能的方法：

Object.assign(this.initArray[idx], this.genderArray[idx]);

...或者，如果出于某种原因您想要创建一个全新的“丰富”对象数组，而不是直接修改对象：

this.initArray[idx] = {...this.initArray[idx], ...this.genderArray[idx]};

其次，不要使用 Object.keys() 来遍历数组：如果您在函数内部进行所有转换，请使用 forEach()，如果您返回一个新元素并想要一个新元素，请使用 map数组到底。

所以你的函数可能看起来像这样：

ngOnInit() {
  this.genderArray.forEach((element, index) => {
    Object.assign(this.initArray[index], element);
  });

  console.log(this.initArray)
}

...或...

ngOnInit() {
  this.initArray = this.initArray.map((element, index) => {
     { ...element, ...this.genderArray[index] }
  });

  console.log(this.initArray)
}

就我个人而言，我总是发现代码 'x = x.map(transformer())` 非常可疑（如果无论如何都要重新分配，为什么不使用 forEach？），但这取决于实现风格的选择。

---

如果数组的元素中有多个属性要“混合”，但你只想取一个，你可以直接去：

Object.assign(this.initArray[idx], { gender: this.genderArray[idx].gender });

...在赋值中使用解构：

const { gender } = this.genderArray[idx]; 
Object.assign(this.initArray[idx], { gender });

...或者像我们在过去没有语法糖的好日子那样硬着头皮直接做分配：

this.initArray[idx].gender = this.genderArray[idx].gender;

在这种特殊情况下，最后一个看起来实际上是最好的方法。它的缺点是必须重复属性名称，但如果您希望道具在源数组和目标数组中以不同的方式命名，这也可能会派上用场。

Answer 3

您可以通过reduce 方法使用... 扩展运算符合并两个数组：

const result = initArray.reduce((a, c, i) => {
   a.push({...c, ...genderArray[i]})
   return a;
},[])

或单行版本：

const result = initArray.reduce((a, c, i) => (a.push({...c, ...genderArray[i]}), a),[])

一个例子：

let initArray = [
  { name: 'John', family: 'Doe'},
  { name: 'Joanna', family: 'Doe'}
];

let genderArray = [
  { gender: 'Male' },
  { gender: 'Female' }
];

const result = initArray.reduce((a, c, i) => {
   a.push({...c, ...genderArray[i]})
   return a;
},[])

console.log(result)

Answer 4

您实际上是在尝试“合并”两个数组中的对象。

有很多方法可以实现这一点，但我认为最清晰的一种是使用Array.map 和Object.assign 函数：

const initArray = [
  { name: 'John', family: 'Doe'},
  { name: 'Joanna', family: 'Doe'}
];
const genderArray = [
  { gender: 'Male' },
  { gender: 'Female' }
];

const ans = initArray.map((person, index) => {
  const genderedPerson = Object.assign({}, person, genderArray[index]);
  return genderedPerson;
});
console.log(ans);

• Array.map 迭代一个数组并修改其元素。
• Object.assign 扩展一个对象，为其添加来自另一个对象的附加属性。