JavaScript 教程

欢迎阅读我们的 JavaScript 教程可帮助你快速有效地从头开始学习 JavaScript 编程语言

February 05, 2023

11 min read

JavaScript 教程

欢迎阅读我们的 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 —— 用同步的语法编写异步运行的代码。