Как я могу перемешать массив JavaScript?

Question

Я пытаюсь рандомизировать порядок моего массива в моем проекте Angular6. Я понятия не имею, как это сделать, и в итоге попытался отсортировать массив с помощью функции Math.random() ... (не работал XD)

Это мой код:

HTML

    <div style="background: darkcyan; width: 600px; height: 600px; margin: auto">
  <table>
    <tr *ngFor="let card of cards">
      <div id="{{card.id}}" [ngStyle]="{'background-color': card.color}" style=" width: 100px; height: 125px; margin: 5px"></div>
    </tr>
  </table>
</div>
<button (click)="shuffle()">Shuffle Cards</button>

машинопись

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-memory-game',
  templateUrl: './memory-game.component.html',
  styleUrls: ['./memory-game.component.css']
})
export class MemoryGameComponent implements OnInit {
  cards = [];
  constructor() { }

  ngOnInit() {
    this.cards = [
        {
          'id': 1,
          'color': 'red'
        },
        {
            'id': 2,
            'color': 'green'
        },
        {
            'id': 3,
            'color': 'blue'
        },
        {
            'id': 4,
            'color': 'yellow'
        }
    ];
      this.shuffle();
  }

  public shuffle() {
      this.cards.sort(Math.random);
  }
}

Я не знаю, есть ли простое решение, но я действительно надеюсь, что кто-то сможет мне помочь ..

Спасибо

Answer 1

Попробуйте эту функцию перемешивания.

function shuffle(arrParam: any[]): any[]{
    let arr = arrParam.slice(),
        length = arr.length,
        temp,
        i;

    while(length){
        i = Math.floor(Math.random() * length--);

        temp = arr[length];
        arr[length] = arr[i];
        arr[i] = temp;
    }

    return arr;
}

Это чистая функция, которую можно использовать в любом массиве. Это создаст новый перетасованный массив с сохранением исходного.

Если вы хотите, чтобы он работал в вашем шаблоне так, чтобы он сортировал this.cards, вы можете сделать метод компонента shuffle(), который мутирует this.cards:

public shuffle(): any[]{
    let arr = this.cards.slice(),
        length = arr.length,
        temp,
        i;

    while(length){
        i = Math.floor(Math.random() * length--);

        temp = arr[length];
        arr[length] = arr[i];
        arr[i] = temp;
    }

    this.cards = arr;
}

РЕДАКТИРОВАТЬ: я проверил ссылку @wannadream, которую он предоставил в комментарии, и похоже, что моя shuffle функция, описанная выше, гласит: «Фактический беспристрастный алгоритм случайного перемешивания - это случайный случай Фишера-Йейтса (он же Кнут). Я, должно быть, написал это, используя алгоритм тасования Фишера-Йейтса в качестве ссылки.

Answer 2

Одним из возможных решений, которое вы могли бы принять, было бы создание функции для генерации случайного int и использование ее в вашем Array.prototype.sort обратном вызове функции:

var cards = [{
    'id': 1,
    'color': 'red'
  },
  {
    'id': 2,
    'color': 'green'
  },
  {
    'id': 3,
    'color': 'blue'
  },
  {
    'id': 4,
    'color': 'yellow'
  }
];

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

cards.sort(function(a, b) {
  return getRandomInt(cards.length) - getRandomInt(cards.length);
});

console.log(cards);

Answer 3

Я думаю, проблема в том, что вам нужно сделать что-то вроде:

this.cards.sort((a,b) => 0.5 - Math.random());

на основе некоторых предыдущих ответов по SE

Или сделать что-то вроде этого:

 this.cards.sort(() => Math.random() - 0.5);

На основании этого SE Query