为什么我的数组 reduce 函数返回 NaN？

Question

我有两个数组，一个数组在包含随机数yIsGiven() 的数组中只有一个属性，如 y 和一个数组，它等于第一个数组，但有一个区别，此时我的所有属性都是y 除了一个，还有一个 z，还有随机数zIsGiven()。

我的目标是将所有这些都计算在一起，在我的第一个数组上它工作得很好，但在我的第二个数组中它不起作用只是因为我将一个 y 属性更改为 z 并且我得到 NaN.

我想将数组中的所有值相加，我该如何使用zIsGiven()？

我的 app.component.html：

<h4>My array is in total:</h4>
<p>{{yIsGiven()}}</p>

<h4>But if I change my attribute from y to z I get:</h4>
<p>{{zIsGiven()}}</p>

我的 app.component.ts：

yIsGiven() {
    var temp = [
      {
        name: "Agency",
        y: 110, /* All attributes are y */
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        y: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        y: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.y;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

  zIsGiven() {
    var temp = [
      {
        name: "Agency",
        z: 110 /* For example this is now z and not y */,
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        y: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        y: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.y;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

如果我只更改一个值，我就无法汇总数组中的所有值，但是如果我的数组中有不同的属性要汇总怎么办？它只是不适用于数组减少，或者我无法弄清楚。

感谢您的每一个帮助，谢谢！

工作： https://stackblitz.com/edit/angular-ivy-tanetr?file=src%2Fapp%2Fapp.component.html

最好的问候

Answer 1

将 zIsGiven 更改为：

    zIsGiven() {
    var temp = [
      {
        name: "Agency",
        z: 110 /* For example this is now z and not y */,
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        z: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        z: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.z;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

Answer 2

如果您查看对象定义，第一个具有z 属性，其他具有y 属性。

因为一个是undefined（正如你要求的obj.y）undefined加上一个数字给你NaN

您可以在注释掉.reduce() 后通过console.log(reduced) 进行检查

Answer 3

数组中的一个变量的y属性未定义，你可以这样做：

var reduced = temp
  .map(function(obj) {
    return obj.y;
  })
  .reduce(function(a, b) {
    if (b === undefined) return a;
    return a + b;
  }, 0);

修复错误。