選擇排序

　　讓我們以最簡單的排序算法之一為例：找到數組中最小的元素并將其與第一個位置的元素交換，然后找到下一個最小的元素并將其與第二個位置的元素交換，然后繼續直到數組被排序。此方法稱為選擇排序。在每個外部循環之后繪制將得到以下輸出：

　　以下是我們可以快速編寫的程序：

　　該算法編寫起來不太困難，并且此實現的效率為 。在每個外部循環的末尾添加 A 以生成我們的輸出。O(n^2)console.log

　　如何為字母添加動畫效果？

　　現在讓我們假設我們想要對它進行動畫處理。例如，每次我們交換兩個元素時，我們都可以期望看到兩個元素相互移動并最終在新位置安頓下來的平穩過渡。

　　讓我們使用 HTML/CSS 來實現這一點。假設我們在數組中有 14 個字母：

　　要將字母移動到不同的位置，我們可以將其位置設置為 從 到 假設每個字母都占據 。為了使動畫有點流暢，我們可以添加 ，以允許動畫花費1秒，并具有一些輕松的感覺。S absolute 32px 320px 32px transition

　　我們制作什么動畫？

　　好的，HTML和CSS是確保字母在屏幕上移動的基本要素。但是我們需要一種方法來創建與動畫幀關聯的狀態。然后，我們可以在新位置顯示字母，以防狀態發生變化。

　　考慮保存陣列內容：initialArr

　　我們想問以下問題。如果我們跟蹤第一個字母，它將移動到什么位置?同樣，如果仔細觀察第二封信，它會移動到什么位置？從本質上講，我們希望跟蹤每個字母的位置。聽起來很直觀，當你在研究算法時，這可能是一個非常不同的體驗，你可以跟蹤其他任何東西，大多數時候是派生的屬性。as

　　假設我們使用數組來跟蹤每個字母的位置。例如，最初，第一個字母的位置是 ，第二個字母的位置是 。但是經過幾次移動后，第二個字母可以移動到位置 。假設我們知道當前運行的數組，我們可以使用以下 React 代碼顯示每個字母：index 0 1 10 index

　　我們從14個字母開始，以14個字母結束，因為它們是唯一的對象(盡管它們可以有重復的符號)。因此，我們無意更改對象列表；相反，我們只想計算出它們的當前位置，然后將其乘以32，如 .left: v * 32

　　如何生成倉位？

　　好的，現在給定一個位置列表，我們可以在屏幕上顯示它們。但是，誰來給我們每幀的所有位置呢?當然，這是我們試圖研究的算法。讓我們在 JavaScript 生成器函數的幫助下創建一個：

　　我相信你可以從上面的代碼中看到我們的算法。有兩個循環，每個內部循環后都有一個交換。它比算法本身稍微復雜一點，但總的來說，它是一個直接的翻譯。開銷是我們希望跟蹤每個字母在 中的位置，而不是最終排序的數組 。indexarr

　　最重要的一行是 ，我們在其中暫停算法并輸出 。這就是我們獲取當前狀態的方式。為了將所有內容放在一起，我們得到了以下組件：yield { index }index App

　　從本質上講，我們設置了一次性操作，以便在加載后運行動畫循環，然后首先組裝生成器 。之后，對于每一秒，我們調用以獲取下一個位置列表。React 將確保每次更新都會觸發屏幕的渲染，以使所有字母保持最新狀態。useEffectAppg=gen(initialArr)1000msg.next()setIndex(index)

　　想要制作更多動畫效果？

　　從這一刻起，只需考慮要制作更多元素的動畫即可。例如，在交換之前有一個時刻，我們想首先從變量跟蹤的中識別出我們正在比較的字母。i

　　在這種情況下，我們需要修改生成器函數：

　　我們可以再添加一行輸出，誰說我們只能生成一種類型的項目，誰說我們只能生成相同類型的數據。在這里，我們可以通過以下方式跟蹤字母的位置。我們還將此操作命名為 。所有這些都可以根據您自己的目的進行修改。當我們開始使用這個生成器時，我們可以用新的數據集做更多的事情：ii loop

　　將創建新的狀態變量來跟蹤位置。如果它與任何字母匹配，它會附加一個CSS類，因此您可以以不同的方式顯示它。outterId ii highlight