JavaScript 排序算法

课程目标

• 学习排序算法：掌握冒泡排序，快速排序，选择排序，插入排序..等经典排序算法
• 通过编写排序算法，更加深入的实践数组相关知识

阅读

• W3School JavaScript random() 方法 (opens new window)
• MDN 排序 (opens new window)
• 十大经典算法排序总结对比 (opens new window)

任务一

<button>随机生成15个数的数组</button>
<button>使用冒泡排序</button>
<button>使用选择排序法</button>
<button>使用插入排序法</button>
<button>快速排序法</button>
<p id="showArray"></p>
<p id="showSortProcess"></p>
<script>
  function bubbleSort() {
    //实现冒泡排序
  }
  function selectionSort() {
    //实现选择排序法
  }
  function InsertionSort() {
    //实现插入排序法
  }
  function QuickSort() {
    //实现快速排序法
  }
</script>

需求说明

基于上述 HTML 实现按钮中描述的功能

• 点击随机生成15个数的数组按钮生成一个随机数组,展示在 id 为 showArray 的 p 标签中
• 分别用四种排序算法，实现对随机数组从小到大进行排序
• 排序过程在 id 为 showSortProcess 的 p 标签中输出

编码二

var arr = ["apple", "dog", "cat", "car", "zoo", "orange", "airplane"];

将上面数组分别按字母顺序 a-z 及 z-a 进行排序，在 console 中输出

var arr = [
  [10, 14],
  [16, 60],
  [7, 44],
  [26, 35],
  [22, 63],
];

将上面的二维数组，按照每个元素中第二个数从大到小的顺序进行排序输出，输出结果应该为：

[
  [22, 63],
  [16, 60],
  [7, 44],
  [26, 35],
  [10, 14],
];
var arr = [
  {
    id: 1,
    name: "candy",
    value: 40,
  },
  {
    id: 2,
    name: "Simon",
    value: 50,
  },
  {
    id: 3,
    name: "Tony",
    value: 45,
  },
  {
    id: 4,
    name: "Annie",
    value: 60,
  },
];

将上面数组分别按元素对象的 value 值从小到大进行排序后输出

进阶任务

有能力的同学可以选择一种排序算法实现它的可视化,下面是一些算法可视化网站，有兴趣的同学点进去参考一下

• algorithm-visualizer (opens new window) 这一个可以从代码中可视化算法的工具，还可以执行可视化代码的过程。
• VisuAlgo (opens new window)
• ELE428 Data Structures and Algorithms (opens new window)
• Illustrated Binary Search algorithm (opens new window)

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。