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)