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

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 不是 function

这是一个堆栈闪电战。

Answer 1

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

一种可能的方法：

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

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

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

Second, do not use Object.keys() to go through an array: use either forEach() if you do all the transformations inside the function or map , if you return a new element and want to have a new array in the end.

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

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？），但这取决于实现风格的选择。

---

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

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;

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

Answer 2

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

有很多方法可以实现这一点，但我认为最清楚的一种是使用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扩展了 object，添加了来自另一个对象的附加属性。

Answer 3

问题是您试图在 object 上使用array.push() ，这不起作用。

相反，您可以通过数组对 go 使用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 4

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

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)