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

 更新时间:2019年01月03日 11:42:33   转载 作者:司马懿字仲达  
这篇文章主要介绍了JavaScript实现shuffle数组洗牌操作,结合实例形式分析了javascript数组的定义、构造、排序等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:

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

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

相关文章

  • JS中令人发指的valueOf方法介绍

    JS中令人发指的valueOf方法介绍

    彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍真是令人发指啊,不可思议的朋友可以参考下啊
    2013-02-02
  • js弹出层(jQuery插件形式附带reLoad功能)

    js弹出层(jQuery插件形式附带reLoad功能)

    之前的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改为jQuery的插件形式,感觉还不错,有兴趣的朋友可以参考下,希望可以帮助到你
    2013-04-04
  • 如何实现从照片中裁切自已的肖像呢?

    如何实现从照片中裁切自已的肖像呢?

    如何实现从照片中裁切自已的肖像呢?...
    2007-03-03
  • JS高级调试技巧:捕获和分析 JavaScript Error详解

    JS高级调试技巧:捕获和分析 JavaScript Error详解

    前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息
    2014-03-03
  • js表达式与运算符简单操作示例

    js表达式与运算符简单操作示例

    这篇文章主要介绍了js表达式与运算符简单操作,结合实例形式分析了JavaScript表达式与运算符的基本算数运算、逻辑运算、比较运算等相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • JS document form表单元素操作完整示例

    JS document form表单元素操作完整示例

    这篇文章主要介绍了JS document form表单元素操作,结合完整实例形式详细分析了JavaScript form表单元素获取、输出、遍历等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • Javascript里使用Dom操作Xml

    Javascript里使用Dom操作Xml

    Javascript里使用Dom操作Xml...
    2006-09-09
  • SVG描边动画

    SVG描边动画

    本文主要介绍了SVG描边动画的相关实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript编程学习技巧汇总

    JavaScript编程学习技巧汇总

    这篇文章主要介绍了JavaScript编程学习技巧汇总,整理了编程技巧、实用函数、简洁方法、编程细节等相关资料,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • javascrpt密码强度校验函数详解

    javascrpt密码强度校验函数详解

    这篇文章主要为大家详细介绍了javascrpt密码强度校验函数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论