Javascript объединить и заменить значение ключом на 2 массивах объектов

Question

Я хотел бы объединить 2 массива объектов в Javascript, исходный массив выглядит примерно так:

padding = [{'t': 1, 'c': 0}, {'t': 2, 'c': 0}, {'t': 3, 'c': 0}]
data = [{'t': 3, 'c': 5}]

Результат должен выглядеть следующим образом:

result = [{'t': 1, 'c': 0}, {'t': 2, 'c': 0}, {'t': 3, 'c': 3}]

Пожалуйста обратите внимание, что data заполняется в padding соответствием 't'. Я пробовал различные методы, такие как jQuery $.extend({}, padding, data), однако он не выводит корректно.

Оцените, если вы что-то поделитесь. Спасибо.

Редактировать 1 (10 апреля 2020 г.)

Как указал @ codemania c, у меня была опечатка, результат должен быть:

result = [{'t': 1, 'c': 0}, {'t': 2, 'c': 0}, {'t': 3, 'c': 5}]

Дополнительно (10 апреля 2020 г.)

У меня есть padding длина 1000, для data, это должно быть подмножество padding с помощью клавиши 't'.

Я ищу эффективный способ «слияния» и «замены» data на padding, некоторые называют его «сложением», учитывая, что padding всегда будет дополнен с 'c': 0 для каждого объекта.

Я не против попробовать утилиту lodash JS, если это возможно.

Answer 1

Если вы хотите объединить массивы, а также заменить объекты из padding объектами из data, учитывая значение t, это один из способов:

const padding = [{'t': 1, 'c': 0}, {'t': 2, 'c': 0}, {'t': 3, 'c': 0}];
const data = [{'t': 3, 'c': 5}, {'t': 5, 'c': 6}];

const merged = [];

// loops through the objects in padding. If it finds an object in data that has the same t value, it chooses the object from data to add to the merged array. Otherwise, it uses the object from padding

padding.forEach((obj) => {
 	let dataObj = data.find(dataObj => dataObj.t === obj.t);
	if (dataObj) {
		merged.push(dataObj);
	} else {
		merged.push(obj);
	}
});

// loops through the data array. If there are any objects in data with a t value not in any padding object, it adds this to the merged array

data.forEach((obj) => {
	let paddingObj = padding.find(paddingObj => obj.t === paddingObj.t);
	if (!paddingObj) {
		merged.push(obj);
	}
});

console.log(merged);

Answer 2

Вы можете использовать Map и map

• Сначала используйте Map для построения объекта карты из данных с ключом t и значением c
• Теперь l oop поверх массива заполнения и посмотрите, присутствует ли t это Map, мы используем значение c из Map и только из текущего элемента

const padding = [{'t': 1, 'c': 0}, {'t': 2, 'c': 0}, {'t': 3, 'c': 0}];
const data = [{'t': 3, 'c': 5}];

const mapper = new Map(data.map(( { t, c } ) => [t, c] ));

const final = padding.map(({ t, c }) => ({
    t,
    c: mapper.has(t) ? mapper.get(t) : c
}));

console.log(final);

Answer 3

Полагаю, вы хотите добавить дополнение, чтобы получить правильный размер вашего элемента (отступ + ширина)

const padding = [{
  t: 1,
  c: 0,
}, {
  t: 2,
  c: 0,
}, {
  t: 3,
  c: 0,
}];

const data = [{
  t: 3,
  c: 5,
}];

// Use a reduce to build the new array
function mergeData(d1, d2) {
  return d2.reduce((tmp, x) => {
    // Check if the array already contains the key 't'
    const found = tmp.find(y => y.t === x.t);

    // If it does, add 'c' together
    if (found) {
      found.c += x.c;
    } else {
      // else, add the missing entry
      tmp.push(x);
    }

    return tmp;
  }, d1);
}

console.log(mergeData(data, padding));

Answer 4

Я не уверен в эффективности, но этот кусок кода работает и довольно читабелен

var padding = [{'t': 1, 'c': 0}, {'t': 2, 'c': 0}, {'t': 3, 'c': 0}]
var data = [{'t': 3, 'c': 5}, {'t': 4, 'c': 5}]

data.forEach(d => {
    padding.find(p => p.t === d.t).c = d.c
})

console.log(padding)
// OUTPUT: [ { t: 1, c: 0 }, { t: 2, c: 0 }, { t: 3, c: 5 } ]