javascript - 为什么这个 getter 返回未定义？

Question

下面是一个 getter 示例，它迭代数组，并期望返回 a 为 true 的元素。但 test.active 返回 undefined。

var test = {
  arr: [
    {id: 1, a: false},
    {id: 2, a: false},
    {id: 3, a: true},
    {id: 4, a: false},
    {id: 5, a: false},
  ],
  get active() {
    this.arr.forEach(item => {
      if(item.a) return item
    })
  }
}

为什么？

Answer 1

您的 return 语句位于内部函数中，导致该函数返回。您的外部函数实际上不返回任何内容。

如果您希望外部函数返回，请使用普通的 for 循环。

var test = {
  arr: [
    {id: 1, a: false},
    {id: 2, a: false},
    {id: 3, a: true},
    {id: 4, a: false},
    {id: 5, a: false},
  ],
  get active() {
    for (var i = 0, e = this.arr.length; i < e; i++) {
      var item = this.arr[i];
      if (item.a) return item;
    }
  }
}

console.log(test.active);

如果您了解 forEach 的工作原理，可能会有所帮助。

在内部，它看起来很像下面的内容，尽管这是非常简化的。

function forEach (array, block) {
  var i, length = array.length;
  
  for (i = 0; i < length; i++) {
    // This is where your return would end up, unused, in a different context.
    block(array[i], i);
  }
}


forEach(['a', 'b', 'c', 'd'], item => {
  return 'is meaningless here';
});