如何正确地将具有多个元素的新对象推送到数组中？

Question

我正在尝试将新生成的对象推送到 JavaScript 中的数组中

我有一个表单数组：

savings: any = [{month: "January", amount: 300}, {month: "February",  amount:450}, {month: "March", amount: 500}]

以及一个名为 savings_bf 的变量；

savings_bf = 15000 

我使用数组 savings 和 savings_bf 中的 amount 值来计算运行总计，使用此处提供的解决方案 https://stackoverflow.com/a/57737436/11849137获取输出：

_total_cf = [15300,15750,16250] 

我的代码如下所示；

savings.forEach(s =>s.total_cf = _total_cf)

新 savings 数组的预期输出应该是：

[{month: "January", amount: 300, total_cf: 15300 }, {month: "February",  amount:450, total_cf: 15750}, {month: "March", amount: 500 total_cf: 16250}]

实际输出：

[{month: "January", amount: 300, total_cf: [15300,15750,16250]}, {month: "February",  amount:450, total_cf: [15300,15750,16250]}, {month: "March", amount: 500 total_cf: [15300,15750,16250]}]

Answer 1

只需.map() 数组，添加您在循环期间更新的运行总数。

const months = [
  {month: "January", amount: 300},
  {month: "February",  amount:450},
  {month: "March", amount: 500}
];
const savings = 15000;
let running_total = savings;
const updated_months = months.map( item => {
  running_total += item.amount;
  return {
    month: item.month,
    amount: running_total
  };
});
console.log( updated_months );

如果出于某种原因您还需要 _total_cf 变量来做其他事情，您可以轻松地再次提取它：

const updated_months = [
  {month: "January", amount: 15300},
  {month: "February",  amount:15750},
  {month: "March", amount: 16250}
];

const _total_cf = updated_months.map( item => item.amount );

console.log( _total_cf );

Answer 2

您可以使用提供给forEach 的回调方法的第二个参数来跟踪索引。由于_total_cf 是一个数组，因此您需要根据索引访问适当的项目。您可以在回调中使用 index 如下：

var savings = [{month: "January", amount: 300}, {month: "February",  amount:450}, {month: "March", amount: 500}]

var _total_cf = [15300,15750,16250];

savings.forEach((s, index) => s.total_cf = _total_cf[index]) ;

console.log(savings);

Answer 3

您可以使用Array.prototype.map 来映射数组中的每个对象，并使用它在回调（第二个参数）中提供的索引 从_total_cf 数组中获取相应的元素。

还可以使用扩展运算符... 与之前的对象属性和_total_cf 数组中的新属性进行合并：

const savings = [{month: "January", amount: 300}, {month: "February",  amount:450}, {month: "March", amount: 500}];

const _total_cf = [15300,15750,16250];

const result = savings.map((obj, idx) => ({...obj, total_cf: _total_cf[idx]}));

console.log(result);

在您的代码中，您将整个 total_cf 数组分配给您在每次迭代中创建的 total_cf 属性。

//the entire array is assigned to the `total_cf` property.
savings.forEach(s =>s.total_cf = _total_cf);

另外，您正在改变forEach 中savings 数组中的原始对象。在map 操作中，将返回一个新数组，其中包含新对象，其中包含旧道具以及您要添加的新属性。

Answer 4

你也可以使用reduce来计算total_cf

试试下面的代码

const savings = [
  {month: "January", amount: 300},
  {month: "February",  amount:450},
  {month: "March", amount: 500}
];
const savings_bf = 15000;

savings.reduce((a,b)=>{
    b.total_cf = (a[a.length-1] ? a[a.length-1].total_cf : savings_bf) + b.amount 
    a.push(b)
    return a
},[])

Answer 5

您可以使用正确的方法来计算您的 Savings_bf，并且您可以一次完成所有操作。

    var savings = [{month: "January", amount: 300}, {month: "February",  amount:450}, {month: "March", amount: 500}];
    var savings_bf = 15000 ;
   savings.forEach(function(val) {
  //  console.log(val);
val['savings_bf'] = parseInt(savings_bf)+val['amount'];
});
    console.log(savings);

Answer 6

//  You can use following code.
savings.forEach((item, index, array) => {
    savings[index].total_cf = _total_cf[index];
});