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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 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
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python中的filter()函数的用法
2015/04/27 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python实现动态数组的示例代码
2019/07/15 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
网站创业计划书
2014/04/30 职场文书
银行求职信
2014/05/31 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
建议书范文
2015/02/05 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
校园安全学习心得体会
2016/01/18 职场文书
python字符串常规操作大全
2021/05/02 Python