重学js

[lizhongzhen11]

跟着规范和MDN重学js

该系列知识来自 ECMAScript 2020 Language 规范以及 MDN JavaScript。

注意：本系列主要是ECMAScript规范，而 setTimeout/setInterval/atob 等属于 HTML规范，看 WindowOrWorkerGlobalScope

ECMAScript新提案看这里：https://github.com/tc39/proposals

找到个 ECMAScript5.1中文版——颜海镜

推荐：

1. 《JavaScript 20 年》中文版
2. 现代 JavaScript 教程
3. Web 开发技术
4. You-Dont-Know-JS
5. 冴羽的博客
6. javascript-questions
7. Daily-Interview-Question

为什么要重学js？

因为我的js基础实在太差了！！！

直接原因：花钱买了winter的《重学前端》，结果关于js的系列看了几篇后十分懵逼，感觉我学的js和他学的不是同一个，再往下看一堆不懂得知识，实在没法子了，只能先结合规范和MDN重学下，然后穿插着看《重学前端》

我不是要做到熟记每个js api，因为我不能保证每个api都经常使用。我要做的是跟着规范和MDN将js系统性、全面性的学习，即使很多不常用的api也能混个脸熟，不至于一脸茫然；对于js中隐藏的很多坑点能有清晰地认知。

比如以下代码：

+[] // 0
![] // false
{} + [] // 0
[] + {} // '[object Object]'

parseInt('7+6', 10) // 7
parseFloat('') // NaN
Number('') // 0

这是为何？尤其是 parseFloat 与 Number 对空字符串的求值为何如此不同？

当我想知道为什么时，我只能去网上搜索，这恰恰证明了基础的薄弱！即使搜索到答案，也只是很碎片化的，未来又冒出一些新的坑点怎么办呢？？？

即使从一些文章中获取到一些零碎的知识，但是这些知识一定正确吗？？？谁能保证？？？

所以，重学js必须要进行！

只看MDN不行吗？

当然可以。MDN很棒！

但是，正如上面我列出的代码 +[] // 0，我并没有从MDN上找到，可能是我姿势不对，但不可否认，MDN就像api字典，如果都不知道具体要查哪个关键字，那么MDN的好处就得不到体现！

最关键的是，MDN给我感觉知识点有点散，比如函数相关，分散在好多地方，如果配合规范看完然后整合下，形成一个系统全面顺序进行的js学习系列可能更好！

学习之前，需要了解一些常识：

• TC39是什么？
• ECMAScript的数字版本号和年份版本号是什么关系？
• ECMAScript发展介绍
• 原始值：原始值是直接在语言实现的最低级别表示的数据(值本身无法被改变)
• 最新的 ECMAScript 标准定义了 8 种数据(语言)类型（注意与ECMAScript规范类型区分），包含未来会成为标准的新类型BigInt(7 种原始(基本)类型 和 1 种引用类型，可见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures)
  • Boolean
  • Null
  • Undefined
  • Number
  • BigInt (ES10，提案)
  • String
  • Symbol
  • Object
• 注意：原始类型不包含引用类型

学习目录：

1. 词法文法
   • 自动分号补全

       // 来自 高级前端面试，我答错了
       function num(a, b) {
         if
         (a > b)
         console.log('a is bigger')
         else
         console.log('b is bigger')
         return
         a + b
       }
       console.log(num(4, 2))
       console.log(num(1, 2))

   • 关键字（注意不同模式下关键字差异）
   • js内支持十六进制，例如0x111 对应十进制 273
   • 对应规范中的 词汇语法
2. js规范中对token的定义(第二段话第一句)
   • 除空白和注释之外的输入元素构成ECMAScript语法的终端符号，称为ECMAScript标记(tokens)。
   • 这些标记(token)是ECMAScript语言的保留字、标识符、字面量和标点符号。
   • Tokens (CommonToken)
   • 很多文章喜欢把token翻译成 词，或许这样更容易理解吧。
3. 重学js —— 算法约定（阅读规范需要）
4. 重学js —— js数据类型：Null、Undefined、Boolean
5. 重学js —— js数据类型：Number（一）
6. 重学js —— js数据类型：Number（二）
7. 重学js —— js数据类型：Number 对象
8. 重学js —— js数据类型：Number 原型对象和实例上的属性(tofixed/toLocaleString/toPrecision/toString等)
9. 重学js —— js数据类型：String
10. 重学js —— js数据类型：文本处理——String对象一：构造器上的属性
11. 重学js —— js数据类型：文本处理——String对象二：原型对象上的属性(一)
12. 重学js —— js数据类型：Symbol
13. 重学js —— js数据类型：BigInt
14. 重学js —— js数据类型：BigInt 对象(asIntN/asUintN/tolocalestring/tostring)
15. 重学js —— js数据类型：Object 基础介绍
16. 重学js —— 众所周知的固有对象
17. 重学js —— ECMAScript Specification Types（规范类型）
18. 重学js —— Lexical Environments（词法环境）和 Environment Records（环境记录）（作用域）
19. 重学js —— 执行上下文（Execution Contexts）
20. 重学js —— ES规范定义的任务和任务队列（Jobs and Job Queues）
21. 重学js —— 规范中的Agents阅读
22. 重学js —— 类型转换
23. 重学js —— 比较
24. 重学js —— Operations on Objects and Operations on Iterator Objects
25. 重学js —— 普通对象和奇异对象行为（普通对象内部方法和内置插槽）
26. 重学js —— 函数对象
27. 重学js —— 内置函数对象
28. 重学js —— Proxy（代理）对象的内置方法和内置插槽
29. 重学js —— 源文本
30. 重学js —— 左侧表达式（new/super/import()/可选链等）
31. 重学js —— 更新表达式（后缀++/前缀++）
32. 重学js —— 一元运算符（delete/void/typeof/+/-/~/!）
33. 重学js —— 求幂运算，乘法运算符，加法运算符以及减法运算符
34. 重学js —— 按位移位运算符
35. 重学js —— 关系运算符（我只列出instanceof和in）和相等运算符
36. 重学js —— 二进制按位运算符和二进制逻辑运算符以及条件运算符
37. 重学js —— 赋值运算符（包括解构赋值）和 逗号运算符
38. 重学js —— 主要表达式一（this等）
39. 重学js —— 主要表达式二
40. 重学js —— 语句和声明
41. 重学js —— 块语句、声明和变量语句、空语句以及表达式语句
42. 重学js —— 函数：函数定义
43. 重学js —— 函数：函数块级作用域坑点（一道题目引发的思考）
44. 重学js —— 函数：箭头函数定义和方法定义（包含get/set）
45. 重学js —— 迭代协议（MDN）
46. 重学js —— 迭代器和生成器（MDN）
47. 重学js —— 函数：Generator函数定义
48. 重学js —— 函数：异步函数定义
49. 重学js —— 函数：异步 Generator 函数定义和异步箭头函数定义
50. 重学js —— 函数：默认参数值（MDN）
51. 重学js —— 函数：剩余参数（MDN）
52. 重学js —— 函数：Arguments 对象（MDN）
53. 重学js —— 函数：闭包（MDN）
54. 重学js —— 函数：闭包（翻译自stackoverflow）
55. 重学js —— 函数：IIFE（立即调用函数表达式）（MDN）
56. 重学js —— 函数：尾调用
57. 重学js —— 继承与原型链
58. 重学js —— 类定义（class）
59. 重学js —— ECMAScript 标准内置对象（不列出所有内置对象）
60. 重学js —— 全局对象：值属性与函数属性(globalThis/Infinity/NaN/undefined/eval/isFinite/isNaN)
61. 重学js —— 全局对象：函数属性(parseFloat/parseInt)
62. 重学js —— 全局对象：函数属性(URI处理函数)
63. 重学js —— 全局对象：构造器属性和其它属性
64. 重学js —— 基本对象：普通对象(Object构造器上的属性一)
65. 重学js —— 基本对象：普通对象(Object构造器上的属性二)
66. 重学js —— 基本对象：普通对象(原型对象属性和对象实例属性)
67. 重学js —— 基本对象：函数对象（apply/bind/call）
68. 重学js —— 基本对象：布尔对象
69. 重学js —— 基本对象：Error对象
70. 重学js —— Math 对象
71. 重学js —— Date 对象一
72. 重学js —— Date 对象二：构造器和原型对象上的属性
73. 重学js —— 索引集合之数组对象
74. 重学js —— 索引集合之Array原型对象属性
75. 重学js —— 索引集合之TypedArray 对象（类型化数组）
76. 重学js —— 结构化数据之ArrayBuffer对象
77. 重学js —— 结构化数据之SharedArrayBuffer对象
78. 重学js —— 结构化数据之DataView对象
79. 重学js —— 结构化数据之Atomics对象
80. 重学js —— 结构化数据之JSON对象
81. 重学js —— 键集合之Map对象
82. 重学js —— 键集合之Set对象
83. 重学js —— 键集合之WeakMap对象和WeakSet对象
84. 重学js —— 控制抽象对象之Iteration（迭代）和所有Generator对象
85. 重学js —— 控制抽象对象之Promise
86. 重学js —— 控制抽象对象之AsyncFunction对象
87. 重学js —— Reflect对象
88. 重学js —— Scripts
89. 重学js —— modules：循环模块记录
90. 重学js —— modules：源文本模块记录
91. 重学js —— modules：内部部分算法
92. 重学js —— Tree shaking （MDN）
93. 重学js —— modules：Imports
94. 重学js —— modules：Exports
95. 重学js —— 内存模型
96. 重学js —— JavaScript 错误参考 （MDN）

引用

1. 系列文中有部分示例代码来源于 高级前端面试小程序，该项目的作者也是 Daily-Interview-Question 作者
2. 部分知识结合 winter 《重学前端》系列更容易理解，需要在极客时间上购买。（PS：我就是因为买了看不懂才写这个系列的。。。）

锻炼

1. 能手写 call/apply/bind/new/instanceof 等原生API的模拟实现
2. 30-seconds-of-code
3. 手写 防抖/节流 等常用业务工具方法，可见 lodash 或 underscore
4. 使用defineProperty监听数组改变（然后再用proxy实现下），我的示例
5. 将第4条与发布订阅模式结合：HcySunYang/observer-dep-watch
6. 实现个 mvvm
7. 尝试实现 虚拟DOM
8. 第6条与第7条相结合，即demo版 vue
9. 看看 react 与 vue 源码，学习react源码的实现

[poorel]

+[] // 0 纠结此类问题的意义在哪里

[lizhongzhen11]

@poorel
因为不懂啊，遇到别人懂但自己不懂得，就会产生自我怀疑，甚至很气，然后想办法搞懂纾解下

[iolh]

向大佬学习读下规范，这工程量可真不小，既感且佩！

[falling-stars]

太赞了！