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

Question

У меня есть два объекта массива (arrayList1, arrayList2).Просто я пытаюсь объединить эти два массива в один объект массива.Следующие термины, которые я использовал.

• Оба массива объединены в один массив на основе имени ключа: type .
• arrayList2 значения будут перезаписаны arrayList1.
• Я получил ожидаемый результат, но мне хотелось бы использовать эффективный и эффективный способ ..

Может кто-нибудь, пожалуйста, упростить мой код ..

Примечание:

• Было бы замечательно, если бы вы использовали функцию Array.reduce и не использовали плагин / библиотеку.
• Я добавил для понимания понимание smaple.Изменится порядок элементов и размер обоих массивов.

const arrayList1 = [
    { type: "A", any: 11, other: "ab", props: "1" },
    { type: "B", any: 22, other: "bc", props: "2" }, // same type
    { type: "C", any: 33, other: "df", props: "3" }
];
 
const arrayList2 = [
    { type: "D", any: 44, other: "aa", props: "11" },
    { type: "B", any: 22, other: "bb", props: "2----2" , x: 10}, // same type
    { type: "E", any: 44, other: "cc", props: "33" }
];

result = arrayList2.reduce(function (arr1, arr2) {
  let isMatchFound = false;
  arr1.forEach(function (list) {
    if (arr2.type == list.type) {
      list = Object.assign(list, arr2);
      isMatchFound = true;
    }
  });
  if (!isMatchFound) {
    arr1.push(arr2);
  }
  return arr1;
}, arrayList1);

console.log('result', JSON.stringify(result));

Answer 1

Вы можете сделать что-то подобное, используя reduce и Object.values

const array1 = [
    { type: "A", any: 11, other: "ab", props: "1" },
    { type: "B", any: 22, other: "bc", props: "2" }, // same type
    { type: "C", any: 33, other: "df", props: "3" }
];
 
const array2 = [
    { type: "D", any: 44, other: "aa", props: "11" },
    { type: "B", any: 22, other: "bb", props: "2----2" , x: 10}, // same type
    { type: "E", any: 44, other: "cc", props: "33" }
];

const mapped = array1.reduce((a,t)=> (a[t.type] = t, a), {}),
      mapped2 = array2.reduce((a,t)=> (a[t.type] = t, a), {})

console.log(Object.values({...mapped, ...mapped2}))

Answer 2

Если использование функции reduce необязательно, вы можете использовать метод filter для достижения желаемого результата

const arrayList1 = [
    { type: 'A', any: 11, other: 'ab', props: '1' },
    { type: 'B', any: 22, other: 'bc', props: '2' },
    { type: 'C', any: 33, other: 'df', props: '3' }
];
 
const arrayList2 = [
    { type: 'D', any: 44, other: 'aa', props: '11' },
    { type: 'B', any: 22, other: 'bb', props: '2----2' , x: 10},
    { type: 'E', any: 44, other: 'cc', props: '33' }
];

// make a copy of arrayList1 so original list is not modified
const list1Copy = arrayList1.slice();

let exists;

const temp = arrayList2.filter((list2Item, index) => { 
  exists = false;
  
  list1Copy.forEach(list1Item => {
    if(list2Item.type === list1Item.type)
        exists = true;
  });
  
  if(exists)
     list1Copy[index] = list2Item;
  
  return !exists;
});

result = list1Copy.concat(temp);

console.log(JSON.stringify(result));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Если вы просто хотите уменьшить свой код:

const arrayList1 = [
    { type: "A", any: 11, other: "ab", props: "1" },
    { type: "B", any: 22, other: "bc", props: "2" }, // same type
    { type: "C", any: 33, other: "df", props: "3" }
];
 
const arrayList2 = [
    { type: "D", any: 44, other: "aa", props: "11" },
    { type: "B", any: 22, other: "bb", props: "2----2" , x: 10}, // same type
    { type: "E", any: 44, other: "cc", props: "33" }
];

result = arrayList2.reduce(function(arr1, arr2) {
  if (arr1.find(({ type }) => type == arr2.type)) {
    arr1[arr1.indexOf(arr1.find(({ type }) => type == arr2.type))] = Object.assign(arr1.find(({ type }) => type == arr2.type), arr2);
    arr1.push(arr2);
  }
  return arr1;
}, arrayList1);

console.log('result', JSON.stringify(result));

Answer 4

Если вам не нужен arrayList1 до arrayList2, вы можете использовать этот простой подход.Что я сделал, так это то, что я деструктурировал все элементы arrayList2 и только те элементы arrayList1, чей ключ не существует в arrayList1.

PS проблема с reduce в том, что вам нужно уменьшить самый большой массив, иначе вы пропуститеэлементы большего массива.

const arrayList1 = [
    { type: "A", any: 11, other: "ab", props: "1" },
    { type: "B", any: 22, other: "bc", props: "2" }, // same type
    { type: "C", any: 33, other: "df", props: "3" }
];
 
const arrayList2 = [
    { type: "D", any: 44, other: "aa", props: "11" },
    { type: "B", any: 22, other: "bb", props: "2----2" , x: 10}, // same type
    { type: "E", any: 44, other: "cc", props: "33" }
];
const output = [...arrayList2, ...arrayList1.filter(el1 => !arrayList2.some(el2 => el2.type === el1.type))]
//[].concat(arrayList2, arrayList1.filter(el1 => !arrayList2.some(el2 => el2.type === el1.type)))

console.log(output)

Answer 5

Вы также можете использовать методы .reduce() и Object.values() для получения желаемого результата:

const arrayList1 = [
    { type: "A", any: 11, other: "ab", props: "1" },
    { type: "B", any: 22, other: "bc", props: "2" }, // same type
    { type: "C", any: 33, other: "df", props: "3" }
];
 
const arrayList2 = [
    { type: "D", any: 44, other: "aa", props: "11" },
    { type: "B", any: 22, other: "bb", props: "2----2" , x: 10}, // same type
    { type: "E", any: 44, other: "cc", props: "33" }
];

const result = Object.values(
   [].concat(arrayList1, arrayList2)
     .reduce((r, c) => (r[c.type] = Object.assign((r[c.type] || {}), c), r), {})
);
                 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }