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 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
第一篇初识bootstrap
Jun 21 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python 性能优化方法小结
2017/03/31 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
本科生详细的自我评价
2013/09/19 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
《学会合作》教学反思
2014/04/12 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
罚站检讨书
2015/01/29 职场文书
导游词怎么写
2015/02/04 职场文书
药店收银员岗位职责
2015/04/07 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
2019军训心得体会
2019/06/27 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python