当前位置:首页 > JavaScript

js 实现数组乱序

2026-02-03 06:27:53JavaScript

方法一:使用 sort 结合随机数

通过 Math.random() 生成随机数,利用 sort 方法随机排序数组元素。这种方式简单但存在一定的偏差,因为 sort 的排序算法可能不完全随机。

const shuffleArray = (arr) => {
  return arr.sort(() => Math.random() - 0.5);
};

const array = [1, 2, 3, 4, 5];
console.log(shuffleArray(array));

方法二:Fisher-Yates 洗牌算法

Fisher-Yates 算法是一种高效且完全随机的乱序方法。从数组末尾开始,依次与随机位置的元素交换。

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

const array = [1, 2, 3, 4, 5];
console.log(shuffleArray(array));

方法三:使用 Array.map 结合随机值

通过为每个元素分配随机值,然后根据随机值排序。这种方式类似于方法一,但更直观。

const shuffleArray = (arr) => {
  return arr
    .map((value) => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value);
};

const array = [1, 2, 3, 4, 5];
console.log(shuffleArray(array));

方法四:使用 Lodash 库的 _.shuffle

如果项目中已引入 Lodash,可以直接使用其 _.shuffle 方法实现乱序。

js 实现数组乱序

const _ = require('lodash');
const array = [1, 2, 3, 4, 5];
console.log(_.shuffle(array));

注意事项

  • Fisher-Yates 算法是推荐的标准实现,因为它的随机性更均匀。
  • 方法一和方法三的随机性可能不够完美,适合对随机性要求不高的场景。
  • Lodash 的 _.shuffle 内部也采用 Fisher-Yates 算法,适合直接调用。

标签: 数组js
分享给朋友:

相关文章

vue数组实现原理

vue数组实现原理

Vue 数组响应式原理 Vue 通过重写数组的原型方法来实现对数组变化的监听。具体实现基于 JavaScript 的原型继承和对象劫持技术。 核心实现机制 Vue 创建了一个继承自原生 Array…

vue循环数组实现

vue循环数组实现

循环数组的实现方法 在Vue中循环数组通常使用v-for指令,以下是几种常见场景的实现方式: 基本数组循环 <template> <div> <ul&g…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…