尝试使用 For 函数获取一些信息答案

【问题标题】：Trying to get some information with a For function尝试使用 For 函数获取一些信息
【发布时间】：2019-12-10 02:47:10
【问题描述】：

我正在开发一个 Angular 项目，我想在其中捕获所有 encCharge 以将它们添加到我的 cf 中使用 for 函数提供所有 encCharge 的总数。

这是我的数组：

produits = [
    {
      cf1: {
        cfTitle: 'prInfiniti30j',
        encCharge: 12345.75,
        encBonifie: 47730.56
      },
      cf2: {
        cfTitle: 'prInfiniti30j',
        encCharge: 18400.94,
        encBonifie: 38268.56
      },
      cf3: {
        cfTitle: 'prInfiniti30j',
        encCharge: 18392.00,
        encBonifie: 30570.56
      },
      cf4: {
        cfTitle: 'prInfiniti30j',
        encCharge: 0.00,
        encBonifie: 15230.56
      },
    },
  ];

这是我的 for 功能和我尝试过的东西，但我无法找到我正在寻找的东西。

ngOnInit(){
for (let testing in this.produits[0]) {
  console.log(this.produits[0].cf1.encBonifie);
  // console.log(this.produits[0].testing.encCharge);
  // console.log(testing.encCharge);
}`

这是我期望的结果：

let totalEncCharge = this.produits[0].cf1.encCharge + 
this.produits[0].cf2.encCharge + this.produits[0].cf3.encCharge + 
this.produits[0].cf4.encCharge ;
console.log(totalEncCharge);

感谢您的帮助

【问题讨论】：

代替这个：console.log(this.produits[0].cf1.encBonifie);，使用testing 变量，例如：console.log(this.produits[0][testing].encBonifie);
考虑在for 循环中记录console.log(JSON.stringify(testing))。也不是将for..in 用于数组是不好的做法。见Why is using “for…in” with array iteration a bad idea?

标签： javascript angular typescript for-loop

【解决方案1】：

请看一下，希望对你有帮助。

ngOnInit(){
    let totalEncCharge = 0;
    for (let i = 0 ; i < this.produits.length; i++) {
       let key = 'cf'+(i+1);
       totalEncCharge = totalEncCharge + this.produits[i].key.encCharge
    }
    console.log(totalEncCharge);   
}

【讨论】：

我认为 totalEncCharge 只会加载循环中的最后一个值，应该是这样的吗？ ``` 让 totalEncCharge = 0; for (let i = 0 ; i
首先，你在总结 encBonifie 这是错误的。其次，您正在遍历仅包含单个元素但不包含对象键的数组，因此即使您确实将 encBonifie 替换为 encCharge，结果仍然是错误的。
您好，感谢您的帮助，但这不会给我所有 cf no 的所有 encCharge 的总和？
@AdleySlb 我更新了代码，请检查一次谢谢。
@assoron 请看看现在一切正常，谢谢

【解决方案2】：

下面应该通过Object.values()首先从内部对象中获取值。之后，您可以使用 reduce 将它们简单地相加。

var produits = [{cf1:{cfTitle:'prInfiniti30j',encCharge:12345.75,encBonifie:47730.56},cf2:{cfTitle:'prInfiniti30j',encCharge:18400.94,encBonifie:38268.56},cf3:{cfTitle:'prInfiniti30j',encCharge:18392.00,encBonifie:30570.56},cf4:{cfTitle:'prInfiniti30j',encCharge:0.00,encBonifie:15230.56},},]

let totalEncCharge = Object.values(produits[0]).reduce((a,c) => a += c.encCharge, 0)

console.log(totalEncCharge);

这是使用for ... in 迭代数据结构的一种方法：

var produits = [{cf1:{cfTitle:'prInfiniti30j',encCharge:12345.75,encBonifie:47730.56},cf2:{cfTitle:'prInfiniti30j',encCharge:18400.94,encBonifie:38268.56},cf3:{cfTitle:'prInfiniti30j',encCharge:18392.00,encBonifie:30570.56},cf4:{cfTitle:'prInfiniti30j',encCharge:0.00,encBonifie:15230.56},},];

let totalCharge = 0;
for (let key in produits[0]) {
 totalCharge += produits[0][key].encCharge;
}

console.log(totalCharge)

【讨论】：

在使用for ... in 时，您可能需要使用hasOwnProperty 添加检查以防止副作用。看看这个问题：stackoverflow.com/questions/12735778/for-in-and-hasownproperty

【解决方案3】：

您也可以尝试使用Object.keys

var total = 0;
Object.keys(this.produits[0]).map(item=>{
  total+=this.produits[0][item].encCharge });
console.log(total);

*编辑：如果您不希望返回任何值，而是设置一些其他属性，如示例中所示，最好使用forEach 而不是map

【讨论】：

感谢您的帮助！！这就是我一直在寻找的。span>
很好的解决方案，在不改变某些东西的情况下进行迭代（但对于这里的副作用）使用forEach 而不是map。
是的，你是对的，使用forEach 是更好的方法。
你知道为什么我不能在我的 HTML 中调用变量吗？就像我 {{ total }} 它没有在 HTML 页面上显示任何内容一样，它是在 ngOnInit 的正确位置还是应该在构造函数上？感谢您的帮助
为了能够在模板中使用它，它需要是一个类属性，即在类的任何方法之外定义。在你的类声明下声明一个变量，例如public total: number;，然后在你的计算下做this.total = total。

【解决方案4】：

您可以使用reduce 方法来汇总总数。

const pluck = (a) => a.encCharge;
const sum = (a, b) => a + b;
const total = Object.values(this.produits[0])
                    .map(pluck)
                    .reduce(sum, 0);

【讨论】：

@assoron 啊，我明白了。 produits 是一个数组。谢谢。
将 Object.values(this.produits) 更改为 Object.values(this.produits[0]) ，它将返回一个数字而不是 NaN。