javascript - 在 .filter() 中，如何让回调函数调用另一个函数？

Question

我试图掌握回调函数的窍门，但遇到了一些我不完全理解的问题。

这段代码在下面的示例中使用时效果很好。

zombieCreatures = creatures.filter(filterCreatures);

不幸的是，这段代码在同一个示例中使用时不起作用。

zombieCreatures = creatures.filter(function(v) {
    filterCreatures(v);
});

对我来说，它们看起来像是相同的说明，但显然我错了。有什么不同？是否可以让回调函数调用 .filter() 中的另一个函数？

'use strict';

var creatures = [], zombieCreatures = [];

var filterCreatures;

creatures = [
  {species: 'Zombie', hitPoints: 90},
  {species: 'Orc', hitPoints: 40},
  {species: 'Skeleton', hitPoints: 15},
  {species: 'Zombie', hitPoints: 85}
];
	
filterCreatures = function(v) {
  return v.species === 'Zombie';
}
	
zombieCreatures = creatures.filter(function(v) {
  filterCreatures(v);
});

console.log(zombieCreatures);

Answer 1

是的，您当然可以在 filter 回调中调用任何其他函数。

您唯一缺少的是回调需要返回一个值。您的回调没有 return 语句。它调用 filterCreatures() 函数，但随后丢弃该函数返回的值并默认返回 undefined。

与代码的原始版本比较:

creatures.filter(filterCreatures);

在这段代码中，filter() 直接调用了filterCreatures 函数，然后使用它的返回值来决定是否包含该元素。您没有在代码中明确看到这一点，但 filter() 正在寻找该返回值。

这里有一个练习可以帮助澄清这一点。取出损坏的代码并将内联过滤器回调移至命名函数。我们称它为 filterCreaturesWrapper。所以不是这个:

filterCreatures = function(v) {
  return v.species === 'Zombie';
}

zombieCreatures = creatures.filter(function(v) {
  filterCreatures(v);
});

我们有这个:

filterCreatures = function(v) {
  return v.species === 'Zombie';
}

filterCreaturesWrapper = function(v) {
  filterCreatures(v);
}

zombieCreatures = creatures.filter(filterCreaturesWrapper);

如果你研究它，你会发现它和以前的代码完全一样，我们只是稍微移动了一下。 filterCreaturesWrapper 与 .filter() 调用中的内联函数相同。现在问题应该出现在我们身上:filterCreatures 有一个return 语句而 filterCreaturesWrapper 没有。

回到原来的破代码，就好像我们写了:

zombieCreatures = creatures.filter(function(v) {
  filterCreatures(v);
  return undefined;  // .filter treats this as 'false'
});

所以只要在你的回调中添加一个return就可以了:

'use strict';

var creatures = [], zombieCreatures = [];

var filterCreatures;

creatures = [
  {species: 'Zombie', hitPoints: 90},
  {species: 'Orc', hitPoints: 40},
  {species: 'Skeleton', hitPoints: 15},
  {species: 'Zombie', hitPoints: 85}
];
	
filterCreatures = function(v) {
  return v.species === 'Zombie';
}
	
zombieCreatures = creatures.filter(function(v) {
  return filterCreatures(v);  // <-- added "return"
});

console.log(zombieCreatures);

并非所有语言都这样工作。例如，Ruby 会返回方法(函数)中的最后一个表达式，无论您是否显式声明 return。因此，如果您正在编写 Ruby 代码(假设所有其他位也都转换为 Ruby)，您的代码就可以工作!