关于排序网上有许多方法,项目中也有可能遇到,所以对排序做一些了解是很必要的,这次给博客文章按照阅读量进行排序进行了实现,这里我用的是最简单的冒泡排序

冒泡排序的原理

依次比较相邻的两个值，如果后面的比前面的小，则将小的元素排到前面。依照这个规则进行多次并且递减的迭代，直到顺序正确

冒泡排序的优缺点

最简单、最慢、长度小于7的时候最优

这次排序就是根据比对每篇文章的阅读量来进行排序,先上代码

this.showLoading = true
if (this.sortByViewCount.isTrue === false) {
  for (let i = 0; i < this.contentData.length; i++) {
    for (let j = 0; j < this.contentData.length - 1 - i; j++) {
        if (this.contentData[j][`view_count`] < this.contentData[j + 1][`view_count`]) {
          let temp = this.contentData[j + 1]
          this.contentData.splice(j + 1, 1, this.contentData[j])
          this.contentData.splice(j, 1, temp)
        }
      }
   }
} else {
  this.ax.message.messageAlert(`排序提示`, `已经是按照阅读量排序的`, `info`)
  return false
}
this.sortByViewCount.isTrue = true
this.showLoading = false

忘记给效果图了哈哈,重新编辑看下效果图

在这次排序中遇到了一点还踩到了一次 vue 的坑,在排序中需要更新数据的顺序,顺序重新排列后,视图却没有更新,试了 vue 提供的$set方法也是没有效果的,所以后来就通过数组的 splice 方法进行实现的

后续还会用快排进行实现,这次就这样拉 🖐