我不理解这个 JavaScript 的 return 语句，它使用了箭头函数。

Question

我不理解这个 JavaScript 的 return 语句，它使用了箭头函数。

3

有人能解释一下这个 JavaScript 语法吗？我不理解那个返回语句。"person" 是函数的参数吗？如果是，它是从哪里传递过来的？在这个组件中没有 person 变量。至少一个详细说明的返回语句也会有帮助，这样我就能理解了。

const filterBy = (term) => {
    const searchTermLower = term.toLowerCase()
    return (person) => Object.keys(person).some(prop => 
        person[prop].toLowerCase().indexOf(searchTermLower) !== -1
    )
}
const filterPerson = persons.filter(filterBy(searchTerm))

这里的 presons 是一个对象数组，search term 是一个字符串。

const persons=[
{ name: 'abc', number: '123456' },
{ name: 'def', number: '44233' },
{ name: 'xyz', number: '345345' },
{ name: 'npe', number: '12312' }]

我稍后将使用返回的filterPerson进行后续处理。代码运行得非常好，但是return语句中的箭头函数让我感到困惑。如果需要更多数据，我可以更新问题。

- legacy

返回一个函数 - Matt

2个回答

2

好的，简单来说，这只是一种用更简单方式编写以下函数的替代方法：

const persons = [{
    name: 'abc',
    number: '123456'
  },
  {
    name: 'def',
    number: '44233'
  },
  {
    name: 'xyz',
    number: '345345'
  },
  {
    name: 'npe',
    number: '12312'
  }
];

const searchTerm = 'abc';
const filterPerson = persons.filter((person) => {
  const searchTermLower = searchTerm.toLowerCase();
  return Object.keys(person).some(prop => person[prop].toLowerCase().indexOf(searchTermLower) !== -1)
})

console.log(filterPerson);

如果你仔细观察，我正在将一个匿名函数传递给persons.filter函数。因此，如果我想变得更加花哨，我可以将那个匿名函数编写为单独的块，并将整个函数返回给persons.filter函数，以便在我的代码中的多个位置调用它。这正是你在问题中发布的片段所做的。

这是我尝试变得更加花哨：

const persons = [{
    name: 'abc',
    number: '123456'
  },
  {
    name: 'def',
    number: '44233'
  },
  {
    name: 'xyz',
    number: '345345'
  },
  {
    name: 'npe',
    number: '12312'
  }
];

const myFunctionThatWasPreviouslyAnonymous = (term) => {
  const searchTermLower = term.toLowerCase()
  return (person) =>
    Object.keys(person)
    .some(prop => person[prop].toLowerCase().indexOf(searchTermLower) !== -1)

}

const searchTerm = 'abc';
const filterPersonFancy = persons.filter(myFunctionThatWasPreviouslyAnonymous(searchTerm));
console.log(filterPersonFancy)

- Salvino D'sa

你能说出在某一时刻 'person' 的值是多少吗？ - legacy

是的。在每次迭代中，人将基本上是 persons 数组中的一个元素。Array.filter 基本上会针对条件测试数组中的每个项。这里有一个链接，可以向您展示 Array.filter 的工作原理：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter。 - Salvino D'sa

太好了！person只是一个变量名。我可以将其重命名为legacy，在每次迭代中它将保存数组中的一个元素。在我们的情况下，每次迭代都是persons数组中的person对象。 - Salvino D'sa

它的函数参数，明白了 - legacy

请接受答案，以便帮助其他人。谢谢！ - Salvino D'sa

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Giorgi Moniava · Accepted Answer

这被称为高阶函数。

你肯定能够理解这句话的含义：

let increment = x => x+1;

现在想象一下，你有一个函数，与以上代码不同的是，它返回另一个函数而不是递增的值，你该如何编写它呢？很简单：

let adder = x => y => y+x;

使用方法:

let adder = x => y => y+x;
let add5 = adder(5);
console.log(add5(9));

这个例子还涉及闭包的概念： x 是一个闭包（注意当我用9调用add5并返回14时它是如何被记住的），这是另一个话题，但不应该阻止你理解什么是高阶函数。

"person"是函数的参数吗？如果是，它是从哪里传递过来的？

在你的例子中，person与我的y相同。所以y是何时被传递的呢？答案是：当我调用add5并将其值设置为9时。

要精确地指代你的例子，你想知道person是什么。

例子 1

在这里：

[1,2,3].filter(person=>person)

person的值是什么？1、2、3对吗？

现在用以下函数替换person=>person：

例子2

let filterBy = ()=>person=>person; // Higher order function, just first function doesn't take a parameter
[1,2,3].filter(filterBy())

例子1和例子2的区别在于，例子1中我直接编写了函数，而在例子2中，我通过调用 filterBy() 来生成它。