为什么这个 getter return 未定义？

Question

这是一个 getter 的示例，它遍历数组并预期 return 一个 a 为 true 的元素。但是 test.active returns 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 语句在内部函数中，导致该函数 return。您的外部函数实际上 return 什么都不做。

如果您希望外部函数 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';
});

Answer 2

或者，您可以使用 Array.prototype.find() 函数来测试给定条件和 return 找到的元素。

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() {
    return this.arr.find(item => {
      return (item.a === true);
    });
  }
}

alert(test.active.id)

https://jsfiddle.net/arqxcbkv/1/

为什么这个 getter return 未定义？

Why does this getter return undefined?

javascript

getter