JavaScript 教程
欢迎阅读我们的 JavaScript 教程可帮助你快速有效地从头开始学习 JavaScript 编程语言
![JavaScript 教程](/content/images/2023/01/js-tutorial.webp)
欢迎阅读我们的 JavaScript 教程可帮助你快速有效地从头开始学习 JavaScript 编程语言。
如果你不确定从哪里开始学习 JavaScript,或者在没有真正理解的情况下复制粘贴他人的 JavaScript 代码,难以理解可以回顾一下我们的教程。
本教程虽然章节很多,但你可不必全部理解才开始编写真实的应用,但你必须看完教程的入门章节。
如何阅读教程
在我们的经验的看来,你只需要知道的是使用 Web 浏览器控制台运行,调试代码。第 2 节的基础知识,大概了解第 3 节运算符。
了解第 4 节所有控制流语句。第 5 节的函数,仅仅是函数部分也可以,其它可以后面编写实际应用时深入理解。
然后是第 6 节的对象,函数与对象都可用于组织你的代码。但你必须知道如何创建对象,在对象定义函数。访问对象属性,调用对象的方法。
当完成理解这些基础知识之后,你就可以调用浏览器提供的 API。 例如我们站点使用的 DOM API,Service Worker 等创建可离线的 PWA 应用。
其它章节在你的真实编程生涯中会慢慢出现,在遇到时,可以回顾一下。但现在你必须知道有这个概念的存在。
入门
- 什么是 JavaScript —— 向您介绍 JavaScript 及其历史。
- 安装 JavaScript 编辑器 Vscode —— 了解如何安装用于编辑 JavaScript 代码的 Visual Studio Code 编辑器。
- 认识 Web 开发工具的控制台 —— 为您介绍 Web 浏览器控制台窗口的运行JavaScript代码以及Web 浏览器调试代码等基本操作。
- JavaScript Hello World —— 了解如何运行第一个 JavaScript 代码的
"Hello, World!"
消息。
第 2 节基础知识
- 语法 —— 解释 JavaScript 语法,包括空格、语句、标识符、关键字、表达式和注释。
- 变量 —— 向您展示如何声明变量。
- 数据类型 —— 向您介绍 JavaScript 数据类型,包括原始类型和引用类型。
- Number 数值 —— 了解 JavaScript 如何使用 Number 类型来表示整数和浮点数。
- 八进制与二进制字面量 —— 提供对二进制字面量的支持并改变八进制字面量的表示方式。
- Boolean 布尔 —— 向您介绍 Boolean 布尔类型。
- String 字符串 —— 了解字符串原始类型和一些基本的字符串操作。
- Object 对象 —— 向您介绍对象类型。
- Array 数组 —— 向您介绍 Array 数组类型以及如何操作数组元素。
- 原始值与引用值 —— 理解 JavaScript 中的两种值类型,包括原始值和引用值,以及它们之间的区别。
- 数字分隔符 —— 向您展示如何通过使用下划线作为数字分隔符来使数字更具可读性。
第 3 节运算符
- 算术运算符 —— 向您介绍算术运算符,包括加法
+
、减法-
、乘法*
和除法/
。 - 余数运算符 —— 向您展示如何使用余数运算符
%
,获得一个值除以另一个值时余数。 - 赋值运算符 —— 指导您如何使用赋值运算符
=
将值或表达式赋给变量。 - 一元运算符 —— 学习如何使用一元运算符。
- 比较运算符 —— 向您展示如何使用比较运算符来比较两个值。
- 逻辑运算符 —— 学习如何使用逻辑运算符:NOT
!
、AND&&
和 OR||
。 - 逻辑赋值运算符 —— 向您介绍逻辑赋值运算符,包括
||=
,&&=
, 和??=
。 - Nullish 合并运算符
??
—— 接受两个值并在第一个值是 null 时返回第二个值或者 undefined。 - 求幂运算符 —— 介绍求幂运算符
**
,它计算一个基数的指数次方,类似于Math.pow()
函数。
第 4 节流控制语句
- if —— 向您展示如何在 if 条件为 true 时运行指定语句。
- if…else —— 学习如何根据指定条件运行指定语句。
- if…else…if —— 检查多个条件并执行一个块。
- 三元运算符 —— 向您展示如何为 if 语句创建快捷方式
?:
。 - switch —— 向您展示如何使用 switch 语句将一个值与多个变体进行比较时,替换多个
if
语句。 - while —— 了解如何执行预测试循环,只要指定条件为
true
,循环就会重复执行一段代码。 - do…while —— 向您展示如何在测试条件为
true
后,循环执行重复运行的代码,直到指定条件为false
. - for 循环 —— 学习如何根据各种选项重复执行一段代码。
- break —— 了解如何提前终止循环。
- continue —— 向您展示如何跳过循环的当前迭代并跳转到下一个循环。
- 逗号运算符 —— 指导您如何在 for 循环中使用逗号运算符一次更新多个变量。
第 5 节函数 Function
- 函数 —— 向您介绍 JavaScript 函数。
- 函数是一等公民 —— 学习如何将函数存储在变量,将函数作为参数传递给其他函数,以及将函数作为值返回。
- 匿名函数 —— 了解匿名函数,也就是没有名称的函数。
- 按值传递 —— 了解按值传递在 JavaScript 工作原理。
- 递归函数 —— 学习如何定义递归函数。
- 默认参数 —— 向您展示如何为函数定义默认参数。
第 6 节对象和原型
- 对象方法 —— 向您介绍对象的方法。
- 构造函数 —— 向您展示如何使用构造函数在 JavaScript 定义自定义类型。
- prototype 原型 —— 了解原型在 JavaScript 的工作原理。
- 构造函数/原型模式 —— 向您展示如何结合构造函数和原型模式来定义自定义类型。
- 原型继承 —— 理解 JavaScript 的原型继承。
- This 是什么 —— 了解
this
它的作用及this
在 JavaScript 工作方式。 - globalThis —— 提供一种跨环境访问全局对象的标准方法。
- 对象属性 —— 深入了解对象的属性及其属性。
- for…in 循环 —— 学习如何使用
for...in
循环迭代对象的属性。 - 可枚举属性 —— 了解更多关于可枚举属性的信息。
- Own Properties —— 了解对象自己的属性和继承的属性。
- Object.values() —— 函数返回对象自身的可枚举属性值作为数组。
- Object.entries() —— 函数返回对象自身可枚举属性的键值对
[key, value]
。 - Object.assign() —— 函数复制对象或合并对象。
- Object.is() – 检查两个值是否相同。
- Factory Function 工厂函数 —— 了解工厂函数,它们是返回对象的函数。
- 对象解构 —— 学习如何将对象的属性分配给变量。
- 可选链接运算符
?.
—— 在不检查对象链中的每个引用是否为null
或者undefined
时,访问位于对象链深处属性。 - 对象字面量扩展 —— 提供了一种定义对象字面量的新方法。
第 7 节 Class 类
- Class 类 —— 向您介绍 ES6 类语法以及如何声明类。
- Getters 和 Setters —— 使用 get 和 set 关键字为类定义 getters 和 setters。
- 类表达式 —— 学习另一种使用类表达式定义类的方法。
- 计算属性 —— 解释计算属性及其实际应用。
- 继承 —— 向您展示如何使用关键词 extends 和 super 扩展类。
- new.target —— 向您介绍元属性
new.target
。 - 静态方法 —— 指导您如何定义与类关联的方法,在不实例化类情况调用类的方法。
- 静态属性 —— 向您展示如何定义一个类的所有实例共享的静态属性。
- 私有字段 —— 了解如何在类中定义私有字段。
- 私有方法 —— 向您展示如何在类中定义私有方法。
第 8 节函数进阶
- 函数类型 —— 向您介绍 Function 类型及其属性和方法。
- call() —— 了解
call()
方法并学习如何有效地使用它。 - apply() —— 学习如何有效地使用
apply()
方法。 - bind() —— 了解
bind()
方法以及如何有效地应用它。 - 闭包 —— 理解 JavaScript 闭包。
- 函数表达式 IIFE —— 了解立即调用函数表达式 IIFE 。
- 返回多个值 —— 指导您如何从一个函数返回多个值。
- 箭头函数 —— 向您介绍箭头函数
=>
。 - 什么时候不应该使用箭头函数 —— 学习什么时候不应该使用箭头函数。
- Rest 参数 —— 向您介绍 Rest 参数以及如何有效地使用它。
- 回调函数 —— 向您介绍回调函数并学习如何使用回调来处理异步操作。
第 9 节 Promises 和 Async/Await
- Promises —— 了解 Javascript Promises,Promises 是什么,以及如何有效地使用Promises。
- Promise chaining —— 向您展示如何按顺序执行多个异步操作。
- Promise.all() —— 学习如何组合多个 promise 进行并行运行
- Promise.race() —— 学习如何组合多个 promise 进行并行运行。
- Promise.any() —— 了解如何使用 JavaScript Promise.any() 方法返回第一个满足条件的
Promise
。 - Promise.allSettled() —— 接受 Promises 数组并返回一个新 Promise,并将 Promises 解析为一组值,这些值由 Promises 的值决定,可以是 Resolve,Reject。
- Promise.prototype.finally() —— 当 Promise 完成时执行一段代码,不管 Promise 是Resolve 还是 Reject。
- Promise 错误处理 —— 指导您如何处理 promise 中的错误。
- Async / Await —— 用同步的语法编写异步运行的代码。
第 10 节迭代器和生成器
- 迭代器 Iterator—— 向您介绍迭代和迭代器原型。
- 生成器 Generators —— 可以在挂起或者暂停后,继续从暂停处运行的函数。
- yield —— 深入了解如何在生成器使用关键词
yield
。 - for…of —— 学习如何使用
for...of
循环来遍历可迭代对象的元素。 - 异步迭代器 —— 了解如何使用异步迭代器顺序访问异步数据源。
- 异步生成器 —— 向您展示如何创建异步生成器。
第 11 节模块
- ES6 模块 —— 学习如何编写模块化的 JavaScript 代码。
- 动态导入 —— 向您展示如何通过
import()
函数动态导入模块。 - 顶级 Await —— 解释顶级 Await 模块及其用例。
第 12 节 symbol 符号
- Symbol —— 向您介绍一种在 ES6 原始类型
symbol
。
第 13 节 Map 与 Set
第 14 节错误处理
- try…catch —— 向您展示如何优雅地处理异常。
- try…catch…finally —— 学习如何捕获异常并且运行无论是否发生异常都执行一个块。
- throw —— 向您展示如何抛出异常。
- 可选的 catch 绑定 —— 省略 catch 块的异常变量。
第 15 节 var、let 和 const
第 16 节代理和反射
第 17 节 JavaScript 运行时
- 执行上下文 —— 了解执行上下文,包括全局和函数执行上下文。
- 调用堆栈 —— 了解调用堆栈。
- 事件循环 —— 向您展示 JavaScript 如何使用事件循环处理异步操作。
- 变量提升 —— 了解变量提升在 JavaScript 工作原理。
- 变量作用域 —— 向您介绍变量作用域。