JavaScript实现shuffle数组洗牌操作示例


Posted in Javascript onJanuary 03, 2019

本文实例讲述了JavaScript实现shuffle数组洗牌操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript shuffle数组洗牌</title>
<body>
<script>
function createArray(max) {
  const arr = [];
  for(let i = 0; i < max; i++) {
    arr.push(i);
  }
  return arr;
}
function shuffleSort(arr) {
  arr.sort(()=> {
    //返回值大于0,表示需要交换;小于等于0表示不需要交换
    return Math.random() > .5 ? -1 : 1;
  });
  return arr;
}
function shuffleSwap(arr) {
  if(arr.length == 1) return arr;
  //正向思路
//  for(let i = 0, n = arr.length; i < arr.length - 1; i++, n--) {
//    let j = i + Math.floor(Math.random() * n);
  //逆向思路
  let i = arr.length;
  while(--i > 1) {
    //Math.floor 和 parseInt 和 >>>0 和 ~~ 效果一样都是取整
    let j = Math.floor(Math.random() * (i+1));
    /*
    //原始写法
    let tmp = arr[i];
    arr[i] = arr[j];
    arr[j] = tmp;
    */
    //es6的写法
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}
function wrap(fn, max) {
  const startTime = new Date().getTime();
  const arr = createArray(max);
  const result = fn(arr);
  const endTime = new Date().getTime();
  const cost = endTime - startTime;
  console.log(arr);
  console.log("cost : " + cost);
}
wrap(shuffleSort, 1000);
wrap(shuffleSwap, 1000);//试验证明这种方法比第一种效率高多了
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript实现shuffle数组洗牌操作示例

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript排序算法总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 #Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 #Javascript
You might like
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python自定义线程池实现方法分析
2018/02/07 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python实现图像全景拼接
2020/03/27 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python-for循环的内部机制
2020/06/12 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
双十佳事迹材料
2014/01/29 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
买房协议书范本
2014/10/23 职场文书
社区母亲节活动总结
2015/02/10 职场文书
中秋节慰问信
2015/02/15 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
JAVA API 实用类 String详解
2021/10/05 Java/Android
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android