JavaScriptで二次元配列の値をランダムに並び替え

Question

var array_A = [100, 105, 200, 306, 505];
var array_B = ["A", "B", "C", "D", "E"];

var array_BOX = [
    array_A ,
    array_B 
];

２つの配列「array_A 」、「array_B 」を新規配列「array_BOX 」に格納して二次元配列化した物の値の並びをランダムに替えたいです。

その際に現時点での配列の順番の対になる値（一次元の[0]である"100"と二次元の[0]である"A"）はランダムに並び替えた後もセットとして扱いたいため、

一次元と二次元の値の対関係はそのままで配列の値を並び替えを行える方法のご教授をお願い致します。

Comments

[kanimaru]

array_Aとarray_Bは情報が紐づいている者同士があるにもかかわらず、配列でなければならない制約があり、データ構造は変えられないということでしょうか？

[sika]

最初はarray_Aの値をキーとしてarray_Bを代入する連想化を試みたのですが、できなかったため上記の形となっております。最終的にはランダムで並び替えられた後にループでarray_Aの値と一致した要素にarray_Bの値を出力できれば良いです。

Answer 1

二次元配列

配列のシャッフルには Fisher–Yates shuffle を使用しています。

• フィッシャー - イェーツのシャッフル - Wikipedia
• Fisher–Yates shuffle - Wikipedia

function arrayShuffle (array) {
  var k, t, len;

  len = array.length;

  if (len < 2) {
    return array;
  }

  while (len) {
    k = Math.floor(Math.random() * len--);
    t = array[k];
    array[k] = array[len];
    array[len] = t;
  }

  return array;
}

var array_A = [100, 105, 200, 306, 505];
var array_B = ["A", "B", "C", "D", "E"];
var array_AB = [];

for (var i = 0, len = array_A.length; i < len; ++i) {
  array_AB.push([array_A[i], array_B[i]]);
}

arrayShuffle(array_AB);
console.log(JSON.stringify(array_AB));

new Map

最初はarray_Aの値をキーとしてarray_Bを代入する連想化を試みたのですが、できなかったため上記の形となっております。

オブジェクト初期化子のキー/プロパティ値には順番の概念がない為、不可能ですが、new Map ならば可能です。

• Map - JavaScript | MDN

function arrayShuffle (array) {
  var k, t, len;

  len = array.length;

  if (len < 2) {
    return array;
  }

  while (len) {
    k = Math.floor(Math.random() * len--);
    t = array[k];
    array[k] = array[len];
    array[len] = t;
  }

  return array;
}

var array_A = [100, 105, 200, 306, 505];
var array_B = ["A", "B", "C", "D", "E"];
var array_AB = [];

for (var i = 0, len = array_A.length; i < len; ++i) {
  array_AB.push([array_A[i], array_B[i]]);
}

arrayShuffle(array_AB);

var map = new Map(array_AB);
console.log(JSON.stringify([...map.entries()]));

先の二次元配列のコードに new Map を付け加えただけのコードです。
キー、値の列挙は Map#entries 以外にも Map#forEach もあるので、配列と同じ感覚で扱えます。

Re: sika さん

Comments

[sika]

ご回答ありがとうございます。
アルゴリズムの詳細なども重ねて感謝致します。
arrayShuffle ()内での値が二つ未満の場合の処理といった細かな例外処理もちゃんと考慮されており
本案件としては自分的にはコードの流れとして理想的な物でした。

Answer 2

1つのデータ構造として扱った方がいいです。
場合によっては、下記オブジェクト形式よりもクラス化するのも考慮されたほうがいいかもしれません。

// データ形式の見直し
var array_A = [100, 105, 200, 306, 505];
var array_B = ["A", "B", "C", "D", "E"];
// 
var list = [
  { 
    dataA:100,
    dataB:"A"
  },
  
  { 
    dataA:105,
    dataB:"B"
  },
  
  { 
    dataA:200,
    dataB:"C"
  },
  { 
    dataA:306,
    dataB:"D"
  },
  
  { 
    dataA:505,
    dataB:"E"
  }
];

shuffle(list);

// シャッフル関数定義
function shuffle(array) {
  var n = array.length, t, i;
  while (n) {
    i = Math.floor(Math.random() * n--);
    t = array[n];
    array[n] = array[i];
    array[i] = t;
  }
  return array;
}

####追記
シャッフルについては、think49さんが仰っている「 Fisher–Yates shuffle 」を利用しています。

Comments

[sika]

ご回答ありがとうございます。
何かしらループ処理を加えないと連想化できないと思っておりました。
シャッフル専用functionは今後も活用させていただきます。

Answer 3

こういう組み合わせで管理してはいけないのでしょうか？

var a = [100, 105, 200, 306, 505];
var b = ["A", "B", "C", "D", "E"];
var c = [];
a.forEach(function(i,j){
  c.push({a:i,b:b[j]});
});
console.log(c);

Comments

[think49]

この回答はなぜマイナス評価が付いているのでしょうか。
初めは二次元配列ではないから(質問の要件を満たしていない)かと思いましたが、二次元配列ではない他の回答にはマイナス評価がついてないので、マイナス評価の理由が理解できません。
あえて指摘するならば、Array#forEach は Array#map にするとスマートな気がしますが、コード自体は期待通りに動作するのでマイナス評価をつける程ではないように思えます。
とりあえず、プラス評価を付けて打ち消しておきます。

マイナス評価を入れた方へ。理由をコメントで指摘頂けると有難いです。

[sika]

ご回答ありがとうございます。
当方にもマイナス評価の意はわかりかねますが、高評価を足させていただきました。
他回答者様と同様にmap関数の使い方としては良い例題になりました。

Answer 4

var a = [100, 105, 200, 306, 505];
var b = ["A", "B", "C", "D", "E"];

var c = a.map(function (value, index) {
  return [a[index], b[index]];
})
.sort(function (a, b) {
  // 簡易のランダム入れ替え
  return Math.random() - .5;
});

console.log(c);

修正前のコード

var a = [100, 105, 200, 306, 505];
var b = ["A", "B", "C", "D", "E"];

var c = a.map(function (value, index) {
  return index;
})
.sort(function (a, b) {
  // 簡易のランダム入れ替え
  return Math.random() - .5;
})
.map(function (value) {
  return [a[value], b[value]];
});

console.log(c);

Comments

[Lhankor_Mhy]

瑣末なことですが、Array.sortを使ったシャッフルはかなり偏るのでよくないソート法だと言われています。
http://qiita.com/minodisk/items/94b6287468d0e165f6d9

[sika]

ご回答ありがとうございます。
一番スマートなコードという印象を受けましたので、今後の記述の参考にさせていただきたいと思います。
"Array.sortを使ったシャッフルはかなり偏る"
同じランダム処理でも精度の差が出るのですね。勉強になりました。