先看一下案例效果：
HTML代码：
<input type="text" value="" id="bubble-input">
<button onclick="bubbleSort()">冒泡排序</button>
<h4 id="bubbleSort-result"></h4>
JS代码：
// 冒泡排序
function bubbleSort() {var arr = document.getElementById("bubble-input").value;var characters = arr.split('');var len = characters.length;for (var i = 0; i < len - 1; i++) {for (var j = 0; j < len - 1 - i; j++) {if (characters[j] > characters[j + 1]) {var temp = characters[j];characters[j] = characters[j + 1];characters[j + 1] = temp;}}}document.getElementById("bubbleSort-result").innerHTML = "排序结果：" + characters
}
详解：
- 获取输入字符串：
var arr = document.getElementById("bubble-input").value;
这行代码从页面上获取一个输入框的值（假设输入框的 id 是 bubble-input），并将这个值赋给变量 arr。
- 将字符串转换为字符数组：
var characters = arr.split('');
使用 split(‘’) 方法将字符串 arr 转换为一个字符数组 characters，每个字符成为数组中的一个元素。
- 获取数组的长度
var len = characters.length;
计算字符数组 characters 的长度，并赋值给变量 len。
- 冒泡排序
for (var i = 0; i < len - 1; i++) {for (var j = 0; j < len - 1 - i; j++) {if (characters[j] > characters[j + 1]) {var temp = characters[j];characters[j] = characters[j + 1];characters[j + 1] = temp;}}
}
- 外层循环控制总共需要进行的遍历次数。因为每遍历一次，都会将一个最大的元素放到数组的末尾，所以总共需要进行 len - 1 次遍历。
- 内层循环进行相邻元素的比较和交换。每次比较 characters[j] 和 characters[j + 1]，如果前者大于后者，则交换它们的位置。
- 交换位置的过程使用了一个临时变量 temp 来暂存 characters[j] 的值。
- 显示排序结果
document.getElementById("bubbleSort-result").innerHTML = "排序结果：" + characters;
将排序后的字符数组 characters 显示在页面上一个具有 id 为 bubbleSort-result 的元素中。
示例：
假设输入框中的值为 “dacb”，则处理步骤如下
arr 的值为 “dacb”。
characters 的值为 [‘d’, ‘a’, ‘c’, ‘b’]。
- 外层循环第 1 次：
- 内层循环第 1 次：[‘d’, ‘a’, ‘c’, ‘b’] 变为 [‘a’, ‘d’, ‘c’, ‘b’]（交换 d 和 a）。
- 内层循环第 2 次：[‘a’, ‘d’, ‘c’, ‘b’] 变为 [‘a’, ‘c’, ‘d’, ‘b’]（交换 d 和 c）。
- 内层循环第 3 次：[‘a’, ‘c’, ‘d’, ‘b’] 变为 [‘a’, ‘c’, ‘b’, ‘d’]（交换 d 和 b）。
- 外层循环第 2 次：
- 内层循环第 1 次：[‘a’, ‘c’, ‘b’, ‘d’] 变为 [‘a’, ‘b’, ‘c’, ‘d’]（交换 c 和 b）。
- 内层循环第 2 次：没有变化（c 和 d 已经是正确顺序）。
- 外层循环第 3 次：
- 内层循环第 1 次：没有变化（a 和 b 已经是正确顺序）。
最终结果：[‘a’, ‘b’, ‘c’, ‘d’]。
页面上显示的结果为：排序结果：a,b,c,d。
)
