JSFiddle - React, Tailwind, and code Playground

by Paul Lan

HTML

<h2>源数据</h2>

<li>[0, 8, 9, 2, 5, 7, 6, 1, 4]</li>

<h2>维基百科上的冒泡</h2>

<a href="http://zh.wikipedia.org/wiki/%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F">点击查看</a>

<li>结果：<span id="result1"></span>
</li>
<li>循环次数：<span id="iteration1"></span>
</li>
<li>排序次数：<span id="count1"></span>
</li>

<h2>小方初步改进的冒泡</h2>

<li>结果：<span id="result2"></span>
</li>
<li>循环次数：<span id="iteration2"></span>
</li>
<li>排序次数：<span id="count2"></span>
</li>

JavaScript

var arr1 = [0, 8, 9, 2, 5, 7, 6, 1, 4, 20, 100, 3, 55, 1003];
var arr2 = arr1.concat([]);

function bubbleSort(arr) {
    var iteration = 0;
    var count = 0;
    var i = arr.length,
        j;
    var tempExchangVal;
    while (i > 0) {
        for (j = 0; j < i - 1; j++) {
            iteration++;
            if (arr[j] > arr[j + 1]) {
                count++;

                tempExchangVal = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = tempExchangVal;
            }
        }
        i--;
    }
    return [arr, iteration, count];
}

var r1 = bubbleSort(arr1);

function xfBubbleSort(a) {
    var iteration = 0;
    var count = 0;
    var i = 0;
    var j;
    var tmpE;
    var lookBack;
    for (; i < a.length; i++) {
        for (j = i; j < a.length; j++) {
            iteration++;
            if (a[j] > a[j + 1]) {
                if (lookBack) {
                   lookBack = false; 
                }
                count++;

                tmpE = a[j + 1];
                a[j + 1] = a[j];
                a[j] = tmpE;
                if (j > 0) {
                    j = j - 2;
                    lookBack = true;
                };

            } else {
                if (lookBack) {
                    j = j + 2;
                };
                break;
            }
        }
    }
    return [a, iteration, count];
}

var r2 = xfBubbleSort(arr2);

$('#result1').html(r1[0].join(', '));
$('#iteration1').html(r1[1]);
$('#count1').html(r1[2]);

$('#result2').html(r2[0].join(', '));
$('#iteration2').html(r2[1]);
$('#count2').html(r2[2]);