快捷導(dǎo)航

JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作示例

更新時(shí)間：2019年01月03日 11:42:33 作者：司馬懿字仲達(dá)

這篇文章主要介紹了JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作,結(jié)合實(shí)例形式分析了javascript數(shù)組的定義、構(gòu)造、排序等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作。分享給大家供大家參考，具體如下：

<!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數(shù)組洗牌</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));
    /*
    //原始寫(xiě)法
    let tmp = arr[i];
    arr[i] = arr[j];
    arr[j] = tmp;
    */
    //es6的寫(xiě)法
    [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);//試驗(yàn)證明這種方法比第一種效率高多了
</script>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法,涉及javascript針對(duì)表格行的動(dòng)態(tài)添加技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
概述一個(gè)頁(yè)面從輸入U(xiǎn)RL到頁(yè)面加載完的過(guò)程
本文主要對(duì)一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載完的過(guò)程中都發(fā)生了什么事情進(jìn)行概述，對(duì)我們學(xué)習(xí)網(wǎng)絡(luò)語(yǔ)言有一定的幫助，下面就跟小編一起來(lái)看下吧
2016-12-12
一次讓你了解全部JavaScript的作用域
這篇文章主要介紹了一次讓你了解全部JavaScript的作用域,作用域決定了變量的生命周期和可見(jiàn)性，變量在作用域范圍之外是不可見(jiàn)的。,需要的朋友可以參考下
2019-06-06
詳解Javascript如何通過(guò)async/await優(yōu)雅地使用FileReader
這篇文章主要為大家詳細(xì)介紹了Javascript和Typescript如何通過(guò)async/await優(yōu)雅地使用FileReader,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
詳解js創(chuàng)建對(duì)象的幾種方法及繼承
這篇文章主要介紹了js創(chuàng)建對(duì)象的幾種方法及繼承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
基于JavaScript實(shí)現(xiàn)飄落星星特效
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
javascript拖拽應(yīng)用實(shí)例
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
echarts實(shí)現(xiàn)3d柱狀圖的2種方式舉例
echarts3D效果柱狀圖的實(shí)現(xiàn),這個(gè)太難了,我花了兩天終于調(diào)成我想要的效果啦,要是官網(wǎng)上有例子就好了,太難調(diào)了,下面這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)3d柱狀圖的2種方式,需要的朋友可以參考下
2023-02-02
利用js編寫(xiě)網(wǎng)頁(yè)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了利用js編寫(xiě)網(wǎng)頁(yè)進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
javascript 面向?qū)ο蠓庋b與繼承
本文是對(duì)自己這么長(zhǎng)時(shí)間以來(lái)學(xué)習(xí)javascript面向?qū)ο蟮目偨Y(jié)，這里針對(duì)封裝和繼承結(jié)合實(shí)例進(jìn)行了詳細(xì)分析，給有相同需求的小伙伴們參考下吧。
2014-11-11