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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
js中实现继承的五种方法
Jan 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判断正常访问和外部访问的示例
2014/02/10 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
vue--vuex详解
2019/04/15 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
js实现3D旋转相册
2020/08/02 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python3实现随机数
2018/06/25 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Django权限设置及验证方式
2020/05/13 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
就业推荐自我鉴定
2013/10/06 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
甘南现象心得体会
2014/09/11 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
创业计划书之养殖业
2019/10/11 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫