问题描述：

我有一个这样的数组：

var arr1 = ["a", "b", "c", "d"];

我怎样才能随机化/打乱它？

解决方案 1：

事实上的无偏洗牌算法是Fisher–Yates（又名 Knuth）洗牌。

您可以在此处看到出色的可视化效果。

function shuffle(array) {
  let currentIndex = array.length;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {

    // Pick a remaining element...
    let randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }
}

// Used like so
let arr = [2, 11, 37, 42];
shuffle(arr);
console.log(arr);

运行代码片段Hide results展开片段

解决方案 2：

以下是Durstenfeld shuffle的 JavaScript 实现，它是 Fisher-Yates 的优化版本：

/* Randomize array in-place using Durstenfeld shuffle algorithm */
function shuffleArray(array) {
    for (var i = array.length - 1; i >= 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

它为每个原始数组元素挑选一个随机元素，并将其从下一次抽取中排除，就像从一副牌中随机抽取一样。

这种巧妙的排除方法将选定的元素与当前元素交换，然后从余数中选择下一个随机元素，向后循环以获得最佳效率，确保随机选择被简化（它总是可以从 0 开始），从而跳过最后一个元素。

算法运行时间为O(n)。请注意，洗牌是在原地完成的，因此如果您不想修改原始数组，请先使用 复制它.slice(0)。

编辑：更新至 ES6 / ECMAScript 2015

新的 ES6 允许我们一次分配两个变量。当我们想要交换两个变量的值时，这尤其方便，因为我们可以在一行代码中完成。以下是使用此功能的同一函数的较短形式。

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

解决方案 3：

您可以使用映射和排序轻松完成：

let unshuffled = ['hello', 'a', 't', 'q', 1, 2, 3, {cats: true}]

let shuffled = unshuffled
    .map(value => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value)
   
console.log(shuffled)

运行代码片段Hide results展开片段

1. 我们将数组中的每个元素放入一个对象中，并赋予它一个随机排序键

2. 我们使用随机密钥进行排序

3. 我们取消映射以获取原始对象

您可以对多态数组进行混洗，并且排序与 Math.random 一样随机，这对于大多数用途来说已经足够了。

由于元素是根据每次迭代都不会重新生成的一致键进行排序的，并且每次比较都来自相同的分布，因此 Math.random 分布中的任何非随机性都会被抵消。

速度

时间复杂度为 O(N log N)，与快速排序相同。空间复杂度为 O(N)。这不如 Fischer Yates 洗牌那么高效，但在我看来，代码明显更短，功能更强大。如果您有一个大数组，您当然应该使用 Fischer Yates。如果您有一个包含几百个项目的小型数组，您可能会这样做。

解决方案 4：

警告！不建议

使用此算法，因为它效率低下且有很强的偏见；请参阅评论。它留在这里以供将来参考，因为这个想法并不罕见。

[1,2,3,4,5,6].sort( () => .5 - Math.random() );

这个https://javascript.info/array-methods#shuffle-an-array教程直接解释了差异。

解决方案 5：

使用 underscore.js 库。该方法_.shuffle()非常适合这种情况。以下是使用该方法的示例：

var _ = require("underscore");

var arr = [1,2,3,4,5,6];
// Testing _.shuffle
var testShuffle = function () {
  var indexOne = 0;
    var stObj = {
      '0': 0,
      '1': 1,
      '2': 2,
      '3': 3,
      '4': 4,
      '5': 5
    };
    for (var i = 0; i < 1000; i++) {
      arr = _.shuffle(arr);
      indexOne = _.indexOf(arr, 1);
      stObj[indexOne] ++;
    }
    console.log(stObj);
};
testShuffle();

解决方案 6：

新的！

更短且可能*更快的 Fisher-Yates 洗牌算法

1. 它使用 while---

2. 按位取底 (数字最多为 10 位十进制数字 (32 位))

3. 删除了不必要的关闭和其他内容

function fy(a,b,c,d){//array,placeholder,placeholder,placeholder
 c=a.length;while(c)b=Math.random()*(--c+1)|0,d=a[c],a[c]=a[b],a[b]=d
}

脚本大小（以 fy 作为函数名称）：90bytes

演示
http://jsfiddle.net/vvpoma8w/

*除 Chrome 之外，在所有浏览器上可能都更快。

如果您有任何疑问，请直接询问。

编辑

是的，更快

性能： http://jsperf.com/fyshuffle

使用最受好评的功能。

编辑
有一个多余的计算（不需要--c + 1）并且没有人注意到

更短（4字节）且更快（测试一下！）。

function fy(a,b,c,d){//array,placeholder,placeholder,placeholder
 c=a.length;while(c)b=Math.random()*c--|0,d=a[c],a[c]=a[b],a[b]=d
}

缓存在其他地方var rnd=Math.random然后使用rnd()也会稍微提高大数组的性能。

http://jsfiddle.net/vvpoma8w/2/

可读版本（使用原始版本。这个比较慢，变量是无用的，比如闭包＆“；”，代码本身也更短...也许阅读这个如何“最小化”Javascript代码，顺便说一句你不能在像上面的javascript最小化器中压缩以下代码。）

function fisherYates( array ){
 var count = array.length,
     randomnumber,
     temp;
 while( count ){
  randomnumber = Math.random() * count-- | 0;
  temp = array[count];
  array[count] = array[randomnumber];
  array[randomnumber] = temp
 }
}

解决方案 7：

就地随机排列数组

function shuffleArr (array){
    for (var i = array.length - 1; i > 0; i--) {
        var rand = Math.floor(Math.random() * (i + 1));
        [array[i], array[rand]] = [array[rand], array[i]]
    }
}

ES6 纯粹、迭代

const getShuffledArr = arr => {
    const newArr = arr.slice()
    for (let i = newArr.length - 1; i > 0; i--) {
        const rand = Math.floor(Math.random() * (i + 1));
        [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]];
    }
    return newArr
};

可靠性和性能测试

本页上的某些解决方案并不可靠（它们仅部分随机化数组）。其他解决方案testShuffleArrayFun的效率明显较低。使用（见下文），我们可以测试数组改组函数的可靠性和性能。

function testShuffleArrayFun(getShuffledArrayFun){
    const arr = [0,1,2,3,4,5,6,7,8,9]

    var countArr = arr.map(el=>{
        return arr.map(
            el=> 0
        )
    }) //   For each possible position in the shuffledArr and for 
       //   each possible value, we'll create a counter. 
    const t0 = performance.now()
    const n = 1000000
    for (var i=0 ; i<n ; i++){
        //   We'll call getShuffledArrayFun n times. 
        //   And for each iteration, we'll increment the counter. 
        var shuffledArr = getShuffledArrayFun(arr)
        shuffledArr.forEach(
            (value,key)=>{countArr[key][value]++}
        )
    }
    const t1 = performance.now()
    console.log(`Count Values in position`)
    console.table(countArr)

    const frequencyArr = countArr.map( positionArr => (
        positionArr.map(  
            count => count/n
        )
    )) 

    console.log("Frequency of value in position")
    console.table(frequencyArr)
    console.log(`total time: ${t1-t0}`)
}

其他解决方案

其他解决方案只是为了好玩。

ES6 纯递归

const getShuffledArr = arr => {
    if (arr.length === 1) {return arr};
    const rand = Math.floor(Math.random() * arr.length);
    return [arr[rand], ...getShuffledArr(arr.filter((_, i) => i != rand))];
};

ES6 Pure 使用 array.map

function getShuffledArr (arr){
    return [...arr].map( (_, i, arrCopy) => {
        var rand = i + ( Math.floor( Math.random() * (arrCopy.length - i) ) );
        [arrCopy[rand], arrCopy[i]] = [arrCopy[i], arrCopy[rand]]
        return arrCopy[i]
    })
}

ES6 Pure 使用 array.reduce

function getShuffledArr (arr){
    return arr.reduce( 
        (newArr, _, i) => {
            var rand = i + ( Math.floor( Math.random() * (newArr.length - i) ) );
            [newArr[rand], newArr[i]] = [newArr[i], newArr[rand]]
            return newArr
        }, [...arr]
    )
}

解决方案 8：

编辑：这个答案不正确

请参阅评论和https://stackoverflow.com/a/18650169/28234。 由于这个想法并不罕见，因此将其留在这里以供参考。

对于小数组来说，一个非常简单的方法就是：

const someArray = [1, 2, 3, 4, 5];

someArray.sort(() => Math.random() - 0.5);

这可能不是很有效，但对于小数组来说，这很好用。下面是一个例子，您可以看到它有多随机（或不随机），以及它是否适合您的用例。

const resultsEl = document.querySelector('#results');
const buttonEl = document.querySelector('#trigger');

const generateArrayAndRandomize = () => {
  const someArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  someArray.sort(() => Math.random() - 0.5);
  return someArray;
};

const renderResultsToDom = (results, el) => {
  el.innerHTML = results.join(' ');
};

buttonEl.addEventListener('click', () => renderResultsToDom(generateArrayAndRandomize(), resultsEl));

<h1>Randomize!</h1>
<button id="trigger">Generate</button>
<p id="results">0 1 2 3 4 5 6 7 8 9</p>

运行代码片段Hide results展开片段

解决方案 9：

基准

我们首先看一下结果，然后我们来看看shuffle下面的每个实现 -

拼接速度很慢

任何使用splice或shift循环的解决方案都会非常慢。当我们增加数组的大小时，这一点尤其明显。在一个简单的算法中，我们 -

1. 在输入数组中获取rand位置i`t`

2. 添加t[i]到输出

3. splice`i来自数组的位置t`

为了夸大缓慢的效果，我们将在一个包含一百万个元素的数组上演示这一点。以下脚本几乎需要 30 秒-

const shuffle = t =>
  Array.from(sample(t, t.length))

function* sample(t, n)
{ let r = Array.from(t)
  while (n > 0 && r.length)
  { const i = rand(r.length) // 1
    yield r[i]               // 2
    r.splice(i, 1)           // 3
    n = n - 1
  }
}

const rand = n =>
  0 | Math.random() * n

function swap (t, i, j)
{ let q = t[i]
  t[i] = t[j]
  t[j] = q
  return t
}

const size = 1e6
const bigarray = Array.from(Array(size), (_,i) => i)
console.time("shuffle via splice")
const result = shuffle(bigarray)
console.timeEnd("shuffle via splice")
document.body.textContent = JSON.stringify(result, null, 2)

body::before {
  content: "1 million elements via splice";
  font-weight: bold;
  display: block;
}

运行代码片段Hide results展开片段

流行很快

诀窍是不要这样做splice，而是使用超级高效的pop。为此，代替典型的splice调用，你 -

1. 选择要拼接的位置，i

2. t[i]与最后一个元素交换，t[t.length - 1]

3. 添加t.pop()到结果中

现在我们可以在不到 100 毫秒shuffle的时间内处理一百万个元素-

const shuffle = t =>
  Array.from(sample(t, t.length))

function* sample(t, n)
{ let r = Array.from(t)
  while (n > 0 && r.length)
  { const i = rand(r.length) // 1
    swap(r, i, r.length - 1) // 2
    yield r.pop()            // 3
    n = n - 1
  }
}

const rand = n =>
  0 | Math.random() * n

function swap (t, i, j)
{ let q = t[i]
  t[i] = t[j]
  t[j] = q
  return t
}

const size = 1e6
const bigarray = Array.from(Array(size), (_,i) => i)
console.time("shuffle via pop")
const result = shuffle(bigarray)
console.timeEnd("shuffle via pop")
document.body.textContent = JSON.stringify(result, null, 2)

body::before {
  content: "1 million elements via pop";
  font-weight: bold;
  display: block;
}

运行代码片段Hide results展开片段

甚至更快

上述两种实现方式shuffle生成了一个新的输出数组。输入数组未发生改变。这是我首选的工作方式，但你可以通过原地改组来进一步提高速度。

不到 10 毫秒即可处理shuffle100 万个元素-

function shuffle (t)
{ let last = t.length
  let n
  while (last > 0)
  { n = rand(last)
    swap(t, n, --last)
  }
}

const rand = n =>
  0 | Math.random() * n

function swap (t, i, j)
{ let q = t[i]
  t[i] = t[j]
  t[j] = q
  return t
}

const size = 1e6
const bigarray = Array.from(Array(size), (_,i) => i)
console.time("shuffle in place")
shuffle(bigarray)
console.timeEnd("shuffle in place")
document.body.textContent = JSON.stringify(bigarray, null, 2)

body::before {
  content: "1 million elements in place";
  font-weight: bold;
  display: block;
}

运行代码片段Hide results展开片段

解决方案 10：

警告！由于其偏差和低效率
，不建议
将此答案用于随机化大型数组、加密或任何其他需要真正随机性的应用程序。元素位置只是半随机的，它们倾向于更接近其原始位置。请参阅https://stackoverflow.com/a/18650169/28234。

1 : -1您可以任意决定是否使用以下方法返回Math.random：

[1, 2, 3, 4].sort(() => (Math.random() > 0.5) ? 1 : -1)

尝试运行以下示例：

const array =  [1, 2, 3, 4];

// Based on the value returned by Math.Random,
// the decision is arbitrarily made whether to return 1 : -1

const shuffeled = array.sort(() => {
  const randomTrueOrFalse = Math.random() > 0.5;
  return randomTrueOrFalse ? 1 : -1
});

console.log(shuffeled);

运行代码片段Hide results展开片段

解决方案 11：

我发现这个变体出现在这个问题的重复的“作者删除”答案中。与其他一些已经获得大量赞成票的答案不同，这是：

1. 实际上是随机的

2. 不在位（因此shuffled得名，而不是shuffle）

3. 目前尚未有多种变体

这是一个展示其使用情况的 jsfiddle。

Array.prototype.shuffled = function() {
  return this.map(function(n){ return [Math.random(), n] })
             .sort().map(function(n){ return n[1] });
}

解决方案 12：

使用 ES2015 你可以使用这个：

Array.prototype.shuffle = function() {
  let m = this.length, i;
  while (m) {
    i = (Math.random() * m--) >>> 0;
    [this[m], this[i]] = [this[i], this[m]]
  }
  return this;
}

用法：

[1, 2, 3, 4, 5, 6, 7].shuffle();

解决方案 13：

//one line solution
shuffle = (array) => array.sort(() => Math.random() - 0.5);


//Demo
let arr = [1, 2, 3];
shuffle(arr);
alert(arr);

https://javascript.info/task/shuffle

Math.random() - 0.5是一个随机数，可能是正数或负数，因此排序函数会随机地重新排序元素。

解决方案 14：

var shuffle = function(array) {
   temp = [];
   originalLength = array.length;
   for (var i = 0; i < originalLength; i++) {
     temp.push(array.splice(Math.floor(Math.random()*array.length),1));
   }
   return temp;
};

解决方案 15：

递归解决方案：

function shuffle(a,b){
    return a.length==0?b:function(c){
        return shuffle(a,(b||[]).concat(c));
    }(a.splice(Math.floor(Math.random()*a.length),1));
};

解决方案 16：

使用 ES6 特性的现代短内联解决方案：

['a','b','c','d'].map(x => [Math.random(), x]).sort(([a], [b]) => a - b).map(([_, x]) => x);

（用于教育目的）

解决方案 17：

Fisher-Yates在 javascript 中改组。我在这里发布这个是因为与这里的其他答案相比，使用两个实用函数（swap 和 randInt）可以阐明算法。

function swap(arr, i, j) { 
  // swaps two elements of an array in place
  var temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}
function randInt(max) { 
  // returns random integer between 0 and max-1 inclusive.
  return Math.floor(Math.random()*max);
}
function shuffle(arr) {
  // For each slot in the array (starting at the end), 
  // pick an element randomly from the unplaced elements and
  // place it in the slot, exchanging places with the 
  // element in the slot. 
  for(var slot = arr.length - 1; slot > 0; slot--){
    var element = randInt(slot+1);
    swap(arr, element, slot);
  }
}

解决方案 18：

使用Fisher-Yates洗牌算法和 ES6：

// Original array
let array = ['a', 'b', 'c', 'd'];

// Create a copy of the original array to be randomized
let shuffle = [...array];

// Defining function returning random value from i to N
const getRandomValue = (i, N) => Math.floor(Math.random() * (N - i) + i);

// Shuffle a pair of two elements at random position j
shuffle.forEach( (elem, i, arr, j = getRandomValue(i, arr.length)) => [arr[i], arr[j]] = [arr[j], arr[i]] );

console.log(shuffle);
// ['d', 'a', 'b', 'c']

解决方案 19：

所有其他答案都基于 Math.random()，它速度很快但不适合加密级别随机化。

下面的代码在利用加密级别的随机化时使用了众所周知的Fisher-Yates算法。Web Cryptography API

var d = [1,2,3,4,5,6,7,8,9,10];

function shuffle(a) {
    var x, t, r = new Uint32Array(1);
    for (var i = 0, c = a.length - 1, m = a.length; i < c; i++, m--) {
        crypto.getRandomValues(r);
        x = Math.floor(r / 65536 / 65536 * m) + i;
        t = a [i], a [i] = a [x], a [x] = t;
    }

    return a;
}

console.log(shuffle(d));

运行代码片段Hide results展开片段

解决方案 20：

不改变源数组的 shuffle 函数

免责声明

请注意，此解决方案不适用于大型数组！如果您要对大型数据集进行混洗，则应使用上面建议的Durstenfeld算法。

解决方案

function shuffle(array) {
  const result = [], itemsLeft = array.concat([]);

  while (itemsLeft.length) {
    const randomIndex = Math.floor(Math.random() * itemsLeft.length);
    const [randomItem] = itemsLeft.splice(randomIndex, 1); // take out a random item from itemsLeft
    result.push(randomItem); // ...and add it to the result
  }

  return result;
}

工作原理

1. 将首字母复制array到itemsLeft

2. 从中挑选一个随机索引itemsLeft，将相应的元素添加到数组中并将其从数组result中删除itemsLeft

3. 重复步骤（2），直到itemsLeft数组为空

4. 返回result

解决方案 21：

首先，请看这里，对 javascript 中的不同排序方法进行了很好的视觉比较。

其次，如果您快速浏览上面的链接，您会发现random order与其他方法相比，这种排序似乎表现相对较好，同时非常容易和快速地实现，如下所示：

function shuffle(array) {
  var random = array.map(Math.random);
  array.sort(function(a, b) {
    return random[array.indexOf(a)] - random[array.indexOf(b)];
  });
}

编辑：正如@gregers指出的那样，比较函数是使用值而不是索引来调用的，这就是您需要使用的原因indexOf。请注意，此更改使代码不太适合较大的数组，因为indexOf运行时间为O（n）。

解决方案 22：

对 CoolAJ86 的答案进行简单修改，不修改原始数组：

 /**
 * Returns a new array whose contents are a shuffled copy of the original array.
 * @param {Array} The items to shuffle.
 * https://stackoverflow.com/a/2450976/1673761
 * https://stackoverflow.com/a/44071316/1673761
 */
const shuffle = (array) => {
  let currentIndex = array.length;
  let temporaryValue;
  let randomIndex;
  const newArray = array.slice();
  // While there remains elements to shuffle...
  while (currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // Swap it with the current element.
    temporaryValue = newArray[currentIndex];
    newArray[currentIndex] = newArray[randomIndex];
    newArray[randomIndex] = temporaryValue;
  }
  return newArray;
};

解决方案 23：

对于那些天赋不太高但能够接触到 lodash 奇妙之处的人来说，有lodash.shuffle这样的东西。

解决方案 24：

在 2019 年我们仍然在对数组进行改组，因此这里采用我的方法，对我来说这似乎简洁而快速：

const src = [...'abcdefg'];

const shuffle = arr => 
  [...arr].reduceRight((res,_,__,s) => 
    (res.push(s.splice(0|Math.random()*s.length,1)[0]), res),[]);

console.log(shuffle(src));

.as-console-wrapper {min-height: 100%}

运行代码片段Hide results展开片段

解决方案 25：

你可以使用lodash随机播放。效果很好

import _ from lodash;

let numeric_array = [2, 4, 6, 9, 10];
let string_array = ['Car', 'Bus', 'Truck', 'Motorcycle', 'Bicycle', 'Person']

let shuffled_num_array = _.shuffle(numeric_array);
let shuffled_string_array = _.shuffle(string_array);

console.log(shuffled_num_array, shuffled_string_array)

解决方案 26：

使用生成器函数的 ES6 紧凑代码*

该方法的工作原理是从未打乱顺序的数组副本中随机删除项目，直到没有剩余项目为止。它使用新的 ES6生成器函数。

只要 Math.random() 是公平的，这将是一次完全公平的洗牌。

let arr = [1,2,3,4,5,6,7]

function* shuffle(arr) {
  arr = [...arr];
  while(arr.length) yield arr.splice(Math.random()*arr.length|0, 1)[0]
}

console.log([...shuffle(arr)])

运行代码片段Hide results展开片段

或者，使用 ES6 和 splice：

let arr = [1,2,3,4,5,6,7]

let shuffled = arr.reduce(([a,b])=>
  (b.push(...a.splice(Math.random()*a.length|0, 1)), [a,b]),[[...arr],[]])[1]

console.log(shuffled)

运行代码片段Hide results展开片段

或者，ES6 索引交换方法：

let arr = [1,2,3,4,5,6,7]

let shuffled = arr.reduce((a,c,i,r,j)=>
  (j=Math.random()*(a.length-i)|0,[a[i],a[j]]=[a[j],a[i]],a),[...arr])

console.log(shuffled)

运行代码片段Hide results展开片段

解决方案 27：

随机化数组

 var arr = ['apple','cat','Adam','123','Zorro','petunia']; 
 var n = arr.length; var tempArr = [];

 for ( var i = 0; i < n-1; i++ ) {

    // The following line removes one random element from arr 
     // and pushes it onto tempArr 
     tempArr.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);
 }

 // Push the remaining item onto tempArr 
 tempArr.push(arr[0]); 
 arr=tempArr; 

解决方案 28：

虽然已经建议了许多实现方法，但我觉得我们可以使用 forEach 循环使其更短更容易，因此我们不需要担心计算数组长度，并且我们也可以安全地避免使用临时变量。

var myArr = ["a", "b", "c", "d"];

myArr.forEach((val, key) => {
  randomIndex = Math.ceil(Math.random()*(key + 1));
  myArr[key] = myArr[randomIndex];
  myArr[randomIndex] = val;
});
// see the values
console.log('Shuffled Array: ', myArr)

解决方案 29：

最短arrayShuffle函数

function arrayShuffle(o) {
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

解决方案 30：

有趣的是，没有非变异的递归答案：

var shuffle = arr => {
  const recur = (arr,currentIndex)=>{
    console.log("What?",JSON.stringify(arr))
    if(currentIndex===0){
      return arr;
    }
    const randomIndex = Math.floor(Math.random() * currentIndex);
    const swap = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = swap;
    return recur(
      arr,
      currentIndex - 1
    );
  }
  return recur(arr.map(x=>x),arr.length-1);
};

var arr = [1,2,3,4,5,[6]];
console.log(shuffle(arr));
console.log(arr);

运行代码片段Hide results展开片段