Как объединить массивы объектов по ключу Id?

Функция принимает два аргумента массива и возвращает массив.

Массивы будут содержать объекты, представляющие некоторые записи.

Функция должна объединить два массива в новый массив при следующих условиях:

  • Скопируйте объекты с уникальными значениями свойства Id (т. е. объекты со значением Id, представленным только в одном массиве).
  • Объединить объекты с совпадающими значениями свойства Id (т. е. объекты со значением Id, присутствующим в обоих массивах).
  • Каждый объект в массиве будет иметь свойство Id.
  • Исходные объекты в обоих массивах должны оставаться неизменными.

Объединение объектов означает:

  1. Если оба массива содержат запись с одинаковым значением свойства Id, результат должен содержать запись со свойствами обеих записей.
  2. Если обе записи имеют одинаковое имя свойства, используйте значение из записи во втором массиве.
const array1 = [
  { Id: 'a1' },
  { Id: 'a2', Name: 'Record 2', Cost: 4 } // Record a2 has Name and Cost properties
];

const array2 = [
  { Id: 'a2', Cost: 6 }, // Record a2 has a Cost property with a different value
  { Id: 'a3' }
];

const result = mergeArrays(array1, array2);

// Expected result
[
  { Id: 'a1' },
  { Id: 'a2', Name: 'Record 2', Cost: 6 }, // Name from array1 and Cost from array2
  { Id: 'a3' }
]

Я пробовал это:

function mergeArrays(array1, array2) {  

  let array3 = array1.map((item, i) => Object.assign({}, item, array2[i]));
  
  return array3

}

Но в результате получается 2 объекта вместо 3:

(2) [{…}, {…}]
0: {Id: 'a2', Cost: 6}
1: {Id: 'a3', Name: 'Record 2', Cost: 4}length: 2

Также это:

function mergeArrays(array1, array2) {  

  const result = array2.map(item => {
const searchedItem = array1.find(fItem => fItem['id'] === 
item['id'] );
if (searchedItem && Object.keys(searchedItem).length > 0 ){
  item['id'] = searchedItem['id']
}else{
   item['id'] = 'null'
}
 return item;
});
return result
}

Но я продолжаю получать length = 2, хотя должно быть 3.

Я пробовал все, что нашел здесь, и не могу заставить его вернуть три объекта, как должен.

обратите внимание, что идентификатор не существует в наборе данных, но идентификатор (заглавная буква I) существует :)

Cisum Inas 17.11.2022 15:34

также сделайте практикой передачу ключа, который вы ищете, функции, просто чтобы сделать ее более общей...

Cisum Inas 17.11.2022 15:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
107
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Идея:

использование reduce() было бы лучшим вариантом. поэтому идея состоит в том, чтобы сначала передать данные array2 в reduce() в качестве начальных значений. а затем перебрать array1 и посмотреть любой Id из array1, уже присутствующий в acc, который содержит значения array2. если acc имеет такое же Id, это означает, что нам нужно объединить запись с acc[idx] и обновить ее старое значение. Если это не так, две записи array1 и array2 уникальны, поэтому нам нужно поместить текущий элемент array1 в acc как return [...acc, b].

const array1 = [{Id: 'a1'},{ Id: 'a2', Name: 'Record 2', Cost: 4 }]; 
const array2 = [{ Id: 'a2', Cost: 6 }, { Id: 'a3' }];

const mergeArrays = (arr1, arr2) => {
  return arr1.reduce((acc, b) => {
    const idx = acc.findIndex(item => item.Id === b.Id); //look for the acc has the same id while iterating array1
    if (idx > -1) { // if found need to merge with value of array2
      acc[idx] = Object.assign(b, acc[idx]);
      return acc;
    }
    return [...acc, b]; //if we don't find anything so "b" is an unique entry
  }, arr2); //inital values of reduce is from array2

}


console.info(mergeArrays(array1, array2));

Это делает точную работу :) Не могли бы вы немного уточнить? Я учусь, и что-то здесь я не совсем понимаю. Заранее спасибо за помощь Асраф!!

user18164791 17.11.2022 16:10

да, конечно, я добавил несколько комментариев и попытался написать дополнительную информацию.

Asraf 17.11.2022 16:13

спасибо за ваше время Асраф, это очень помогло! действительно мило :)

user18164791 17.11.2022 16:31

Другие вопросы по теме