在 JavaScript 中使用过滤器方法时遇到问题答案

【问题标题】：Having trouble working with filter method in JavaScript在 JavaScript 中使用过滤器方法时遇到问题
【发布时间】：2021-01-05 11:45:52
【问题描述】：

我目前正在学习 JavaScript 课程并坚持一个练习，我应该创建一个函数，当应用于数组时，返回一个新数组，过滤后仅包含少于 10 个字符的字符串。

经过一些尝试，我确信这就是那个，但失败了。

function validUserNames(array) {
   return array.filter(function(el) { el.length < 10 } );
}

有人可以帮忙吗？

【问题讨论】：

我的错误，已经编辑过了。
可能只需要添加一个return语句即return el.length < 10; }。
我在过滤方法之前已经有一个return语句。你是说我应该把它写在过滤方法本身吗？

标签： javascript arrays filter

【解决方案1】：

这没问题。

function validUserNames(array) {
   return array.filter(function(el) { return el.length < 10 } );
}

console.log(validUserNames(['foo', 'bar', 'baz', 'foobarbazzz']));

只需在过滤器函数中添加一个返回即可。没有它返回undefined。 filter 要求您为它提供一个谓词函数，该函数是一个返回真或假的函数。当它返回 true 时，它包含在结果中，当它返回 false 时，它不包含在内。 undefined 似乎导致它不被包含在内。

您可以使用更简洁的语法，通过使用箭头函数来避免返回的需要，而无需大括号。

即

return array.filter(el => el.length < 10);

当您添加回花括号（假设您的函数跨越多行）时，需要包含 return 语句。

即

return array.filter(el => { return el.length < 10 });

【讨论】：

【解决方案2】：

问题在于filter 需要一个返回真值或假值的函数。您目前没有从提供的函数返回任何内容，这意味着返回值始终为undefined（假）。过滤后会产生一个空数组。

您应该在传递给filter的提供的函数中添加return语句：

function validUserNames(array) {
  return array.filter(function(el) { return el.length < 10 } );
}

或者使用不带括号的arrow function（{ 和}）隐式返回：

function validUserNames(array) {
  return array.filter(el => el.length < 10);
}

【讨论】：

解决了！谢谢，我对加倍返回语句有点困惑，没有意识到过滤器方法需要函数来返回一些东西