Как обновить массив в javascript

У меня есть 2 массива объектов. Первый массив имеет 12 записей с двумя датами и стоимостью (все равны нулю). Другой массив имеет только 5 записей с одинаковыми датой и стоимостью 2 свойств (имеет значения).

Как обновить массив 1 на основе массива 2, совпадающего с датой и обновляющего стоимость?

array1 = [
    {
        date: '2020-01',
        cost: 0
    },
    {
        date: '2020-02',
        cost: 0
    },
    {
        date: '2020-03',
        cost: 0
    },
    {
        date: '2020-04',
        cost: 0
    },
    {
        date: '2020-05',
        cost: 0
    },
    {
        date: '2020-06',
        cost: 0
    },
    {
        date: '2020-07',
        cost: 0
    },
    {
        date: '2020-08',
        cost: 0
    },
    {
        date: '2020-09',
        cost: 0
    },
    {
        date: '2020-10',
        cost: 0
    },
    {
        date: '2020-11',
        cost: 0
    },
    {
        date: '2020-12',
        cost: 0
    }
];


array2 = [
    {
        date: '2020-01',
        cost: 10
    },
    {
        date: '2020-02',
        cost: 5
    },
    {
        date: '2020-05',
        cost: 20
    },
    {
        date: '2020-06',
        cost: 65
    },
    {
        date: '2020-07',
        cost: 11
    }
];

конечный массив:

finaArray = [
    {
        date: '2020-01',
        cost: 10
    },
    {
        date: '2020-02',
        cost: 5
    },
    {
        date: '2020-03',
        cost: 0
    },
    {
        date: '2020-04',
        cost: 0
    },
    {
        date: '2020-05',
        cost: 20
    },
    {
        date: '2020-06',
        cost: 65
    },
    {
        date: '2020-07',
        cost: 11
    },
    {
        date: '2020-08',
        cost: 0
    },
    {
        date: '2020-09',
        cost: 0
    },
    {
        date: '2020-10',
        cost: 0
    },
    {
        date: '2020-11',
        cost: 0
    },
    {
        date: '2020-12',
        cost: 0
    }
];

Что я сделал до сих пор:

const test = array1.map((e1, i1) => {
    array2.map((e2, i2) => {
        if (e1.date === e2.date) {
            
        }
    });
});

@blex попытался снова открыть его и отправить изменение, о котором идет речь, но не позволил мне. Просто хотел отправить его до конца выходных, иначе я бы не вернулся к нему до следующих выходных. Но спасибо за помощь

MrLenny2021 14.12.2020 09:44

Нет проблем, я просто сообщал вам, что если бы вы подождете еще 2 минуты, еще 1 человек проголосовал бы за его повторное открытие, и вы бы получили ответы;)

blex 14.12.2020 10:40

Спасибо blex, новичок в этом и в том, как это работает. Теперь я знаю, что в следующий раз надо быть более терпеливым.

MrLenny2021 14.12.2020 13:37
Поведение ключевого слова "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) для оценки ваших знаний,...
0
3
57
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете использовать фильтр , чтобы получить элементы с одинаковой датой, и уменьшить, чтобы вычислить сумму их стоимости:

const array1 = [{date:"2020-01",cost:0},{date:"2020-02",cost:0},{date:"2020-03",cost:0},{date:"2020-04",cost:0},{date:"2020-05",cost:0},{date:"2020-06",cost:0},{date:"2020-07",cost:0},{date:"2020-08",cost:0},{date:"2020-09",cost:0},{date:"2020-10",cost:0},{date:"2020-11",cost:0},{date:"2020-12",cost:0}],
      array2 = [{date:"2020-01",cost:10},{date:"2020-02",cost:5},{date:"2020-05",cost:20},{date:"2020-06",cost:65},{date:"2020-07",cost:11}];

const test = array1.map((a) => {
  const toMerge = array2.filter(b => a.date === b.date);
  
  return {
    ...a,
    cost: [a].concat(toMerge).reduce((sum, {cost}) => sum + cost, 0)
  };
});

console.info(test);

Ответ Blex отлично работает, ниже другого базового решения: (проверено)

var finalArray = [];
for (var i = 0; i < array1.length - 1; i++) {
  finalArray.push(array1[i]);
  for (var j = 0 ; j < array2.length - 1; j++) {
      if (array1[i].date == array2[j].date) {
          finalArray[i].cost = array2[j].cost + array1[i].cost;
          break;
      }
  }
}
console.info(finalArray); 

прикрепил снимок экрана с окончательными значениями массива

Финальный массив

обновить массив1 (без создания нового массива)

const array1 = [{date:"2020-01",cost:0},{date:"2020-02",cost:0},{date:"2020-03",cost:0},{date:"2020-04",cost:0},{date:"2020-05",cost:0},{date:"2020-06",cost:0},{date:"2020-07",cost:0},{date:"2020-08",cost:0},{date:"2020-09",cost:0},{date:"2020-10",cost:0},{date:"2020-11",cost:0},{date:"2020-12",cost:0}],
      array2 = [{date:"2020-01",cost:10},{date:"2020-02",cost:5},{date:"2020-05",cost:20},{date:"2020-06",cost:65},{date:"2020-07",cost:11}];

array2.forEach(a2=>
  {
  let a1 = array1.find(x=>x.date===a2.date)
  if (a1) a1.cost = a2.cost 
  })
array1.forEach( (a1,i) => console.info(`array1[${i}] -> ${JSON.stringify(a1)}`))

Если массив1 и массив2 находятся в одном порядке, и каждый элемент массива2 существует в массиве1:

const array1 = [{date:"2020-01",cost:0},{date:"2020-02",cost:0},{date:"2020-03",cost:0},{date:"2020-04",cost:0},{date:"2020-05",cost:0},{date:"2020-06",cost:0},{date:"2020-07",cost:0},{date:"2020-08",cost:0},{date:"2020-09",cost:0},{date:"2020-10",cost:0},{date:"2020-11",cost:0},{date:"2020-12",cost:0}],
      array2 = [{date:"2020-01",cost:10},{date:"2020-02",cost:5},{date:"2020-05",cost:20},{date:"2020-06",cost:65},{date:"2020-07",cost:11}];

let a2 = array2.shift()
for(a1 of array1)
  {
  if (a2.date===a1.date)
    {
    a1.cost = a2.cost
    a2      = array2.shift()
    }
  if (!a2) break // stop loop update
  }

// proof...
array1.forEach( (a1,i) => console.info(`${i}-> ${JSON.stringify(a1)}`))
Ответ принят как подходящий

Мой ответ перебирает каждый экземпляр только один раз в каждом массиве, превращая массив2 в объект с датой в качестве ключа, используя Object.assign(), который затем сравнивается с массивом1 через map() путем поиска даты.

function turnIntoObj(arr) {
  return Object.assign(...arr.map(item => ({ [item.date]: item.cost })));
}

function joinArr(originalArr, toBeAddedArr) {
  let toBeAddedObj = turnIntoObj(toBeAddedArr);

  return originalArr.map((item) => {
    if (toBeAddedObj[item.date]) { 
      item.cost += toBeAddedObj[item.date];
    }
    return item;
  });
}


array1 = [
    {
        date: '2020-01',
        cost: 0
    },
    {
        date: '2020-02',
        cost: 0
    },
    {
        date: '2020-03',
        cost: 0
    },
    {
        date: '2020-04',
        cost: 0
    },
    {
        date: '2020-05',
        cost: 0
    },
    {
        date: '2020-06',
        cost: 0
    },
    {
        date: '2020-07',
        cost: 0
    },
    {
        date: '2020-08',
        cost: 0
    },
    {
        date: '2020-09',
        cost: 0
    },
    {
        date: '2020-10',
        cost: 0
    },
    {
        date: '2020-11',
        cost: 0
    },
    {
        date: '2020-12',
        cost: 0
    }
];


array2 = [
    {
        date: '2020-01',
        cost: 10
    },
    {
        date: '2020-02',
        cost: 5
    },
    {
        date: '2020-05',
        cost: 20
    },
    {
        date: '2020-06',
        cost: 65
    },
    {
        date: '2020-07',
        cost: 11
    }
];

let updatedArr = joinArr(array1, array2);
console.info(updatedArr);

Вы можете использовать сокращение, чтобы сделать это,

array1 = [
    {
        date: '2020-01',
        cost: 0
    },
    {
        date: '2020-02',
        cost: 0
    },
    {
        date: '2020-03',
        cost: 0
    },
    {
        date: '2020-04',
        cost: 0
    },
    {
        date: '2020-05',
        cost: 0
    },
    {
        date: '2020-06',
        cost: 0
    },
    {
        date: '2020-07',
        cost: 0
    },
    {
        date: '2020-08',
        cost: 0
    },
    {
        date: '2020-09',
        cost: 0
    },
    {
        date: '2020-10',
        cost: 0
    },
    {
        date: '2020-11',
        cost: 0
    },
    {
        date: '2020-12',
        cost: 0
    }
];


array2 = [
    {
        date: '2020-01',
        cost: 10
    },
    {
        date: '2020-02',
        cost: 5
    },
    {
        date: '2020-05',
        cost: 20
    },
    {
        date: '2020-06',
        cost: 65
    },
    {
        date: '2020-07',
        cost: 11
    }
];

const ret = array1.reduce((acc, curr) => {
    const index = array2.findIndex(item => item.date === curr.date);
    if (index > -1){
         curr.cost = array2[index].cost;
    }
    acc.push(curr);
    return acc;
}, []);

console.info(ret);

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