javascript ile shuffle

bugünki yazımda sizlere bazı projelerde lazım olabilecek bir fonksiyondan bahsedicem.Elimize bir data geldiğini varsayalım ve bu datanın sürekli yerlerinin değiştirilebilir olmasını istiyorum yani (Shuffle) Karıştırılabilir olmasından bahsediyoruz.

Bunun için sizlerle bir fonksiyon yazacaz.

Elimizde bir dizi oldugunu varsayalım.ve aşağıdaki gibi olsun.

let data = ['a','b','c','d','e']

bu şekilde 5 tane verimiz olsun.Biz istiyoruzki her tetiklediğimizde bu datayı veriler yer değiştirilip öyle gelsin.Önce size fonksiyonu bırakıcam daha sonra yazıya devam etmek isteyenler için açıklamaları yapıcam :)

shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

Kullanımıda şu şekilde

shuffle(data);

şimdi burada bir döngüye giriyoruz "i" adındaki değişken ile a.length ile girdi verisinin değerini alıyoruz ve 1 eksiğini alıyoruz.(bunun sebebi diziler 0 dan başlar).
daha sonra Math.random() ile rasgele bir sayı alıyoruz ve bunu for'dan gelen değeri 1 arttırarak çarpıyoruz yani şöyle oluyor.
diyelimki 0 geldi (0.8098303434482101 * (0+1)) şeklinde olacak bu işlemi yaparsak (0.8098303434482101) çıkıcaktır Math.floor ile bunu yuvarlıyoruz ve buda 0 oluyor.
" [a[i], a[j]] = [a[j], a[i]];" buradaki kod ile ise eski değer ile yeni değerin yerlerini değiştiriyoruz.

<div id="data"></div>

<button onClick="shuffleData()">Shuffle</button>

var data = ["a","b","c","d","e"];
var div = document.getElementById('data');

data.map((i,e)=>{
  div.innerHTML += `${i} <br/>`;
});

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

function shuffleData(){
  div.innerHTML = '';
  shuffle(data).map((i,e)=>{
    div.innerHTML += `${i} <br/>`;
  });

}