ネストマッピング：私は私の外側の配列

Question

Iの要素に依存しているパズルゲームがグリッド内に配置されている製造および特定のX、Y位置での値を評価していますのインデックスを必要とします。私のデータは2次元配列に格納されているので、通常のマップはうまくいきません。その結果、私はこのヘルパー関数を2次元配列のすべての単一のセルにマップするようにしました。私は私の2Dマップでのx、セルのYインデックスを使用する必要がある場合

// makes transformations on the cell level in a 2d array 
export const twoDMap = (twoDimensionalArray, mapFunction) => { 
    return twoDimensionalArray.map((row, y) => { 
    return row.map(mapFunction); 
    }) 
} 

これは、以外のほとんどの時間を正常に動作します。以下のテストケースでは、私はセルのy値にアクセスできないようです。

var testArray = [[true, "random-string", 3], 
       ["potato", false, 4], 
       [null, 4, 5]]; 

function twoDMap(twoDimensionalArray, mapFunction) { 
return twoDimensionalArray.map(function (row, y) { 
    return row.map(mapFunction); 
}) 
} 

function logCells(cells) { 
    twoDMap(cells ,function(cell, x) { 
    console.log(cell, "location: ", x); 
    // console.log(cell, "location: ", x, y); //throws an error 
    }) 
} 

logCells(testArray); 

私はtwoDMapへの変更のいくつかの種類を作成する必要が確信している（私はES6構文を処分したので、コンソールで実行されます）、そしてそれはおそらくかなりマイナーだが、私はしましたこの問題は何時間も続いていますが、まだそれを動作させることはできません。私は（代わりにtwoDMapの定期的なネストされたマップを使用して）手動でそれを書くとき、それが正常に動作しますが、それは過度に冗長だと私はそれがこのプロジェクトの一般的なパターンだと考えると、それを避けるためにしたいと思います。これは私が、私はこの問題をグーグルたび発見保つ一般的な提案ですが、それは私がこのプロジェクトのために行う必要がありますどのくらいのネスティング与えられた現実的なソリューションではありません。

基本的に、私はtwoDMapを変更する方法や、私のコールバックがtwoDMapに送信された2次元配列のX と yのインデックスにアクセスできるようにし、それに送られ、コールバックを探しています。

Answer 1

問題は、 'y'が現在の関数の範囲外であるため、値を参照してください。このため、第2の機能で使用できるようにする方法を検討する必要があります。私が見る二つのアプローチ：

• は、第二の機能のマップインナー操作作り、twoDimensionalArray.map(function (row, y)
• 内の第2の関数に最初のアプローチのために

「ををY」を渡す方法を探す：

以下

var testArray = [[true, "random-string", 3], 
       ["potato", false, 4], 
       [null, 4, 5]]; 

function twoDMap(twoDimensionalArray) { 
return twoDimensionalArray.map(function (row, y) { 
    return row.map(function (row, x) { 
    console.log(cell, "location: ", x, y); 
    } 
}) 
}  

twoDMap(testArray); 

bind()関数を用いて、第二のアプローチをとる：

var testArray = [[true, "random-string", 3], 
       ["potato", false, 4], 
       [null, 4, 5]]; 

function twoDMap(twoDimensionalArray, mapFunction) { 
return twoDimensionalArray.map(function (row, y) { 
    return row.map(mapFunction.bind(this, y); 
}) 
} 

function logCells(cells) { 
    twoDMap(cells , function(y, cell, x) {  
    console.log(cell, "location: ", x, y); 
    }) 
} 

logCells(testArray); 

関数に値をバインドする場合、最初のパラメータは、thisの定義方法に対応している必要があります。その後、後続のパラメータが、呼び出す関数の初期パラメータとして提供されます。

伝統的なforループを使用すると、管理しやすいコードが作成され、パフォーマンスが向上することがあります。代替は、ループに使用して：

var testArray = [[true, "random-string", 3], 
       ["potato", false, 4], 
       [null, 4, 5]]; 

function twoDMap(twoDimensionalArray) { 
    for (var y=0; y<twoDimensionalArray.length; y++) { 
    for (var x=0; x<twoDimensionalArray[y].length; x++) { 
     console.log(twoDimensionalArray[y][x], "location: ", x, y); 
    } 
    } 
} 

twoDMap(testArray); 

Answer 2

はforループとしてインナーマップを再実装した後、手動で変換コールバックにトリックを座標ない通過、判明しました。 array.mapでコールバックは引数（callback(element, index, array)）のためしかしforループ内でのみコールバック作用を有することにより、設定されたフォーマットに従わなければならない、という制限が解除されます。

var testArray = [[true, "random-string", 3], 
       ["potato", false, 4], 
       [null, 4, 5]]; 

function twoDMap(twoDimensionalArray, transform) { 
return twoDimensionalArray.map(function (row, y) { 
    var mapped = []; 
    for (var x = 0; x < row.length; x++) 
    mapped.push(transform(row[x], x, y)); 
    return mapped; 
}) 
} 

twoDMap(testArray, function(cell, x, y) { 
    console.log(cell, x, y); 
}) 

誰かがを知っている場合、ネストされたマップと最初の試みがうまくいかなかった理由を、私はそれを学ぶことは非常に好奇心が強いだろう。私はまだそれがyを含むスコープにアクセスできない理由を知らない...