Javascript学习全攻略:从基础到精通的必备知识

发表时间: 2022-03-26 17:16

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。

教程

通过使用指南和教程来学习如何用JavaScript语言编程。

对于完全初学者

一些基本问题,比如“JavaScript 是什么?”、“它是怎么样的?”、“它可以用来做什么?”;同时还讨论如变量、字符串、数值和数组等 JavaScript 的核心特性。我们需要关注常见的代码块类型,如条件语句,循环,函数和事件。如果你想进一步使用该语言撰写更有效率的代码,理解 JavaScript 面向对象的精髓是很重要的。

好吧,上面太全了,来点精简版:

说明

肉容中包含了ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

ES6+常用的知识点结合如下:

  1. 前言
  2. ECMAScript 6简介
  3. let 和 const 命令
  4. 变量的解构赋值
  5. 字符串的扩展
  6. 字符串的新增方法
  7. 正则的扩展
  8. 数值的扩展
  9. 函数的扩展
  10. 数组的扩展
  11. 对象的扩展
  12. 对象的新增方法
  13. 运算符的扩展
  14. Symbol
  15. Set 和 Map 数据结构
  16. Proxy
  17. Reflect
  18. Promise 对象
  19. Iterator 和 for...of 循环
  20. Generator 函数的语法
  21. Generator 函数的异步应用
  22. async 函数
  23. Class 的基本语法
  24. Class 的继承
  25. Module 的语法
  26. Module 的加载实现
  27. 编程风格
  28. 读懂规格
  29. 异步遍历器
  30. ArrayBuffer
  31. 最新提案
  32. Decorator

简介

  1. JavaScript 简介
  2. 手册与规范
  3. 代码编辑器
  4. 开发者控制台

JavaScript 基础知识

  1. Hello, world!
  2. 代码结构
  3. 现代模式,"use strict"
  4. 变量
  5. 数据类型
  6. 交互:alert、prompt 和 confirm
  7. 类型转换
  8. 基础运算符,数学
  9. 值的比较
  10. 条件分支:if 和 '?'
  11. 逻辑运算符
  12. 空值合并运算符 '??'
  13. 循环:while 和 for
  14. "switch" 语句
  15. 函数
  16. 函数表达式
  17. 箭头函数,基础知识
  18. JavaScript 特性

代码质量

  1. 在浏览器中调试
  2. 代码风格
  3. 注释
  4. 忍者代码
  5. 使用 Mocha 进行自动化测试
  6. Polyfill 和转译器

Object(对象):基础知识

  1. 对象
  2. 对象引用和复制
  3. 垃圾回收
  4. 对象方法,"this"
  5. 构造器和操作符 "new"
  6. 可选链 "?."

Symbol 类型

  1. 对象 — 原始值转换
  2. 数据类型
  3. 原始类型的方法
  4. 数字类型
  5. 字符串
  6. 数组
  7. 数组方法
  8. Iterable object(可迭代对象)
  9. Map and Set(映射和集合)
  10. WeakMap and WeakSet(弱映射和弱集合)
  11. Object.keys,values,entries
  12. 解构赋值
  13. 日期和时间
  14. JSON 方法,toJSON

函数进阶内容

  1. 递归和堆栈
  2. Rest 参数与 Spread 语法
  3. 变量作用域,闭包
  4. 旧时的 "var"
  5. 全局对象
  6. 函数对象,NFE
  7. "new Function" 语法
  8. 调度:setTimeout 和 setInterval
  9. 装饰器模式和转发,call/apply
  10. 函数绑定
  11. 深入理解箭头函数

对象属性配置

  1. 属性标志和属性描述符
  2. 属性的 getter 和 setter

原型,继承

  1. 原型继承
  2. F.prototype
  3. 原生的原型
  4. 原型方法,没有 __proto__ 的对象

  1. Class 基本语法
  2. 类继承
  3. 静态属性和静态方法
  4. 私有的和受保护的属性和方法
  5. 扩展内建类
  6. 类检查:"instanceof"
  7. Mixin 模式

错误处理

  1. 错误处理,"try...catch"
  2. 自定义 Error,扩展 Error

Promise,async/await

  1. 简介:回调
  2. Promise
  3. Promise 链
  4. 使用 promise 进行错误处理
  5. Promise API
  6. Promisification
  7. 微任务(Microtask)
  8. Async/await

Generator,高级 iteration

  1. Generator
  2. 异步迭代和 generator

模块

  1. 模块 (Module) 简介
  2. 导出和导入
  3. 动态导入

杂项

  1. Proxy 和 Reflect
  2. Eval:执行代码字符串
  3. 柯里化(Currying)
  4. Reference Type
  5. BigInt

浏览器:文档,事件,接口

学习如何管理浏览器页面:添加元素,操纵元素的大小和位置,动态创建接口并与访问者互动。

Document

  1. 浏览器环境,规格
  2. DOM 树
  3. 遍历 DOM
  4. 搜索:getElement*,querySelector*
  5. 节点属性:type,tag 和 content
  6. 特性和属性(Attributes and properties)
  7. 修改文档(document)
  8. 样式和类
  9. 元素大小和滚动
  10. Window 大小和滚动
  11. 坐标

事件简介

  1. 浏览器事件简介
  2. 冒泡和捕获
  3. 事件委托
  4. 浏览器默认行为
  5. 创建自定义事件

UI 事件

  1. 鼠标事件
  2. 移动鼠标:mouseover/out,mouseenter/leave
  3. 鼠标拖放事件
  4. 指针事件
  5. 键盘:keydown 和 keyup
  6. 滚动

表单,控件

  1. 表单属性和方法
  2. 聚焦:focus/blur
  3. 事件:change,input,cut,copy,paste
  4. 表单:事件和方法提交

加载文档和其他资源

  1. 页面生命周期:DOMContentLoaded,load,beforeunload,unload
  2. 脚本:async,defer
  3. 资源加载:onload,onerror

杂项

  1. DOM 变动观察器(Mutation observer)
  2. 选择(Selection)和范围(Range)
  3. 事件循环:微任务和宏任务

其他文章

教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构,你可以按你需要的顺序阅读文章。

Frame 和 window

  1. 弹窗和 window 的方法
  2. 跨窗口通信
  3. 点击劫持攻击

二进制数据,文件

  1. ArrayBuffer,二进制数组
  2. TextDecoder 和 TextEncoder
  3. Blob
  4. File 和 FileReader

网络请求

  1. Fetch
  2. FormData
  3. Fetch:下载进度
  4. Fetch:中止(Abort)
  5. Fetch:跨源请求
  6. Fetch API

URL 对象

  1. XMLHttpRequest
  2. 可恢复的文件上传
  3. 长轮询(Long polling)
  4. WebSocket
  5. Server Sent Events

在浏览器中存储数据

  1. Cookie,document.cookie
  2. LocalStorage,sessionStorage
  3. IndexedDB

动画

  1. 贝塞尔曲线
  2. CSS 动画
  3. JavaScript 动画
  4. Web components
  5. 从星球轨道的高度讲起
  6. Custom elements
  7. 影子 DOM(Shadow DOM)

模板元素

  1. Shadow DOM 插槽,组成
  2. 给 Shadow DOM 添加样式
  3. Shadow DOM 和事件(events)

正则表达式

  1. 模式(Patterns)和修饰符(flags)
  2. 字符类
  3. Unicode:修饰符 “u” 和 class \p{...}
  4. 锚点(Anchors):字符串开始 ^ 和末尾 $
  5. Flag "m" — 多行模式
  6. 词边界:\b
  7. 转义,特殊字符
  8. 集合和范围 [...]
  9. 量词 `+,*,?` 和 `{n}`
  10. 贪婪量词和惰性量词
  11. 捕获组
  12. 模式中的反向引用:\N 和 \k<name>
  13. 选择(OR)|
  14. 前瞻断言与后瞻断言
  15. 灾难性回溯
  16. 粘性标志 "y",在位置处搜索
  17. 正则表达式(RegExp)和字符串(String)的方法