How to fix "Uncaught TypeError: Cannot set property '0' of undefined"

Question

下面是我尝试计算的代码，当在对象方法中声明数组（bill、tipValue、totalAmmount）时，我得到 "cannot set property '0' undefined error. But, When the same arrays are declared outside the object then i get expected result"

代码出现异常：

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>

Uncaught Exception: Cannot set Property '0' of undefined

有效代码：

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

当你在函数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)

这个值:

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

JavaScript Array forEach() Method

Answer 2

使用箭头函数。它不会与 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 个关键字。

How to fix "Uncaught TypeError: Cannot set property '0' of undefined"

How to fix "Uncaught TypeError: Cannot set property '0' of undefined"

javascript

arrays

methods

object

uncaught-exception