javascript - 在 for 循环的每次迭代中输出一个数组
问题描述
我有一个脚本,它从用户那里获取数字输入,将它们分配给一个数组,然后使用冒泡排序方法将这些数字按顺序排列。
一切都很好,但我似乎无法弄清楚如何输出数组的内容,因为每次迭代都会改变它。基本上,我想在每个外部 for() 循环循环的新行上观察它的运行情况。
function sortFunction()
{
var totalNums = prompt("How many numbers would you like to enter?","");
var numsArray = [];
for(i=0; i<totalNums; ++i)
{
var nums = prompt("Please enter number " ,"");
if(nums != 'x')
{
numsArray[i] = parseInt(nums);
document.getElementById("unsorted").innerHTML = "Orignal Numbers: " + numsArray;
}
}
var length = numsArray.length;
var swapped;
do
{
swapped = false;
for (var j=0; j < length-1; j++)
{
if (numsArray[j] > numsArray[j+1])
{
var temp = numsArray[j];
numsArray[j] = numsArray[j+1];
numsArray[j+1] = temp;
swapped = true;
}
}
document.getElementById("sorted").innerHTML = (numsArray); //This is where I am needing help
} while (swapped);
}
<p> Click the button to enter and display an array of numbers! </p>
<button onclick="sortFunction()">Click Me</button>
<div id ="unsorted">Unsorted</div>
<div id ="sorted">Sorted</div>
解决方案
你非常亲近。我所做的只是将 innerHTML 行上的运算符更改为+=
而不是=
. 我还添加了一行来每次清除“排序”队列,并对结果进行一些格式化。
function sortFunction() {
var totalNums = prompt("How many numbers would you like to enter?", "");
var numsArray = [];
document.getElementById("sorted").innerHTML = "";
for (i = 0; i < totalNums; ++i) {
var nums = prompt("Please enter number ", "");
if (nums != 'x') {
numsArray[i] = parseInt(nums);
document.getElementById("unsorted").innerHTML = "Orignal Numbers: " + numsArray;
}
}
var length = numsArray.length;
var swapped;
let x = 0;
do {
x++;
swapped = false;
for (var j = 0; j < length - 1; j++) {
if (numsArray[j] > numsArray[j + 1]) {
var temp = numsArray[j];
numsArray[j] = numsArray[j + 1];
numsArray[j + 1] = temp;
swapped = true;
}
}
document.getElementById("sorted").innerHTML += "Step " + x + ": " + (numsArray) + "<br>"; //This is where I am needing help
} while (swapped);
}
<p> Click the button to enter and display an array of numbers! </p>
<button onclick="sortFunction()">Click Me</button>
<div id="unsorted">Unsorted</div>
<div id="sorted">Sorted</div>