Javascript как вывести sh новый элемент из исходного массива в каждый массив внутри массива массивов с тем же индексом?

Question

Я хочу добавить новое свойство в массив из другого массива, используя индексы обоих.

Например, допустим, у меня есть следующий массив:

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

И массив, который Я хочу взять из него и pu sh это в 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] .pu sh не является функцией

Вот стекблитц .

Answer 1

Во-первых, вы не должны pu sh до initArray: вы не добавляете элементы к initArray, но вместо этого добавляете свойство к каждому из его элементов.

Один из возможных способов сделать это:

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

... или, если по какой-то причине вы хотите создать совершенно новый массив новых «обогащенных» объектов вместо модификации объектов напрямую:

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

Во-вторых, не используйте Object.keys () до go через массив: используйте либо 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?), но это зависит от выбора стиля реализации.

---

Если в элементах массива есть свойство« больше » чтобы быть «смешанным», но вы хотите только один, вы можете либо go direct:

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 2

Вы можете объединить два массива методом 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 3

Проблема в том, что вы пытаетесь использовать array.push() для объекта, который не работает.

Вместо этого вы можете использовать от for l oop до go через массив, и просто добавьте категорию «пол» к этому индексу, присвоив ему значение, а именно пол этого индекса в другом массиве:

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

На самом деле вы пытаетесь «объединить» объекты в двух массивах.

Есть много способов реализовать это, но я думаю, что самый простой из них - с функциями 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 расширяет объект, добавляя ему дополнительные свойства из другого объекта ( s).