WEB前端教程：JavaScript 排序算法

学习排序算法：掌握冒泡排序，快速排序，选择排序，插入排序..等经典排序算法

课程目标

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

阅读

任务一

<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 后进行提交。

总结

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-02 14:50
阅读 ( 558 )
分类：WEB前端开发

WEB前端教程：JavaScript 排序算法

课程目标

阅读

任务一

编码二

进阶任务

提交

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »