编程语言
首页 > 编程语言> > JavaScript冒泡排序+Vue可视化冒泡动画

JavaScript冒泡排序+Vue可视化冒泡动画

作者：互联网

冒泡排序（Bubble Sort）算是前端最简单的算法，也是最经典的排序算法了。网上JavaScript版本的冒泡排序很多，今天用Vue实现一个动态的可视化冒泡排序。

01、JavaScript冒泡排序

冒泡排序原理也比较简单，就是相邻元素两两比较排序，把大的元素冒泡排序到后面，递归所有相邻元素组合完成排序。

1.1、原理

有一个无序数组：let arr = [100, 5, 6, 17, 3, 1]，长度为len=6。

冒泡排序的动画过程如下图，排序过程很直观，一目了然，下一章节也实现一个跟好的。

1.2、JavaScript实现

经典冒泡排序算法，用两个for循环来实现所有元素的两两对比排序。统计了一下排序次数，一共比较了15次。冒泡排序的时间复杂度是O(n^2)，这是最大值，最小为O(n)。


 
  //经典冒泡排序算法
  //从小到大冒泡排序
  let arr = [100, 5, 6, 17, 3, 1];
  let count=0; //计数器
  function bubbleSort(arr) {
  const len = arr.length;
  let t;count=0;
  for (let i = 0; i < len - 1; i++) {
  for (let j = 0; j < len - i - 1; j++) {
  count++;
  //比较相邻两个元素
  if (arr[j] > arr[j + 1]) {
  //交换两个元素，大的往后排列
  t = arr[j];
  arr[j] = arr[j + 1];
  arr[j + 1] = t;
  }
  }
  }
  return arr;
  }
  console.log(bubbleSort(arr),"比较次数：",count);
  //[1, 3, 5, 6, 17, 100] '比较次数：' 15

上面代码中交换两个元素位置的时候，用了一个中间变量（t），可以改进一下。用一个解构赋值来交换值，就不用额外的一个中间变量（t）了。


 
  let arr = [100, 5, 6, 17, 3, 1];
  function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len - 1; i++) {
  for (let j = 0; j < len - i - 1; j++) {
  //比较相邻两个元素
  if (arr[j] > arr[j + 1]) {
  //用结构赋值进行交换
  [arr[j], arr[j + 1]] = [arr[j+1], arr[j]];
  }
  }
  }
  return arr;
  }
  console.log(bubbleSort(arr));
  //[1, 3, 5, 6, 17, 100]

02、Vue实现一个冒泡动画

用Vue来实现一个可视化的冒泡排序，用Vue就不用去操作Dom了，只需要要处理好排序过程即可，因此首先要对排序过程进行改造。

2.1、排序过程改造

上一章节的排序是连续执行，瞬间完成的。要实现可视化的排序效果，每一个排序步骤之间得有间隔，给过渡动画留时间。就需要把排序的每一个步骤拆开，可以单独控制执行。

标签：JavaScript,函数,编程语言,Object,编程,Node, function
来源：