为什么这个 getter 返回未定义

Why does this getter return undefined?

本文关键字：返回 未定义 getter 为什么      更新时间：2023-09-26

下面是一个 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
    })
  }
}

为什么？

> 您的 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';
});

或者，您可以使用 Array.prototype.find（） 函数来测试给定条件并返回找到的元素。 

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/

相关文章：