如何打乱 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>

TypeScript

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

我认为问题在于您需要执行以下操作：

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

based on some previous answers on SE

或者做这样的事情：

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

基于此SE Query

Answer 2

试试这个随机播放功能。

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 link，看起来我上面的 shuffle 函数是 "The de-facto unbiased shuffle algorithm is the Fisher-Yates (aka Knuth) Shuffle"。我一定是参考了Fisher-Yates洗牌算法写的。

Answer 3

您可以采取的一个潜在解决方案是创建一个函数来生成一个随机 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);

如何打乱 JavaScript 数组？

How can I shuffle a JavaScript array?

javascript

arrays

random

shuffle

angular