Попытка изучить React и Javascript, но застряла на этом странном синтаксисе для карты и передала ему анонимную функцию

Question

Это взято из самого учебника React . Я разработчик C#, занимающийся веб-разработкой, и некоторые из синтаксиса Javascript меня просто сбивают с толку.

Сама история представляет собой массив размером 9.

Несколько вопросов :

1. Что такое шаг и почему он нигде не используется и не упоминается? Это объем этой функции, и я действительно не уверен, что происходит с этими параметрами.
2. Что именно делает карта с этой анонимной функцией?
3. Что такое ходы? Это массив? Что именно делает этот возврат элемента списка?

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

Answer 1

.map - вспомогательная функция для создания нового массива на основе старого. Вы передаете функцию, которая описывает, как выполнить преобразование. Затем ваша функция будет вызываться несколько раз, по одному разу для каждого элемента массива, и возвращаемые значения используются для создания нового массива.

Функция будет передана в трех аргументах: элемент массива, индекс этого элемента и всего массива. В предоставленном вами фрагменте кода первый аргумент назван step, второй move, а третий игнорируется.

Имея в виду это описание, вот ответы на ваши вопросы. вопросы:

Что такое шаг

Значение в массиве. Итак, при первом вызове функции это значение history[0]. В следующий раз это history[1].

почему он нигде не используется и не упоминается

Автору кода он не нужен. Им все еще нужно дать ему имя, но только для того, чтобы затем они могли дать имя второму аргументу, который им действительно важен.

Что именно делает map с этой анонимной функцией ?

Он вызовет функцию один раз для каждого элемента history и использует возвращаемые значения для создания moves

Что такое ходы? Это массив?

Да, это массив объектов. Эти объекты описывают React, как должна выглядеть страница.

Answer 2

Давайте рассмотрим это шаг за шагом.

const moves = history.map()

Что мы здесь знаем? Мы знаем, что мы определяем константу с именем moves для хранения повторяемых возвращаемых значений массива с именем history. Как мы узнаем, что history - это массив? Поскольку .map является JS функцией-прототипом / сокращением для for (let i = 0; i < history.length; i +=1) ...

Далее, мы создаем анонимную функцию прямо внутри вызываемой функции .map(), например:

const moves = history.map((step, move) => ...

Что такое step и что move? Это чаще всего называется value и index. И наименование не имеет значения, это имя параметра функции, и мы можем его называть, но оно нам понятно.

Давайте напишем это так:

const moves = history.map((value, index) => ... Может, это заставит еще немного смысла? value - это колодец, значение элемента массива, а индекс - это его позиция.

.map() - это сокращенный прототип для предоставления нам быстрой итерации по значениям и его отображенному индексу.

так, скажем, history = ['/login', '/logout', '/home]

history.map((value, index) => console.log(value, index)) даст нам '/login', 0 /logout, 1, /home 2

Мы также можем полностью опустить параметр step / index, это необязательно (как и параметр value, но вы в основном хотите с ним работать.)

Что он теперь делает return? Он возвращает элемент HTML / JSX (в случае React), используя значения, сгенерированные из массива.

Мы также могли бы написать его так (возможно, более похожий на простой Vanilla JS вызовет некоторые C# сходства):

const moves = []

  for (let i = 0; i < history.length; i += 1) {
    const step = history[i]
    const move = i

    const desc = move ? `Go to move #${move}` : 'Go to game start'
    moves.push(
      <li>
        <button onClick={() => this.jumpTo(move)}>{desc}</button>
      </li>
    )
  }

  return <ol>{moves}</ol>

Результат:

<ol>
  <li>
    <button onClick={() => this.jumpTo(0)}>Go to move #0</button>
  </li>
  <li>
    <button onClick={() => this.jumpTo(1)}>Go to move #1</button>
  </li>
  <li>
    <button onClick={() => this.jumpTo(2)}>Go to move #2</button>
  </li>
</ol>

Answer 3

Функция Map получает элемент и его индекс в аргументах, поэтому, если вы хотите получить только индекс, вам нужно как-то назвать первый аргумент (элемент), соглашение заключается в использовании _ в качестве имени для неиспользуемой переменной. Итак, step - это элемент из массива истории, а перемещение - это индекс

Карта вызывает эту функцию с каждым элементом этого массива, передающим элемент в качестве первого аргумента и индекс в качестве второго аргумента, возвращаемое значение используется в возвращаемом массиве.

Пример:

const a = [1,2,3];
const b = a.map(element => element*2); // b = [2,4,6]