基於Rx.js與generator的排序算法可視化

一圖勝千言，一張動圖又勝過千張靜圖。

學習算法，與其在大部頭的字裏行間咬文嚼字，不如先登高望遠，一覽究竟。

排序是算法里的基礎，有着前輩智慧的結晶。

點擊下圖，你將來到排序算法這座山頂，你可以使用默認設置，也可以稍作修改，然後點擊 “開始排序”， 你將看到看到計算機是如何一步一步將一堆雜亂的數據排好序的。它是如此直觀，你再也不會弄混各種排序算法了。

圖中的 svg 圖形是用 d3 生成的, d3 是前端數據可視化領域的翹楚，推薦！

打開控制臺，裏面的代碼不是醜化過的，一目了然，通俗易懂。只是，這裏用了es6，老瀏覽就oo了。讓該逝去的就逝去吧。

說明

本項目依賴 Rx.js, 這裏用來將排序過程中的中間態數組變成數據流。 如果你還不知道 Rx.js， 強烈推薦，它的數據流思想是在事件循環基礎上的進一步昇華，是一個偉大的工具

const stream$ = Rx.Observable.create(observer => {  try {    const timer = setInterval(() => {      const ret = gen.next()      if (ret.done) {        clearInterval(timer)        observer.complete()      } else {        observer.next(ret.value)      }    }, 0)    return function unsubscribe () {      clearInterval(timer)    }  } catch (err) {    observer.error(err)  }})Meta.startTime = +new Date()Meta.subscription = stream$.subscribe(arr => {  update(arr)  const endTime = +new Date()  document.querySelector('#spendtime').innerHTML = endTime - Meta.startTime})

generator 是一個可返回多次的函數，如下定義一個 generator:

// 選擇排序function *selectionSort (arr) {  const len = arr.length  for (let i = 0; i < len - 1; i++) {    let min = i    for (let j = i + 1; j < len; j++) {      if (arr[j] < arr[min]) {        min = j      }    }    [arr[i], arr[min]] = [arr[min], arr[i]] // 解構賦值    yield arr  }}

與函數不同的是，generator 定義時在 function 後面有個 *。

let gen = selectionSort(arr) // 這裏生成了一個generatorlet ret = gen.next() // 每次調用generator.next()， yield arr 的arr會賦值給ret.value

gen.next()的返回值是這樣的

{    value: [123, 212, 12, 211, ...],    done: false // or true}

當 generator 函數體執行完了，done 被置爲 true

當然，這裏的介紹實在只是以管窺豹，唯一的價值是拋磚引玉。推薦阮一峯大神的 ECMA Script 6入門

—done—