将经典排序算法可视化

在写排序算法的时候，总是会考虑到以下几个问题：

• 如何才能最直观看出每种排序方法的原理和实现过程？
• 如何证明我写的排序算法是对的，是要求的算法过程？
• 如何让自己更清晰了解各个排序算法的实现过程？ 想要清晰解决上面几个问题，做数据排序的可视化无疑是最好的办法。

要做可视化首先要想到以下几个问题：

1.如何看出数据的排序

将数据大小图形化，即将大小不一的数据表现为长度不同的容器，并附有颜色。

排序前 图一：

排序后 图二

以以上两图为例，数据的大小分别图形化，展示为容器的高度，可以直观看出数据之前的大小，以可以直观看出数据见的排序序列。图一为乱序，图二为排序后的效果展示。

以上在 vue 中的实现很简单，定义包含一定量级数组变量，循环创建容器，数量为数组长度，高度为元素大小 * 放大因子

template

<div class="outer-container">
  <div v-for="(item, index) in list" :key="index" :style="`background-color: red; width: 30px; height: ${k * item}px; margin-left: 2px`">{{item}}</div>
</div>

script

data () {
  return {
    k: 0.5,
    list: []
  }
 }

`

generateList (count, max) {
  const res = []
  for (let i = 0 ; i < count; i++) {
    res.push(parseInt(Math.random()*(max+1),10))
  }
  return res
}

`

2.如何表现出排序的分步

排序算法中用到的几乎都是循环，循环会不停改变原数组的数据顺序，但 for 循环的速度是非常快的，是无法通过事实监听 list 改变观察页面变化的。所以这需要在页面更新的节点加上定时器。

定时器的 delay 时间为 : （当前的循环的次数 + 1）* 时间间隔

以选择排序为例： `

chooseSort: function (arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    setTimeout(() => {
      let minIndex = i
      for (let j = i + 1; j < arr.length; j++) {
        if (arr[j] < arr[minIndex]) {
          minIndex = j
        }
      }
      let temp = arr[i]
      arr[i] = arr[minIndex]
      arr[minIndex] = temp
      this.$forceUpdate()
    }, (i + 1) * interval)
  }
  return arr
}

由于数组改变顺序不会触发页面的更新，那么需要强制调用 this.$forceUpdate() 进行强制刷新页面

3. 最终实现效果

选择排序

插入排序

冒泡排序

希尔排序

源码： github