切換索引后數組未更新

Question

我正在開發用於排序算法的可視化工具。 在我進入選擇排序之前，一切都按預期工作。 我知道選擇排序將通過並搜索 MINIMUM 值，然后交換它在數組中開始的索引。 但是，每次通過時， i值都不會改變。 我通過更改我的循環中i索引表示的塊的顏色來測試它，它永遠不會改變，所以 MINIMUM 值只是不斷切換到i所在的位置。 您可以在 GitHub 頁面上查看我的項目，只需使用左側導航欄選擇選擇排序，您就可以看到我遇到的問題。 底部片段是我的swap function，它沒有使用任何其他排序方法執行此操作，只有選擇排序。

Github Pages -- https://kevin6767.github.io/sorting-algorithm-visualization/

選擇function

async function selectionSort() {
    let blocks = document.querySelectorAll('.block');

    for (let i = 0; i < blocks.length; i++) {
        // Assume a minimum value
        let min = i;
        for (let j = i + 1; j < blocks.length; j++) {
            blocks[j].style.backgroundColor = '#FF4949';
            blocks[min].style.backgroundColor = '#13CE66';
            blocks[i].style.backgroundColor = 'orange';

            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, frame_speed)
            );
            const value1 = Number(blocks[j].childNodes[0].innerHTML);
            const value2 = Number(blocks[min].childNodes[0].innerHTML);
            if (value1 < value2) {
                blocks[min].style.backgroundColor = '#58B7FF';
                min = j;
            }
            blocks[j].style.backgroundColor = '#58B7FF';
        }
        if (min !== i) {
            let tmp = blocks[i];
            blocks[i] = blocks[min];
            blocks[min] = tmp;
            await swap(blocks[i], blocks[min]);
            blocks = document.querySelectorAll('.block');
        }
        // Swap if new minimun value found
        blocks[i].style.backgroundColor = '#58B7FF';
    }
}

交換 function

function swap(el1, el2) {
    return new Promise((resolve) => {
        const style1 = window.getComputedStyle(el1);
        const style2 = window.getComputedStyle(el2);

        const transform1 = style1.getPropertyValue('transform');
        const transform2 = style2.getPropertyValue('transform');

        el1.style.transform = transform2;
        el2.style.transform = transform1;

        // Wait for the transition to end!
        window.requestAnimationFrame(function () {
            setTimeout(() => {
                container.insertBefore(el2, el1);
                resolve();
            }, 300);
        });
    });
}

Answer 1

我最終修復了它。 看來我必須從 just.querySelectorAll 獲取 Nodelist 數組，然后使用 .Arrayfrom() 將其轉換為數組，這在谷歌搜索后非常簡單。 從那時起，我需要弄清楚如何在每次傳遞時更新數組，這又一次像從另一個索引移動一個索引一樣簡單。

答案中有趣的部分是我將如何更新節點列表本身，這樣我的所有 css 代碼仍然可以工作（這是一個排序可視化工具，因此它會顯示它所在的元素並用顏色突出顯示它）。 然而，答案就在我面前。 即使我將 Nodelist 數組變成了一個常規數組，我仍然能夠將 styles 應用於它。 這意味着我根本不必改變 Nodelist 數組，只需在 function 中保留一個單獨的數組即可使用。

PS。 該算法在上面的代碼片段中確實存在很多問題，因為我在 if 語句（value1 和 value2）中比較了 2 個字符串，這是導致很多實際算法錯誤的原因，只需在周圍添加 Number() function 即可解決我的innerhtml代碼。

選擇

async function selectionSort() {
    let blocks = document.querySelectorAll('.block');
    let convertedBlocks = Array.from(blocks);
    let len = convertedBlocks.length;
    for (let i = 0; i < len; i++) {
        let min = i;
        for (let j = i + 1; j < len; j++) {
            convertedBlocks[j].style.backgroundColor = 'red';
            convertedBlocks[min].style.backgroundColor = 'green';
            convertedBlocks[i].style.backgroundColor = 'orange';
            await new Promise((resolve) =>
                setTimeout(() => {
                    resolve();
                }, frame_speed)
            );
            if (
                Number(convertedBlocks[min].childNodes[0].innerHTML) >
                Number(convertedBlocks[j].childNodes[0].innerHTML)
            ) {
                convertedBlocks[min].style.backgroundColor = '#58B7FF';
                min = j;
            }
            convertedBlocks[j].style.backgroundColor = '#58B7FF';
        }
        if (min !== i) {
            let tmp = convertedBlocks[i];
            convertedBlocks[i] = convertedBlocks[min];
            convertedBlocks[min] = tmp;
            await swap(convertedBlocks[i], convertedBlocks[min]);
        }
        convertedBlocks[min].style.backgroundColor = '#58B7FF';
        convertedBlocks[i].style.backgroundColor = '#58B7FF';
    }
}