为什么我的数组 reduce 函数是 return NaN？

Question

我有两个数组，一个数组只有包含随机数的数组中的 y 这样的属性 yIsGiven() 和一个数组，它等于第一个数组，但有一个区别，就是这次我的所有属性都是 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;
  }

如果我只更改一个值，我就无法对数组中的所有值求和，但是如果我想对数组中的不同属性求和怎么办？它只是不适用于 array reduce，或者我就是想不通。

非常感谢您的帮助，谢谢！

工作： 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);

修复错误。

为什么我的数组 reduce 函数是 return NaN？

Why is my array reduce function return NaN?

arrays

reduce

typescript

angular