2つの入力を持つ矢印関数を持つArray.prototype.map（）呼び出しの目的は何ですか？

Question

私はReact.jsのチュートリアルを、以下の、そして私はReact.Componentのrenderメソッド内で次のコードスニペットを参照してくださいhttps://reactjs.org/tutorial/tutorial.html#showing-the-movesでいますよ：ここ

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> 
); 
}); 

、historyが持つオブジェクトの配列ですsquareプロパティ：

history = [ 
    { 
    squares: [ 
     null, null, null, 
     null, null, null, 
     null, null, null, 
    ] 
    }, 
    { 
    squares: [ 
     null, null, null, 
     null, 'X', null, 
     null, null, null, 
    ] 
    }, 
    // ... 
] 

history.mapの矢印関数は、2つの入力、stepとmoveを持って、なぜ私は理解していないことです。 map、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/mapのドキュメントでは、1つの入力（問題の配列要素）を持つ矢印関数の例しか表示されません。私はstepの入力が矢印メソッドの本体のどこにでも使われていないので、目的が何であるか分かりません。誰かがこれを説明できますか？

Answer 1

この例では、移動は各ステップのインデックスです。このインデックスを使用すると、履歴の特定のステップを見つけることができます。

Answer 2

アレイ内のすべてのアイテムについて、彼らは何らかの種類のReactコンポーネントを作成しています。

2番目のパラメータ（配列インデックス）の使用方法は、条件演算子? :のブール評価条件と同じです。したがって

のみ「falsey」数は、それ以外の場合は、位置と他のメッセージです、インデックスは0（最初の反復）である場合、descは"Go to game start"なり、（NaN以外）0からです。ここで

は単純化された非反応するデモです：

const history = ["these", "values", "are", "ignored"]; 
 

 
const moves = history.map((step, move) => { 
 
    const desc = move ? 
 
    'Go to move #' + move : 
 
    'Go to game start'; 
 
    return desc; 
 
}); 
 

 
console.log(moves);

だから、あなたが見ることができるインデックスが0、代わりので表わされる「ステップ」に行くためのメッセージを与えていたときインデックス番号、それは明確なメッセージを開始に行くことができます。

Answer 3

mapの2番目の引数はindexです。これはhistoryでナビゲートするのに役立ちます。

let history = [ 
 
    { 
 
    squares: [ 
 
     null, null, null, 
 
     null, null, null, 
 
     null, null, null, 
 
    ] 
 
    }, 
 
    { 
 
    squares: [ 
 
     null, null, null, 
 
     null, 'X', null, 
 
     null, null, null, 
 
    ] 
 
    } 
 
] 
 

 
history.map((step, move) => console.log("step: ", step, "\nindex (move): ", move))