. . . . . . . . . . . . . . . . . . 89 7. 树 90 7.1. 二叉树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 7.2. 二叉树遍历 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 7.3. 二叉搜索树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 7.4. AVL 树 * . . . . . . . . . . . . . . . . . . . . . . . . . 复杂度分析：数据结构与算法的评价维度、算法效率的评估方法。时间复杂度、空间复杂度，包括推算 方法、常见类型、示例等。 ‧ 数据结构：常用的基本数据类型，数据在内存中的存储方式、数据结构分类方法。数组、链表、栈、队列、 散列表、树、堆、图等数据结构，内容包括定义、优劣势、常用操作、常见类型、典型应用、实现方法等。 ‧ 算法：查找算法、排序算法、搜索与回溯、动态规划、分治算法，内容包括定义、使用场景、优劣势、时 空效率、实现方法、示例题目等。

件平凡或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码 . . . . . . . . . . . . . . . . . 132 第 7 章 树 135 7.1 二叉树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 7.2 二叉树遍历 . . . . . . . . . . . . . . . . . . . . . . 7.3 二叉树数组表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 7.4 二叉搜索树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 7.5 AVL 树 * . .

件平凡或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 本书旨在通过清晰易懂的动画图解和可运行的代码 . . . . . . . . . . . . . . . . . 132 第 7 章 树 135 7.1 二叉树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 7.2 二叉树遍历 . . . . . . . . . . . . . . . . . . . . . . 7.3 二叉树数组表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 7.4 二叉搜索树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 7.5 AVL 树 * . .

. . . . . . . . . . . . . . . . . 131 第 7 章 树 134 7.1 二叉树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 7.2 二叉树遍历 . . . . . . . . . . . . . . . . . . . . . . 7.3 二叉树数组表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 7.4 二叉搜索树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 7.5 AVL 树 * . . 12.2 分治搜索策略 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 12.3 构建二叉树问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 12.4 汉诺塔问题 . . . . .

. . . . . . . . . . . . . . . . . 126 第 7 章 树 129 7.1 二叉树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 7.2 二叉树遍历 . . . . . . . . . . . . . . . . . . . . . . 7.3 二叉树数组表示 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 7.4 二叉搜索树 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 7.5 AVL 树 * . . 12.2 分治搜索策略 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 12.3 构建二叉树问题 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 12.4 汉诺塔问题 . . . . .

146 7.4 二元搜尋樹 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 7.5 AVL 樹 * . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 7.6 小結 . key + ' -> ' + pair.val); } console.log(res); } } } 值得注意的是，當鏈結串列很長時，查詢效率 ?(?) 很差。此時可以將鏈結串列轉換為“AVL 樹”或“紅黑 樹”，從而將查詢操作的時間複雜度最佳化至 ?(log ?) 。 6.2.2 開放定址 開放定址（open addressing）不引入額外的資料結構，而是透過“多次探測”來處理雜湊衝突，探測方式主 用於儲存資料流，以保持其有序狀態。 7.5 AVL 樹 * 在“二元搜尋樹”章節中我們提到，在多次插入和刪除操作後，二元搜尋樹可能退化為鏈結串列。在這種情 況下，所有操作的時間複雜度將從 ?(log ?) 劣化為 ?(?) 。 如圖 7‑24 所示，經過兩次刪除節點操作，這棵二元搜尋樹便會退化為鏈結串列。 第 7 章 樹 www.hello‑algo.com 159 圖 7‑24 AVL 樹在刪除節點後發生退化

2. 方案介绍 如图所示，配置平台主要分成三块包括：设计稿转视图树（UI2DSL）、视图树转代码 （DSL2Code）、以及业务信息绑定，下面简单介绍一下每一块的作用。 ● 设计稿转 DSL 视图树（UI2DSL）：将设计稿转化成平台无关的 DSL 视图树。 ● 视图树转代码（DSL2Code）：将 DSL 视图树转化成基于 Flex 布局的 MTFlex- Box 静态代码。 ● 业务信息绑定：提供可视化配置工具，支持 MTFlexBox 静态代码绑定后台数 据、业务逻辑、以及曝光 / 点击等埋点逻辑。 2.1 设计稿转视图树（UI2DSL） UI2DSL 主要经历以下四个步骤： 前端 < 59 2.1.1 设计稿导入 在日常开发过程中，我们接触比较多的组件有按钮、标题、进度条、评分组件等，但 是 Sketch 数据源中并没有这些组件只有图层信息，图层是设计师在设计 彻底避免 图层未合并的问题。 前端 < 61 图层位置交叉 实践中发现当设计稿中不同字体 / 大小 / 颜色的文字排列在一起时，解析出来的图层 信息往往会出现重叠的情况，由于 DSL 视图树算法依赖位置来确定不同组件的约束 关系，因此位置的交叉会对算法准确度造成较大的影响。 复杂背景图层 上图中红色背景是由 2 个图层（2 个蓝色矩形框）拼接形成的，左图上的蓝色图层是 纯色，右图

的准确含义。查阅 “The Web platform: what it is” 和维基百科 “Open Web Platform” 前端开发者是什么？ 13 2016 前端开发回顾 UI 组件和组件树被用于构建复杂 UI。 组件由单一文件构成，在单个文件中可能同时包含 HTML、CSS 和 JS 不再有违主流开 发思想。 React、Redux、Webpack、ECMAScript 2015（也叫 文档对象模型（DOM）是一个跨平台并且具有语言无关性的概念，用来表示 HTML， XTHML 以及 XML 文档中的对象以及这类对象的交互方式。每份文档中按照树形结构进 行组织的节点，被称为 DOM 树。可以使用 DOM 树中的对象所拥有的方法对该对象进行 处理和操作。DOM 的 API 规定了它的公共接口。 — 维基百科 相关规范／文档： 文档对象模型 (DOM) 的第三代事件规范 DOM 动态标准 个巨大的问题。现在，第三方工具（例如：jQuery、React、 Post-CSS、Babel等等）结合现 代浏览器使得浏览器开发相当容易。新的挑战不是用户使用哪个浏览器，而是他们选择哪种 设备运行浏览器。 浏览器中的常青树 大多数现代浏览器的最新版本被认为是常青浏览器。也就是说，从理论上讲他们应该不需要 用户操作自动更新。自动更新浏览器的这一举措已经反过来淘汰了不自动更新的旧版浏览 器。 选择浏览器 如今，

document 对象 就是整个DOM树的根节点。 document 的 title 属性是从HTML文档中的 <title>xxx</title> 读取的，但是 可以动态改变： 1. 'use strict'; 2. 3. document.title = '努力学习JavaScript!'; 请观察浏览器窗口标题的变化。 要查找DOM树的某个节点，需要从 document s/32.html history 6.1 浏览器对象 - 130 - 本文档使用 书栈(BookStack.CN) 构建 6.2 操作DOM 由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作 DOM。 始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作： 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；

Scheme

6.

JavaScript

7.