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表数据排序 sort table data
Feb 18 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 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创建PDF中文文档
2006/10/09 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
在什么时候需要使用"常引用"
2015/12/31 面试题
办公室主任先进事迹
2014/01/18 职场文书
网络教育自我鉴定
2014/02/04 职场文书
中华魂演讲稿
2014/05/13 职场文书
年终考核实施方案
2014/05/26 职场文书
心理健康教育主题班会
2015/08/13 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Redis高可用集群redis-cluster详解
2022/03/20 Redis
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技