JavaScript中数组随机排序的实现详解

目录
  • 一、原地算法
  • 二、Array.property.sort()
    • 1、方法一(不推荐)
    • 2、方法一改良
  • 三、洗牌算法实现随机排序
    • 1、换牌
    • 2、抽牌

一、原地算法

在谈sort之前,我们先了解一下原地算法,什么事原地算法呢?所谓原地算法就是说基于原有的数据结构进行一定的操作修改,而不借助额外的空间。使用原地算法时,其内存干净,空间复杂度是O(1),可以减少没必要的内存,避免造成内存浪费和冗余。当然,减小内存损耗会带来算法复杂度和时间消耗的增加,所以是一个Tradeoff。Tradeoff 是一种针对目标选择有效的路径的思维方式,需要对做的事情权衡利弊,选择最佳方式处理问题。

二、Array.property.sort()

含义:sort方法基于原地算法实现数组排序,直接对数据进行排序

参数:sort(compare(a,b)),指定顺序对数组进行排序,不写参数的时候,默认会将原数据转换成字符串按照字符的Unicode编码进行排序。

compare(a,b)中,a、b都是比较参数,当

  • a-b>0 ,交换位置
  • a-b=0,位置不变
  • a-b<0,位置不变

随机排序我们都会想到Math的random方法,具体实现如下,但是这样操作确有缺陷,理论很丰满,实践很残酷。

1、方法一(不推荐)

arr.sort(() => Math.random() - 0.5)

缺陷:chrome浏览器对于数组长度为10以内的使用插入排序,反之则为快速排序和插入排序的组合,故而并不能做到随机分布。

测试:测试某数据在数组中各个位置的次数。

        let obj = {};
        let count = 0;
        let n = 10000;
        while (n--) {
            let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]
            arr.sort(() => Math.random() - 0.5)
            let index = arr.indexOf(1)//取1在数组排序后的位置
            obj[index] ? obj[index]++ : obj[index] = 1
        }

输出:

图示:

ECMAScript中关于Array.prototype.sort(comparefn)的标准,其中并没有规定具体的实现算法,但是提到一点: Calling comparefn(a,b) always returns the same value v when given a specific pair of values a and b as its two arguments.也就是说,对同一组a、b的值,comparefn(a, b)需要总是返回相同的值。而上面的() => Math.random() -0.5(即(a, b) => Math.random() - 0.5)显然不满足这个条件。 翻看v8引擎数组部分的源码,注意到它出于对性能的考虑,对短数组(例如长度小于10)使用的是插入排序,对长数组则使用了快速排序。

理解:(a, b) => Math.random() - 0.5,每次a,b都是固定的,但是Math.random() - 0.5)却是随机的,

2、方法一改良

构造一个新数组,如[{v:1,k:Math.random()},{v:1,k:Math.random()}],具体如下:

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]
for(let i=0;i<arr.length;i++){
    shuffle(arr)
}
function shuffle(arr){
   let newArr = arr.map(item=>({v:i,k:Math.random())})
   newArr.sort((a,b)=> (a.k - b.k))
   arr.splice(0, arr.length, ...newArr.map(i => i.v));
}

三、洗牌算法实现随机排序

1、换牌

逻辑:从一副牌中抽取一张,与最后一张牌进行交换,放到最后证明该牌已经被随机抽选过,而被交换的牌就排在前面,就有机会被继续抽选。

  • 随机抽取一张
  • 抽取的放置到最后位置
  • 最后位置的牌放置在随机抽取的位置
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14];
funtion shuffle(ar){
   for(let i = arr.length;i>0;i--){
      let temRandom =  Math.floor(Math.random()*i)
      arr[i] = arr[temRandom];
      arr[temRandom] = arr[i]
   }
   return arr
}
shuffle(arr)

2、抽牌

逻辑:从一副牌抽取一张放置一旁,则这幅牌会越抽越少,直至到最后一张。

  • 随机抽取一张
  • 抽取的牌放置旁边
  • 在抽取的那副牌冲除去随机抽取的那张牌
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14];
funtion shuffle(ar){
   let temp = [];
   for(let i = arr.length;i>0;i--){
      let temRandom =  Math.floor(Math.random()*i)
      temp.push(arr[temRandom])
      arr.splice(temRandom,1)//抽取一张后,要除去这张牌,然后在剩下的牌中继续抽
   }
   return temp
}
shuffle(arr)

附:本文用到的JS基础

本文用到数组方法基本介绍

splice返回被删除的元素,直接修改数组数据,可接受1/2/3个参数

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14];
arr.splice(0)//删除索引从0开始的所有数据,即删除所有数据
arr.splice(0)//删除索引从1开始的所有数据,即只保留第一位数据
arr.splice(2,1)//删除索引为2的数据
arr.splice(0,arr.length,5)//删除原数组的数据,并把数据5填充到arr中

Math.floor() 向下取整

Math.ceil() 向上取整

到此这篇关于JavaScript中数组随机排序的实现详解的文章就介绍到这了,更多相关JavaScript数组随机排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js如何找出两个数组中不同的元素

    目录 js找出两个数组中不同的元素 js找出两个数组中不同元素和相同元素的几种方法 找出不同元素 找出相同的元素 总结 js找出两个数组中不同的元素 function getNewArr(a,b){ const arr = [...a,...b]; const newArr = arr.filter(item => { return !(a.includes(item) && b.includes(item)); }); return newArr; } console.log(ge

  • JavaScript实现数组去重的十种方法分享

    目录 方法1 方法2 方法3 方法4 方法5 方法6 方法7 方法8 方法9 方法10 方法1 利用 ES6的set 方法和解构赋值——最常用.最简单. 这个方法是es6之后加入的,是最简单的一种方法. Set是一种结构,是一种不重复值的集合,如:{1,2,3}.它的特性之一就是里面的每一个值都是不重复的: [...new Set(arr)] 意思是将Set结构解构赋值为数组. function Unrepeated1(arr) { return [...new Set(arr)] } cons

  • Java 从json提取数组并转换为list的操作方法

    目录 Java 从json提取数组并转换为list Java单个对象和List对象转换成Json,Json转List (一)使用单个对象转换JSON对象 (二)多个对象存到List,再转换成JSON (三)json的list对象转List对象 Java 从json提取数组并转换为list 这里ret表示json字符串原文 // 解析为JSONObject JSONObject jsonObject = JSONObject.parseObject(ret); // 提取出JSONArray JS

  • js对象合并的4种方式与数组合并的4种方式

    目录 一.对象合并 1.拓展运算符(...) 2.Object.assign() 3.递归赋值 4.jquery中的extend() 二.数组合并 1.扩展操作符 2.使用array.concat()方法进行合并 3.关于Apply 4.array.push()方法进行合并 一.对象合并 1.拓展运算符(...) ES6入门中是这样说的: 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. let obj1 = {     name: '陈伟停',     gend

  • JS数组操作大全对象数组根据某个相同的字段分组

    目录 先说点废话 目标对象数组 准换后的对象数组 编写函数的思路 方法一 方法二 拓展————ES6的新方法Object.keys 先说点废话 最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结.当然需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用 目标对象数组 let dataArr = [{ id: 1, anyId: 1023, anyVal: 'fx67

  • JavaScript数组filter方法

    目录 1.定义 2.语法 3.参数说明 4.用法 5.注意事项 6.使用实例 1.定义 filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 2.语法 array.filter(function(currentValue,index,arr), thisValue); 3.参数说明 返回 4.用法 filter() 方法用于把Array中的某些元素过滤掉,然后返回剩下的未被过滤掉的元素. 5.注意事项 1.filter() 不会对空数组进行检测: 2.filt

  • JavaScript高阶API数组reduce函数使用示例

    目录 正文 1.求数组中所有对象的年龄和 2.按照年龄分组 3.将数组对象转化为对象 4.参数打印 总结 正文 前面我们讲了数组的一些基本方法,今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数,那么这篇文章就好好给大家介绍下reduce函数. 还是老样子,我们直接在应用中学习,直接上例子.让我们先定义一个包含几个对象的数组,注意观察下这个数组,可以看到里面有两个对象的age都是30.(下面会用到) // 一个包含几个人物对象的数组. const people = [

  • JavaScript数组合并的8种常见方法小结

    目录 1.ES6 解构 2.遍历添加 3.concat 4.join & split 5.解构添加 6.splice解构 7.apply 8.call 补充:两个数组的交叉合并 总结 1.ES6 解构 [...arr, ...array] 不改原数组值,生成新的数组. 2.遍历添加 array.forEach(item => { arr.push(item) }) 遍历方法:forEach.map.filter.every.for.for in.for of等. 添加方法:push(后追加)

  • js深度合并两个数组对象的实现

    目录 js深度合并两个数组对象 关于数组对象的深浅合并 js深度合并两个数组对象 js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a MergeRecursive(obj1, obj2) { // 合并两个数组 for (var p in obj2) { if (obj1[p] === undefined) { // 如果obj1没有p 直接把obj2的p加入 obj1[p] = obj2[p] } try { if (obj2[p].construc

  • 27个JavaScript数组常见方法汇总与实例说明

    1. push() 概括:数组末位增加 参数:需要增加的数据 返回值:数组更新后的长度 let arr = [1,2,3] arr.push(1) // 返回新增后的数组长度 4 arr.push() // 不传参数默认不新增 4 arr.push(1,2,3) // 新增多条数据时,返回新增完成后的数组长度 7 2. pop() 概括:数组末位删除 参数:无 返回值:删除的数据 let arr = [3] arr.pop() // 返回已删除的数据 3 arr.pop() // 当数组数据为空

随机推荐