Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

重学js #41

Open
lizhongzhen11 opened this issue Sep 28, 2019 · 4 comments
Open

重学js #41

lizhongzhen11 opened this issue Sep 28, 2019 · 4 comments
Labels
js基础 Good for newcomers 重学js 重学js系列 规范+MDN

Comments

@lizhongzhen11
Copy link
Owner

lizhongzhen11 commented Sep 28, 2019

跟着规范和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

这是为何?尤其是 parseFloatNumber 对空字符串的求值为何如此不同?

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

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

所以,重学js必须要进行!

只看MDN不行吗?

当然可以。MDN很棒!

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

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

学习之前,需要了解一些常识:

学习目录:

  1. 词法文法
  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. 手写 防抖/节流 等常用业务工具方法,可见 lodashunderscore
  4. 使用defineProperty监听数组改变(然后再用proxy实现下),我的示例
  5. 将第4条与发布订阅模式结合:HcySunYang/observer-dep-watch
  6. 实现个 mvvm
  7. 尝试实现 虚拟DOM
  8. 第6条与第7条相结合,即demo版 vue
  9. 看看 react 与 vue 源码,学习react源码的实现
@lizhongzhen11 lizhongzhen11 changed the title js基础收藏——夯实基础 夯实 JS 基础 Sep 28, 2019
@lizhongzhen11 lizhongzhen11 changed the title 夯实 JS 基础 重学js Oct 12, 2019
@lizhongzhen11 lizhongzhen11 added js基础 Good for newcomers and removed js基础 labels Oct 12, 2019
@lizhongzhen11 lizhongzhen11 added the 重学js 重学js系列 规范+MDN label Jan 6, 2020
@lizhongzhen11 lizhongzhen11 changed the title 重学js 重学js(编写中,全部结束后会调整目录顺序) Mar 12, 2020
@lizhongzhen11 lizhongzhen11 pinned this issue Apr 25, 2020
@lizhongzhen11 lizhongzhen11 changed the title 重学js(编写中,全部结束后会调整目录顺序) 重学js Aug 3, 2020
@poorel
Copy link

poorel commented Sep 17, 2020

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

@lizhongzhen11
Copy link
Owner Author

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

@iolh
Copy link

iolh commented Oct 5, 2021

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

@falling-stars
Copy link

太赞了!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
js基础 Good for newcomers 重学js 重学js系列 规范+MDN
Projects
None yet
Development

No branches or pull requests

4 participants