JavaScript 和树（一）

 课程目标

• 熟练 JavaScript
• 学习树这种数据结构的基本知识

 阅读

• JavaScript 入门篇(opens new window)
• MDN JavaScript(opens new window)
• js 数据结构和算法 二叉树(opens new window)
• Data Structures With JavaScript: Tree(opens new window)
• Computer science in JavaScript: Binary search tree(opens new window)

 编码

• 参考示例图 (opens new window)，在页面中展现一颗二叉树的结构
• 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
• 二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）
• 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
• 每隔一段时间（500ms、1s 等时间自定）再遍历下一个节点

注意事项

• 如果按照示例图中展示树，可以使用 flexbox 布局
• 实现简单功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架

 JavaScript 和树（二）

 课程目标

• 熟练 JavaScript
• 学习树这种数据结构的基本知识

 阅读

• JavaScript 入门篇(opens new window)
• MDN JavaScript(opens new window)
• js 数据结构和算法 二叉树(opens new window)
• Data Structures With JavaScript: Tree(opens new window)
• Computer science in JavaScript: Binary search tree(opens new window)

 编码

• 基于任务上一任务，参考示例图 (opens new window)，将二叉树变成了多叉树，并且每一个节点中带有内容
• 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
• 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
• 每隔一段时间（500ms、1s 等时间自定）再遍历下一个节点
• 增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致

注意事项

• 树的遍历算法和方式自定，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）
• 如果按照示例图中展示树，可以使用 flexbox 布局
• 实现简单功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架

 JavaScript 和树（三）

 课程目标

• 熟练 JavaScript
• 学习树这种数据结构的基本知识

 阅读

• JavaScript 入门篇(opens new window)
• MDN JavaScript(opens new window)
• js 数据结构和算法 二叉树(opens new window)
• Data Structures With JavaScript: Tree(opens new window)
• Computer science in JavaScript: Binary search tree(opens new window)

 编码

• 基于上一任务，添加节点的选择、增加与删除的功能
• 点击某个节点元素，则该节点元素呈现一个特殊被选中的样式
• 增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉
• 增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置

注意事项

• 实现简单功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架

 JavaScript 和树（四）

 课程目标

• 熟练 JavaScript
• 学习树这种数据结构的基本知识

 阅读

• JavaScript 入门篇(opens new window)
• MDN JavaScript(opens new window)
• js 数据结构和算法 二叉树(opens new window)
• Data Structures With JavaScript: Tree(opens new window)
• Computer science in JavaScript: Binary search tree(opens new window)

 编码

基于上一任务的基本代码，实现一个树形组件，可参考如图示例 (opens new window)，样式自定义，不做限制

• 节点的折叠与展开
• 允许增加节点与删除节点
• 按照内容进行节点查找，并且把找到的节点进行特殊样式呈现，如果找到的节点处于被父节点折叠隐藏的状态，则需要做对应的展开

注意事项

• 实现功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
• 尽量做到样式交互、节点数据、节点操作的解耦
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架

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

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