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

【问题标题】：How to fix "Uncaught TypeError: Cannot set property '0' of undefined"如何修复“未捕获的类型错误：无法设置未定义的属性 '0'”
【发布时间】：2020-06-19 18:58:23
【问题描述】：

下面是我试图弄清楚的代码，当在对象方法中声明数组（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>

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>

【问题讨论】：

标签： javascript arrays object methods uncaught-exception

【解决方案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 或 @987654326 @关键字。

【讨论】：

【解决方案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 Array forEach() Method

【讨论】：