Question

如何修复“未捕获的类型错误：无法设置未定义的属性‘0’”

2020-03-07

1932

javascript arrays object methods uncaught-exception

下面是尝试解决的代码，当在对象方法中声明数组（bill、tipValue、totalAmmount）时，我收到“无法设置属性‘0’未定义错误。但是，当在对象外部声明相同的数组时，我得到了预期的结果”

代码出现异常：

var john = {
    bill: [124, 48, 268, 180, 42],
    tipValue: [],
    totalAmmount: [],
    calcTip() {
        this.bill.forEach(function (ele, i) {
            this.tipValue[i] = innercalc(ele);
            this.totalAmmount[i] = this.tipValue[i] + ele;
        }); //not working code

        function innercalc(value) {
            if (value < 50)
                return value * 0.2;
            else if (value > 50 && value < 200)
                return value * 0.15;
            else if (value > 200)
                return value * 0.1;
        }
    }
}

john.calcTip();
console.log(john.tipValue);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script src="codingchallange5.js"></script>

</body>
</html>

未捕获的异常：无法设置未定义的属性‘0’

正在运行的代码：

var tipValue = [];
var totalAmmount = [];
var john = {
    bill: [124, 48, 268, 180, 42],
    // tipValue: [],
    // totalAmmount: [],
    calcTip() {
        this.bill.forEach(function (ele, i) {
            tipValue[i] = innercalc(ele);
            totalAmmount[i] = tipValue[i] + ele;
        }); //not working code

        function innercalc(value) {
            if (value < 50)
                return value * 0.2;
            else if (value > 50 && value < 200)
                return value * 0.15;
            else if (value > 200)
                return value * 0.1;
        }
    }
}

john.calcTip();
console.log(tipValue);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="codingchallange5.js"></script>

</body>
</html>

Answer 1

使用箭头函数。它不会干扰 this ，一切都会按预期工作：

var john = {
  bill: [124, 48, 268, 180, 42],
  tipValue: [],
  totalAmmount: [],
  calcTip() {

    this.bill.forEach((ele, i) => { // replace with arrow function here
      this.tipValue[i] = innercalc(ele);
      this.totalAmmount[i] = this.tipValue[i] + ele;
    });

    function innercalc(value) {
      if (value < 50)
        return value * 0.2;
      else if (value > 50 && value < 200)
        return value * 0.15;
      else if (value > 200)
        return value * 0.1;
    }

  }
}

john.calcTip();
console.log(john.tipValue);

来自 MDN： 箭头函数表达式是正则函数表达式的一种语法紧凑的替代方法，尽管它本身没有与 this 、 arguments 、 super 或 new.target 关键字的绑定。

Answer 2

当您在函数 forEach() 中使用 this 时，由于您未传递任何引用参数，因此默认情况下它是 undefined 。您需要将对 john 的引用传递给 forEach() ！

this.bill.forEach(function (ele, i) {
            this.tipValue[i] = innercalc(ele);
            this.totalAmmount[i] = this.tipValue[i] + ele;
        }, this);

array.forEach(function(currentValue, index, arr), thisValue)

thisValue ：

可选。要传递给函数的值，用作其“this”值。
如果此参数为空，则值“undefined”将作为其“this”值传递。

JavaScript 数组 forEach() 方法