Перемешивание элементов массива в JavaScript: случайный порядок

Быстрый ответ

Если вы хотите перемешать массив в JavaScript, наиболее рекомендуемым вариантом будет алгоритм Фишера-Йетса:

function shuffle(arr) {
  let newArr = [...arr];
  for (let i = newArr.length – 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]]; // ✨ Волшебство деструктуризации массивов ✨
  }
  return newArr;
}

Чтобы получить непредсказуемый результат, просто выполните функцию shuffle с вашим массивом.

Понимание процесса перемешивания

Перемешивание в стиле ES6: изящность против эффективности

Вот версия для ES6 алгоритма перемешивания:

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

Понятно, что деструктуризация и стрелочные функции упрощают нотацию, однако при работе с большими массивами использование оператора распространения может отрицательно сказаться на производительности.

Подробнее об этом расскажет наш спикер на видео

Почему выбор алгоритма Фишера-Йетса — это ваш лучший выбор

• Эффективность: сложность алгоритма составляет O(n), что делает его идеальным для больших массивов.
• Надежность: каждому элементу гарантированы равные шансы попасть на любую позицию.
• Истинная случайность: только такие перемешивания сделают вашу работу с массивами непредсказуемой и интересной.

Добавление метода перемешивания в прототип массива — будьте осторожны

Если вы хотите безопасно добавить новый метод в прототип, воспользуйтесь следующим кодом:

if (!Array.prototype.safeShuffle) {
  Array.prototype.safeShuffle = function() {
    return shuffle(this);
  };
}

Таким образом, вы сможете перемешивать массивы безопасно. Но помните о рисках изменения прототипов.

Проверьте случайность процесса перемешивания

Убедитесь, что перемешивание действительно является случайным:

• Статистические тесты: проведите тесты и проанализируйте распределение результатов.
• Тесты визуализации: в хорошо перемешанном массиве не должно быть угадаемых закономерностей.
• Аудит кода: попросите коллег проверить вашу реализацию.

Визуализация

Перемешивание массива можно визуализировать как бой белок за желуди:

До:       [🐿️, 🐿️, 🐿️, 🐿️, 🐿️]   // Идиллическая картина

Перемешивание...

После: [🐿️, 🐿️, 🐿️, 🐿️, 🐿️]   // ХАОС!

Белки (элементы) борются за новые желуди (позиции), что приводит к непредсказуемой комбинации.

Опасность: будьте внимательны

Остерегайтесь некорректных входных данных

Проверьте входные данные, чтобы избежать ошибок при некорректных аргументах:

if (!Array.isArray(arr) || !arr.length) return [];

Неправильное использование sort() с Math.random()

Соблазнительный, но нерациональный подход:

arr.sort(() => 0.5 – Math.random()); // ❌ Плохая идея!

Такой вид сортировки создает систематическую ошибку, не обеспечивая равных шансов для всех элементов.

Аргументы против перемешивания на месте

В некоторых случаях может потребоваться изменить исходный массив из-за ограниченных ресурсов памяти или в целях повышения производительности. Однако стоит помнить о возможных рисках таких изменений.

Полезные материалы

1. Перемешивание Фишера-Йетса — Основной ресурс по теме перемешивания массивов.
2. Метод sort() (Array.prototype.sort()) – JavaScript | MDN — Руководство по работе с методом sort.
3. Сложности создания случайности — Дискуссия о проблемах создания случайности.
4. Перетасовка массива — Практические задания, помогающие освоить технику перемешивания.
5. Понимание Reducer | CSS-Tricks — Глубокое погружение в концепцию Reducer.
6. Как случайно переставить элементы массива? – Stack Overflow — Советы от профессионалов разработки.
7. lodash.shuffle – npm — Готовая функция для перемешивания массивов.