了解数组 find() 旁边的 Javascript Shorthand 箭头语法

Question

如果可以的话，请原谅我的新手，我只是想准确了解此函数中发生的事情，以便我可以更好地根据我的用例对其进行调整，并在需要时编写 cleaner/shorter 代码。该功能当然有效，我可以使用它，但当我不完全理解我正在使用的代码时，它会让我感到烦恼。我想我大部分都明白了，但我很难把所有的部分放在一起。如果这是重复的，那么我们深表歉意，请将其标记为重复，但我无法找到我想要理解的确切答案。从其他已回答的问题和外部文章中，我已经能够理解大部分正在发生的事情，但我仍然卡在几点上。

准确代码为：

const userBy = id => u => u.id == id; 
const users = [{ id: 1, name: "Kaio" }, { id: 2, name: "Gabriella" }, { id: 3, name: "Enzo" }];
const id = 2;
const user = users.find(userBy(id));

我的主要问题围绕着：

const userBy = id => u => u.id == id;

我从这篇文章中获取了代码，以防万一需要更多上下文，尽管上述代码应该足够了 - https://medium.com/@kaiosilveira/mastering-javascript-arrays-beyond-for-and-foreach-loops-e2ecf9dfe3e

我知道在 'userBy' 函数中，'id' 作为参数传入。我还了解到，在 shorthand 语法中隐含了 return 语句，并且 find() 方法具有自己的三个参数（元素、索引、数组），很像 forEach() 函数我理解并经常使用。

总而言之——我知道 'id' 是作为参数传入的，但是如果我理解正确的话 'u' 是 returned and/or 作为最终函数的参数传入，其中 'u' 的指定属性 'id' 等于传入原始函数的参数 'id'。因为我知道 find() 方法正在遍历数组，所以我可以合理地推断出 'u' 是该数组的当前 element/index。

我很难理解的具体部分是 'u' 如何捕获 element/index 的值。还有为什么 'u' 需要在它自己的函数中，而不是作为启动函数的 'id' 参数旁边的另一个参数。

就像我说的那样，无论我是否理解，该功能都可以正常工作。但是，如果有人能花时间向我解释到底发生了什么，我将不胜感激。我已经研究并理解了我自己所能做的一切，只需要一点点帮助我提到的最后几点。

[Post 回答编辑] 它要求我解释为什么这个问题与 What do multiple arrow functions mean in javascript? 不同。它们非常相似，但我认为根据我的具体情况，添加的 Array.prototype.find 方法足以区分它，足以保证它有自己的解释。它是核心，但我可以看到有些人如何将其标记为相同，所以如果其他人有这种感觉，那么一定要将其标记为重复。对社区最好的东西对我来说都很好，我很感激社区花时间帮助我理解我的问题。

Answer 1

首先，让我们看看.find 在做什么。 .find 的实现看起来像这样：

Array.prototype.find = function (callback) {
  for (let i = 0; i < this.length; i++) {
    const match = callback(this[i], i, this);
    if (match) {
      return this[i];
    }
  }
}

Find 期望您向它传递一个函数，该函数将被重复调用，一次传入数组的每个元素（加上索引和数组），直到其中一个通过测试。所以正常使用它会是这样的，找到 id 为 2 的用户：

users.find((user) => {
  if (user.id === 2) {
    return true;
  }
  return false;
});

或更短：

users.find(user => user.id === 2);

现在您展示的代码更进了一步。它预见到可能想要找到 user.id === 2，还有 user.id === 1，和 user.id === 18273 等。所以他们创建了一个名为 userBy 的辅助函数，它可以产生其他函数。也就是说，这段代码：

const userBy = id => u => u.id == id;

... 是一个工厂，用于生成看起来像 user => user.id === 2 的函数，除了它可以创建的函数不仅可以与 2 进行比较，还可以创建您想要的任何 id。

有了它，一行代码看起来像这样：

const user = users.find(userBy(2));

... 基本上意味着 "create the function user => user.id === 2, and then pass that into users.find"

Answer 2

这是因为 userBy 函数实际上并没有遍历数组 - Array.find 接受一个带有布尔值 return 的函数，因此执行实际查找的函数是匿名子函数 u => u.id == id。这是它在 ES5 中的样子：

var userBy = function(id) {
    return function(u) {
        u.id == id;
    };
};

这里，userBy函数是returning一个callback/testing函数，这个用在了Array.find中。如果你不必将 id 作为参数传递，你可以像这样简化它，只使用内部函数：

const userBy = u => u.id == id;
const user = users.find(userBy);

了解数组 find() 旁边的 Javascript Shorthand 箭头语法

Understanding Javascript Shorthand Arrow Syntax Alongside Array find()

javascript

ecmascript-6

arrow-functions