Понимание синтаксиса сокращенной стрелки Javascript рядом с массивом find () - PullRequest
Новая
       13

Понимание синтаксиса сокращенной стрелки Javascript рядом с массивом find ()

1 голос
/ 15 марта 2019

Обнажите мою новизну, если можете, я просто пытаюсь точно понять, что происходит в этой функции, чтобы я мог лучше адаптировать ее к своему случаю использования и писать более чистый / короткий код, когда это необходимо.Функция работает, конечно, и я могу ее использовать, но она вызывает недовольство, когда я не до конца понимаю код, который использую.Я думаю, что понимаю по большей части, но мне трудно собрать все части воедино.Если это дубликат, тогда прошу прощения за все извинения и пометьте его как таковой, но я не смог найти точного ответа на то, что я пытаюсь понять.Из других ответов на вопросы и посторонних статей я смог понять большую часть происходящего, но я все еще застрял на нескольких моментах.

Точный код: 

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'.Я также понимаю, что в сокращенном синтаксисе подразумевается оператор return, и что метод find () имеет три собственных параметра (element, index, array), очень похожих на функцию forEach (), которую я понимаю и часто использую.

Чтобы сложить все вместе - я понимаю, что «id» передается в качестве параметра, но затем, если я правильно понимаю, «u» возвращается и / или передается как параметр конечной функциигде указанное свойство 'id' для 'u' равно параметру 'id', который был передан в исходную функцию.И так как я знаю, что метод find () выполняет итерации по массиву, я могу разумно сделать вывод, что 'u' является текущим элементом / индексом этого массива.

Конкретная часть, с которой мне труднопонимание состоит в том, как 'u' захватывает элемент / индекс как его значение.Кроме того, почему «u» должно быть в своей собственной функции, а не в качестве другого параметра рядом с параметром «id» инициирующей функции.

Как я уже сказал, функция работает и все хорошо, независимо от того, понимаю ли я ее,Но я был бы очень признателен всем, кто мог бы найти время, чтобы объяснить мне, что именно происходит.Я исследовал и понял все, что мог сам, просто мне нужно немного подержать те последние несколько моментов, которые я упомянул.

[Постотвеченное редактирование] Он просил меня объяснить, почему этот вопрос былотличается от Что означают множественные функции стрелок в javascript? .Они очень похожи, но я думаю, что в моей конкретной ситуации с добавленным методом Array.prototype.find он достаточно дифференцирован, чтобы оправдать свое собственное объяснение.По сути, я вижу, как некоторые могут пометить его как одно и то же, поэтому, если другие так считают, то непременно отметьте его как дубликат.Что бы ни было лучше для сообщества, я в порядке, я просто благодарен, что сообщество нашло время, чтобы помочь мне понять мой вопрос.

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

Это потому, что функция userBy фактически не выполняет итерации по массиву - Array.find принимает функцию с логическим возвращаемым значением, поэтому функция, выполняющая фактический поиск, является анонимной дочерней функцией u => u.id == id.Вот как это будет выглядеть в ES5: 

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

Здесь функция userBy возвращает функцию обратного вызова / тестирования, и она используется в Array.find.Если вам не нужно было передавать id в качестве аргумента, вы можете упростить его, используя только внутреннюю функцию: 

const userBy = u => u.id == id;
const user = users.find(userBy);
0 голосов
/ 15 марта 2019

Во-первых, давайте посмотрим, что делает .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 ожидает, что вы передадите ей функцию, и эта функция будет вызываться неоднократно, передавая каждый элемент массива по одному (плюс индекс и массив), пока один из них не пройдет тест. Поэтому обычное использование этого было бы примерно таким, чтобы найти пользователя с идентификатором 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, но и с любым другим идентификатором.

Так что с этим в руке, строка кода, которая выглядит следующим образом: 

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

... в основном означает «создать функцию user => user.id === 2, а затем передать ее в users.find»

...