js 配列からランダムで重複なしで値を取得する

Question

タイトル通りなのですが、
よく配列からランダムで重複なしで値を取得する方法を検索すると、下記のようなコードを一般的によく見かけますが、
これの書き方がいまいちよくわかりません。

下記コードはhttps://qiita.com/artistan/items/9eb9a0fb14f4ec3a8764
の引用です。

// シャッフルしたい配列を用意
var array = [0,1,2,3,4,5,6,7,8,9];

for (var i = array.length - 1; i >= 0; i--){

// 0~iのランダムな数値を取得
var rand = Math.floor( Math.random() * ( i + 1 ) );

// 配列の数値を入れ替える
[array[i], array[rand]] = [array[rand], array[i]]

}

console.log(array);

初心者なもので、なぜforの条件のところがマイナスしたり行ったりしてるんだ？
なぜこれでシャッフルできるんだ？となっています。
どなたか初心者にもわかる解説をお願い致しますm(_ _)m

Answer 1

iは単に配列のインデックスとして末尾から先頭に移動しているだけです。
右端の要素から順にランダムに選んでいくという戦略です。
イメージとしてはこんな感じです。
ピンクの矢印がrandに対応してますね。