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

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

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

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

我想从中获取数组并将其推入initArray：

我需要的是一个最终数组，如下所示：

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)
}

但它返回了一个错误：

错误：\ u this.initArray[idx]。推送不是函数

---

这里有一个。

首先，您不应该推送到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.maptransformer`非常可疑，如果重新分配，为什么不使用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;

---

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

首先，您不应该推送到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.maptransformer`非常可疑，如果重新分配，为什么不使用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;

---

在这种特殊情况下，最后一种方法实际上看起来是最好的方法。它的缺点是必须重复属性名，但是如果您希望在源数组和目标数组中对道具进行不同的命名，那么这可能也很方便。

实际上您正在尝试将对象合并到两个数组中

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

常量initArray=[ {姓名：'约翰'，家庭：'多伊'}， {姓名：'Joanna'，家庭：'Doe'} ]; 警察性别=[ {性别：'男性'}， {性别：'女性'} ]; const ans=initArray.mapperson，索引=>{ const genderedPerson=Object.assign{}，person，genderArray[index]； 回归性别人； };

---

洛根 实际上，您正在尝试将对象合并到两个数组中

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

常量initArray=[ {姓名：'约翰'，家庭：'多伊'}， {姓名：'Joanna'，家庭：'Doe'} ]; 警察性别=[ {性别：'男性'}， {性别：'女性'} ]; const ans=initArray.mapperson，索引=>{ const genderedPerson=Object.assign{}，person，genderArray[index]； 回归性别人； };

---

洛根 问题是您试图在对象上使用array.push，但这不起作用

相反，您可以使用for循环遍历该数组，只需通过为其指定一个值（即另一个数组中该索引处的性别）向该索引添加一个“性别”类别：

initArray=[ {姓名：'约翰'，家庭：'多伊'}， {姓名：'Joanna'，家庭：'Doe'} ]; 性别=[ {性别：'男性'}， {性别：'女性'} ]; 对于var i=0；iconsole.loginitArray 问题是您试图在对象上使用array.push，但这不起作用

相反，您可以使用for循环遍历该数组，只需通过为其指定一个值（即另一个数组中该索引处的性别）向该索引添加一个“性别”类别：

< p> initArray=[ {姓名：'约翰'，家庭：'多伊'}， {姓名：'Joanna'，家庭：'Doe'} ]; 性别=[ {性别：'男性'}， {性别：'女性'} ]; 对于var i=0；iconsole.loginitArray 可以通过使用扩展运算符的方法合并两个数组：

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),[])

例如：

让initArray=[ {姓名：'约翰'，家庭：'多伊'}， {姓名：'Joanna'，家庭：'Doe'} ]; 让性别=[ {性别：'男性'}， {性别：'女性'} ]; const result=initArray.reducea，c，i=>{ a、 按{…c，…genderArray[i]} 返回a； },[]

---

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

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),[])

例如：

让initArray=[ {姓名：'约翰'，家庭：'多伊'}， {姓名：'Joanna'，家庭：'Doe'} ]; 让性别=[ {性别：'男性'}， {性别：'女性'} ]; const result=initArray.reducea，c，i=>{ a、 按{…c，…genderArray[i]} 返回a； },[]

---

---

LogResulty您正在推送到一个元素，而不是一个arrayLooks，就像您试图推送到一个对象一样。该对象是数组的一部分。您正在推送到一个元素，而不是一个数组。看起来就像您试图推送到一个对象一样。对象是数组的一部分。严格来说，array.map不应该修改原始数组的元素；它用于根据原始集合的某些转换创建新集合。所以你可以用像。。。返回{…person，genderArray[index]}。@raina77你说得对，我修改了我的答案，所以genderedPerson的生成也不会修改initArray。我喜欢spread运算符，但是我认为显式语法对于初学者来说更清晰。spread op很好，但是它经常被误用，每次使用它而不是Object.assign时，都会因为没有真正的原因而增加一个小的惩罚。这里有更多内容-严格来说，Array.map不应该修改原始数组的元素；它用于根据原始集合的某些转换创建新集合。所以你可以用像。。。返回{…person，genderArray[index]}。@raina77你说得对，我修改了我的答案，所以genderedPerson的生成也不会修改initArray。我喜欢spread运算符，但是我认为显式语法对于初学者来说更清晰。spread op很好，但是它经常被误用，每次使用它而不是Object.assign时，都会因为没有真正的原因而增加一个小的惩罚。这里有更多的内容-很酷，但是如果genderArray有两个属性，我只需要一个属性就可以推送到initArray怎么办？在这种情况下，您应该将genderArray[index]引用替换为非常直接的{gender:genderArray[index].gender，或者以一种稍微不同的方式执行它-但可能更清楚-我将在答案中描述。很酷，但是如果genderArray有2个属性，而我只需要一个属性就可以推送到initArray呢？在这种情况下，您应该将genderArray[index]引用替换为非常直接的{gender:genderArray[index].gender，或者以稍微不同的方式执行-但可能更清楚-我将在答案中描述。如果您使用不支持ES5的环境，请使用此选项。否则它将更难阅读-我变量将在整个函数范围内与您保持一致。如果我要将它从for var…更改为for const of…，我如何访问索引在这种情况下是x吗@raina77ow@alim1990我不确定在这里使用它是不是一个好主意-创建它是为了在索引不相关的情况下对元素进行迭代，而这里不是这样。为什么不使用.forEach？这个函数的用途与实际情况完全匹配：对原始数组的每个元素执行某些操作，但不要返回e result.@raina77ow我在我的回答中添加了一个使用array.forEach的解决方案。如果您使用的环境不支持ES5，请使用此解决方案。否则，它将更难读取-并且我变量将在整个函数范围内与您保持一致。如果我想将它从for var…更改为for const of…，在这种情况下，我如何访问索引？ @raina77ow@alim1990我不确定在这里使用它是不是一个好主意-创建它是为了在索引不相关的情况下对元素进行迭代，这里不是这样。为什么不使用.forEach？这个函数的用途与实际情况完全匹配：对原始数组的每个元素执行某些操作，但不要返回结果。@raina77现在，我在答案中添加了一个使用array.forEach的解决方案