从一个简单需求说起

考虑下面需求：

我们有一组日常开支记账列表，我们需要从列表中，过滤出所有咖啡的消费，然后转换成消费金额，取前三条数据。

表达为代码实现，大概是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const list = [
  { type: '早餐', amount: 12 },
  { type: '咖啡', amount: 25 },
  { type: '午餐', amount: 18 },
  { type: '咖啡', amount: 19 },
  { type: '零食', amount: 8 },
  { type: '晚餐', amount: 22 },
  { type: '水果', amount: 20 },
  { type: '早餐', amount: 12 },
  { type: '咖啡', amount: 25 },
  { type: '午饭', amount: 20 },
  { type: '咖啡', amount: 19 },
  { type: '晚饭', amount: 21 },
  //还有许多...
]

const result = list.filter(item => item.type === '咖啡').map(item => item.amount).slice(0, 3)

那么这个实现中，存在哪些比较显而易见的问题呢？

问题分析

例子代码中起码存在着以下问题：

语言实现

比较无聊，不谈

怎么 polyfill

分析：

1. 不能阻止 key 被 gc，因此，WeakMap 中不能直接持有 key。
2. 通过 key 能找到 value，因为上条，不能由 WeakMap 或第三方对象去维护这种对应关系，于是只能在 key 中用某种方式去引用 value 来维持对应关系。
3. 基于上条，得出 key 必须为对象的结论。
4. 同一个对象能作为多个 WeakMap 的 key 分别引用不同的 value，这意味着 key 必须能识别不同的 WeakMap，因此，WeakMap 实现中，必须有个唯一标识，key 使用不同 WeakMap 的唯一标志作为属性名去引用不同的 value。
5. 由于 WeakMap 不负责存储 key、value，所以 WeakMap 无法实现遍历 key、value 等操作。只能实现 get, set, has, delete 等方法去操作 key 中存储的数据。

eval 的使用方式

eval 可以接受一个字符串，并解析执行，例如：

1
2
3
4
5
var a = 1;
eval('a + 1') // 2

eval('{ foo: 123 }') // 123，代码块
eval('({ foo: 123 })') // { foo: 123 }，对象字面量

严格模式

通常 eval 应当只在严格模式下使用。

CORS 相关响应头

在进行 CORS 相关的配置时，通常需要一些以 Access-Control 开头的响应头，比如：

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age

要理解这些 header 的作用，可以直接动手通过一个简单的实验来辅助理解。

实验代码的后端部分，基于 node + express。下面正式开始。

开启 WSL 功能

依次进入： 控制面板 > 程序 > 程序和功能

在左侧栏中，找到“启用或关闭 Windows 功能”，点击打开新窗口

在新窗口（Windows 功能）中，拉到最下面，找到“适用于 Linux 的 Windows 子系统”，并勾选上。

确定，稍等片刻就启用完毕。

然后重启电脑。

接着打开应用商店，搜索 “WSL”。

在搜索结果中，找到喜欢的 Linux 发行版，安装。

比如安装的是 Ubuntu 18.04 lts，那么完成后，就可以找到 Ubuntu 这个应用图标。可以用于打开一个 Bash 和 Ubuntu 交互。

配置好源（如清华的 TUNA 源）后（注意选对系统版本），就可以愉快地安装各类环境了。

至此，第一部分准备工作完成。