JavaScript 列表数据操作的优化方案

从一个简单需求说起

考虑下面需求:

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

表达为代码实现,大概是这样的:

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)

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


问题分析

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

READ MORE...

JavaScript WeakMap

语言实现

比较无聊,不谈

怎么 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 中存储的数据。
READ MORE...

JavaScript 的 eval

eval 的使用方式

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

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

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

严格模式

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

READ MORE...

跨源资源共享(CORS)相关 headers

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。下面正式开始。

READ MORE...

WSL


开启 WSL 功能

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

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

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

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

然后重启电脑。

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

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

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

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

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

READ MORE...