2D配列を3D配列に入れ子にしたときの奇妙な振る舞い

Question

現在、私はjavascriptの4-in-a-rowのMinimaxアルゴリズムに取り組んでいます。配列内に可能な移動を格納し、各ブランチの配列内に配列をネストすることにしました。

しかし、配列の特定の値を編集しようとすると、同じ列内の他のすべての値が編集されます。

コード：

var BOARD = [ 
    [0, 0, 0], 
    [0, 0, 0], 
    [0, 0, 0] 
    ]; 

// Put 3 x 2D Arrays into one 3D Array 
var NODE_TREE = [BOARD, BOARD, BOARD]; 
NODE_TREE[1][2][0] = 2; 
console.log(NODE_TREE); 

クロームV8インタプリタ出力：

[ [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 2, 0, 0 ] ], 
    [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 2, 0, 0 ] ], 
    [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 2, 0, 0 ] ] ] 

何が起こるが、dosen't必要があります。

[ [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ], 
    [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 2, 0, 0 ] ], 
    [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ] ] 

Javascriptをすると、最初の次元のインデックス番号を無視しているようです。この問題は、配列内にネストされた既存の配列を使用する場合にのみ発生します。 3Dアレイをゼロから作成すると、このバグは起こりません。

Answer 1

、あなたが解析されたJSON文字列を使用することができます。

これは、元のオブジェクトへの参照なしに独立したオブジェクトを生成します。

var BOARD = [ 
 
     [0, 0, 0], 
 
     [0, 0, 0], 
 
     [0, 0, 0] 
 
    ], 
 
    JSON_BOARD = JSON.stringify(BOARD), 
 
    NODE_TREE = [JSON.parse(JSON_BOARD), JSON.parse(JSON_BOARD), JSON.parse(JSON_BOARD)]; 
 

 
NODE_TREE[1][2][0] = 2; 
 
console.log(NODE_TREE);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

BOARDを配列に3回入力すると、新しい配列に項目を「コピー」していないので、実際には元のBOARD配列への参照を3つ作成しているだけです。

したがって、これらの参照のいずれかに加えられた変更は、BOARDのすべてのインスタンスに反映されます。

3dアレイで3つの異なるアレイを作成する場合は、アレイを複製またはコピーする必要があります。これを行うには、外側の配列をマッピングし、Array.prototype.slice（）で内容をコピーします。怠惰なinitalizationについては

var BOARD = [ 
 
    [0, 0, 0], 
 
    [0, 0, 0], 
 
    [0, 0, 0] 
 
    ]; 
 
    
 
// function to map and copy arrays with .slice() 
 
function sliceArrays (outerArray){ 
 
    return outerArray.map((arr)=>{ 
 
    return arr.slice() 
 
    }); 
 
} 
 

 
var NODE_TREE = [sliceArrays(BOARD), sliceArrays(BOARD), sliceArrays(BOARD)]; 
 
NODE_TREE[1][2][0] = 2; 
 
console.log(NODE_TREE); 
 

 
//[ [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ], 
 
// [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 2, 0, 0 ] ], 
 
// [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ] ]