1. 第一章 正则表达式字符匹配攻略 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1. 两种模糊匹配 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1.1. 横向模糊匹配. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1.2. 纵向模糊匹配. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.2. 字符组 . . . . . . . . . . . . . . . . . . . . . . 3.1. 简写形式. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.3.2. 贪婪匹配与惰性匹配. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.4. 多选分支 . . . . . . . . . .

1. 第一章 正则表达式字符匹配攻略 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1. 两种模糊匹配 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1.1. 横向模糊匹配. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1.2. 纵向模糊匹配. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.2. 字符组 . . . . . . . . . . . . . . . . . . . . . . 3.1. 简写形式. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.3.2. 贪婪匹配与惰性匹配. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.4. 多选分支 . . . . . . . . . .

对象 Math 对象 Date 对象 RegExp 对象 JSON 对象 面向对象编程 实例对象与 new 命令 this 关键字 对象的继承 Object 对象的相关方法 严格模式 异步操作 概述 定时器 Promise 对象 DOM 概述 - 2 - 本文档使用 书栈(BookStack.CN) 构建 致谢 当前文档 《阮一峰 JavaScript 教程》 有功能找出解决 办法。这种功能的不足，直接导致了后来 JavaScript 的一个显著特 点：对于其他语言，你需要学习语言的各种功能，而对于 JavaScript，你常常需要学习各种解决问题的模式。而且由于来源多 样，从一开始就注定，JavaScript 的编程风格是函数式编程和面向 对象编程的一种混合体。 Netscape 公司的这种浏览器脚本语言，最初名字叫做 Mocha， 1995年9月改为 JavaScript 的周边应用发展。 1996年，样式表标准 CSS 第一版发布。 1997年，DHTML（Dynamic HTML，动态 HTML）发布，允许动态改 变网页内容。这标志着 DOM 模式（Document Object Model，文 档对象模型）正式应用。 1998年，Netscape 公司开源了浏览器，这导致了 Mozilla 项目的 诞生。几个月后，美国在线（AOL）宣布并购

组赋值给 a ，就会报错。 如果真的想将对象冻结，应该使用 Object.freeze 方法。 const foo = Object.freeze({}); // 常规模式时，下面一行不起作用； // 严格模式时，该行会报错 foo.prop = 123; let 和 const 命令 40 上面代码中，常量 foo 指向一个冻结的对象，所以添加新属性不起作用，严格模 式时还会报错。 返回的是当前模块。 函数里面的 this ，如果函数不是作为对象的方法运行，而是单纯作为函数运 行， this 会指向顶层对象。但是，严格模式下，这时 this 会返 let 和 const 命令 42 回 undefined 。 不管是严格模式，还是普通模式， new Function('return this')() ，总 是会返回全局对象。但是，如果浏览器用了CSP（Content 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构 （Destructuring）。 以前，为变量赋值，只能直接指定值。 let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样。 let [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被

a的值是整数123 2. a = 'ABC'; // a变为字符串 这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须 指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言，赋值语句如下： 1. int a = 123; // a是整数类型变量，类型用int申明 2. a = "ABC"; // 错误：不能把字符串赋给整型变量 变量 范中推出了strict模式，在strict模式下 运行的JavaScript代码，强制通过 var 申明变量，未使用 var 申明变量就使用的，将导致运行 错误。 启用strict模式的方法是在JavaScript代码的第一行写上： 1. 'use strict'; 这是一个字符串，不支持strict模式的浏览器会把它当做一个字符串语句执行，支持strict模式的浏 览器将开启strict模式运行JavaScript。 览器将开启strict模式运行JavaScript。 来测试一下你的浏览器是否能支持strict模式： 1. 'use strict'; 2. // 如果浏览器支持strict模式， 3. // 下面的代码将报ReferenceError错误: 4. strict模式 2.2 数据类型和变量 - 21 - 本文档使用 书栈(BookStack.CN) 构建 5. abc = 'Hello, world';

（Web）的强大能力，实现逻辑的抽象，完成组 件、模块的适配，达到提效最大化； ● 跟进 Flutter 官方动向：Flutter 2.0 的发布，稳定了对 Web 的支持，同时默 认采用 Canvaskit 编译模式，此模式下对页面滚动性能有较大提升。但由于 canvaskit.wasm 文件过于庞大（2.5M），降低了加载性能，因此目前仍不建 议在 Web 侧直接使用 Canvaskit。不过官方承诺会在 2021 Widgets、 Gestures 等组件来实现逻辑跨端。而关于渲染跨端，FlutterWeb 提供了两种模式 来对齐 Engine 层的渲染能力：Canvaskit Render 和 HTML Render，下方表格对 两者的区别进行了对比： 图 3 模式对比 Canvaskit Render 模式：底层基于 Skia 的 WebAssembly 版本，而上层使 用 WebGL 进行渲染，因此 Canvaskit Render 模式 用于桌面应用）。 HTML Render 模式：利用 HTML + Canvas 对齐了 Engine 层的渲染能力，因此 兼容性表现优秀。另外，MTFlutterWeb 对滚动性能已有过探索和实践，目前能够 应对大部分业务场景。而关于加载性能，此模式下的初始包为 1.2M，是 Canvaskit Render 模式产物体积的 1/2，且我们可对编译流程进行干预，控制输出产物，因此

的正则表达式文法(RegExp grammar)在 15.10 中给出。此文法同样 以 Unicode 字符集中的字符作为其终结符，定义了一个产生式集合，其中的产生式以目标符的模式 (Pattern)为 起始，描述了 Unicode 字符是如何被翻译成正则表达式模式的。 词法文法和正则表达式文法的产生式被识别为被两个冒号"::"分割的产生式。词法文法和正 则表达式文法共享某些产生式。 5.1.3 数字化字符串文法 3,5,7,9}] ∉ 十进制数 十进制数字 [lookahead ∉ 十 进制数] 当字母 n 后跟一个或多个首位是偶数的十进制数，或后跟一个后面没有另一个十进制数字 的数字时，完成匹配。 如果语法文法的产生式右式出现了短语"[no LineTerminator here]"，它指出了该产生式是一个受 约束产生式(restricted production)： 如果行结束符出现在输入流的指定位置上，这个产生式不被 7.4 注释 描述 注释可以是单行或多行的。多行注释不能自包含。 由于单行注释可以包含除行结束符之外的任何字符①。根据常规，托肯总是进行最长匹配， 所以单行 注释总是由从 // 开始到行末结束的所有字符组成。不过，行尾的行结束符不被识别 为单行注释的一部分；它被词法文法识别为分隔符，并 成为给语法文法提供的输入元素流的一 部分。这一点非常

// 直接遍历数组元素 for (const num of nums) { count += num; } } 6. 查找元素 在数组中查找指定元素需要遍历数组，每轮判断元素值是否匹配，若匹配则输出对应索引。 因为数组是线性数据结构，所以上述查找操作被称为“线性查找”。 // === File: array.js === /* 在数组中查找指定元素 */ function find(nums com 86 ‧ 缓存行：缓存不是单个字节地存储与加载数据，而是以缓存行为单位。相比于单个字节的传输，缓存行 的传输形式更加高效。 ‧ 预取机制：处理器会尝试预测数据访问模式（例如顺序访问、固定步长跳跃访问等），并根据特定模式 将数据加载至缓存之中，从而提升命中率。 ‧ 空间局部性：如果一个数据被访问，那么它附近的数据可能近期也会被访问。因此，缓存在加载某一数 据时，也会加载其附近的数据，以提高命中率。 占用空间：链表元素比数组元素占用空间更多，导致缓存中容纳的有效数据量更少。 ‧ 缓存行：链表数据分散在内存各处，而缓存是“按行加载”的，因此加载到无效数据的比例更高。 ‧ 预取机制：数组比链表的数据访问模式更具“可预测性”，即系统更容易猜出即将被加载的数据。 ‧ 空间局部性：数组被存储在集中的内存空间中，因此被加载数据附近的数据更有可能即将被访问。 总体而言，数组具有更高的缓存命中率，因此它在操作

// 直接遍历数组元素 for (const num of nums) { count += num; } } 6. 查找元素 在数组中查找指定元素需要遍历数组，每轮判断元素值是否匹配，若匹配则输出对应索引。 因为数组是线性数据结构，所以上述查找操作被称为“线性查找”。 // === File: array.js === /* 在数组中查找指定元素 */ function find(nums com 86 ‧ 缓存行：缓存不是单个字节地存储与加载数据，而是以缓存行为单位。相比于单个字节的传输，缓存行 的传输形式更加高效。 ‧ 预取机制：处理器会尝试预测数据访问模式（例如顺序访问、固定步长跳跃访问等），并根据特定模式 将数据加载至缓存之中，从而提升命中率。 ‧ 空间局部性：如果一个数据被访问，那么它附近的数据可能近期也会被访问。因此，缓存在加载某一数 据时，也会加载其附近的数据，以提高命中率。 占用空间：链表元素比数组元素占用空间更多，导致缓存中容纳的有效数据量更少。 ‧ 缓存行：链表数据分散在内存各处，而缓存是“按行加载”的，因此加载到无效数据的比例更高。 ‧ 预取机制：数组比链表的数据访问模式更具“可预测性”，即系统更容易猜出即将被加载的数据。 ‧ 空间局部性：数组被存储在集中的内存空间中，因此被加载数据附近的数据更有可能即将被访问。 总体而言，数组具有更高的缓存命中率，因此它在操作

// 直接遍历数组元素 for (const num of nums) { count += num; } } 6. 查找元素 在数组中查找指定元素需要遍历数组，每轮判断元素值是否匹配，若匹配则输出对应索引。 因为数组是线性数据结构，所以上述查找操作被称为“线性查找”。 // === File: array.js === /* 在数组中查找指定元素 */ function find(nums com 85 ‧ 缓存行：缓存不是单个字节地存储与加载数据，而是以缓存行为单位。相比于单个字节的传输，缓存行 的传输形式更加高效。 ‧ 预取机制：处理器会尝试预测数据访问模式（例如顺序访问、固定步长跳跃访问等），并根据特定模式 将数据加载至缓存之中，从而提升命中率。 ‧ 空间局部性：如果一个数据被访问，那么它附近的数据可能近期也会被访问。因此，缓存在加载某一数 据时，也会加载其附近的数据，以提高命中率。 占用空间：链表元素比数组元素占用空间更多，导致缓存中容纳的有效数据量更少。 ‧ 缓存行：链表数据分散在内存各处，而缓存是“按行加载”的，因此加载到无效数据的比例更高。 ‧ 预取机制：数组比链表的数据访问模式更具“可预测性”，即系统更容易猜出即将被加载的数据。 ‧ 空间局部性：数组被存储在集中的内存空间中，因此被加载数据附近的数据更有可能即将被访问。 总体而言，数组具有更高的缓存命中率，因此它在操作