Question

无法使用 forEach 动态创建数组

2019-12-16

62

javascript arrays object foreach

在下面的代码中，当我控制 calculateTips() 的值时，我收到以下错误

Uncaught TypeError: Cannot set property '0' of undefined

let tipCal = {
  bills: [124, 48, 268, 180, 42],
  calculateTips: function() {
    this.tips = [];
    this.finalValue = [];
    (this.bills).forEach(function(item, index) {
      if (item < 50) {
        this.tips[index] = (item * .2);
      } else if (item >= 50 && item < 200) {
        this.tips[index] = (item * .15);
      } else {
        this.tips[index] = (item * .1);
      }
    });
    return this.tips;

  }
}

我无法理解为什么我会收到此错误，因为根据我的说法，我做的是正确的事情。请帮忙。

Answer 1

需要注意的几点。首先，据我所知，使用索引表示法代替 Array.prototype.push 并不常见。由于您是从头开始构建 this.tips ，因此可以使用 this.tips.push(...) 。使用 push 有时也可以获得更好的性能。请参阅此处：为什么 array.push 有时比 array[n] = value 更快？

其次，是的，使用 function 会改变 this 的上下文，因此 forEach 回调中的 this 指的是回调函数，而不是 tipCal 。按照建议使用箭头函数将保留 this 的上下文。

Answer 2

通过这样做，您可以获得结果。请根据需要使用它。

var num = 10,
  dynar = [...Array(num)].map((_,i) => ++i+"");
console.log(dynar);

Output: [ "1", "2", "3", "4", "5", "6", "7", "8",
"9", "10" ]

Answer 3

将 .forEach 回调函数替换为 => ( arrow ) 函数

试试这个：

let tipCal = {
    bills: [124, 48, 268, 180, 42],
    calculateTips: function () {
      this.tips = [];
      this.finalValue = [];
      (this.bills).forEach((item, index)=> {
        if (item < 50) {
          this.tips[index] = (item * .2);
        } else if (item >= 50 && item < 200) {
          this.tips[index] = (item * .15);
        } else {
          this.tips[index] = (item * .1);
        }
      });
      return this.tips;

    }
  }
  console.log(tipCal.calculateTips())