📝 使用这份新手速查表，以正确的方式学习 JavaScript

目录

1. 基本面
2. 变量
3. 数据类型
4. 操作员
5. 函数
6. 大批
7. 循环
8. 如果-否则
9. 字符串
10. 正则表达式
11. 数据转换
12. JavaScript 中的日期处理
13. JavaScript 中的文档对象模型 (DOM)
14. JavaScript 数字与数学
15. 活动
16. 错误
17. 使用浏览器

1. JavaScript基础知识

以下是如何在您的网站中添加 JavaScript 的基本步骤。

• 在HTML代码中，JavaScript的写法如下：

在 HTML 页面中添加 JavaScript 代码需要将其包含在<script><script> 标签内，如下所示：

<script type = "text/javascript">
//JavaScript coding can be done inside this tag
</script>

通过此输入，浏览器可以正确识别并执行代码。

• 在 HTML 文件中包含外部 JavaScript 文件：

也可以创建一个单独的 JavaScript 文件，并将其包含在我们的 HTML 文件中。

将不同类型的代码分开存放，可以使文件组织得更好，并且可以将不同类型的代码彼此隔离。

例如，如果我们的 JavaScript 代码位于 script.js 文件中，我们可以按以下方式将 JavaScript 代码包含到 HTML 文件中：

<script src="script.js"></script>

• 包括评论：

在代码中添加注释可以帮助其他人理解你的操作，或者提醒你自己是否遗漏了某些内容。
注意：为了防止浏览器尝试执行这些注释，必须正确标记它们。

在 JavaScript 中，你有两种不同的选择：

单行注释——如果您想添加仅限一行的注释，请在注释前加上 `<script>`标签。//
多行注释——如果您想在多行之间添加较长的注释，请将其用 `<script>` 标签包裹起来/*，以*/避免被强制执行。

2. JavaScript 变量

JavaScript 变量实际上就是以名称命名的存储位置。

因此，我们可以在 JavaScript 代码中使用它们作为占位符，通过它们可以执行各种操作。

在 JavaScript 中使用变量有三种方法：
var— 最常见的变量是 `var`。它可以被重新赋值，但只能在函数内部访问。使用 `var` 会将变量移动到代码执行时的顶部。

var x = 140; //  variable x can be reassigned a new value and also redeclared

const— 无法重新分配，且在出现在程序中之前无法访问。

const x = 5; // variable x cannot be reassigned a new value or redeclared

let— 与 const 类似，let 变量可以重新赋值，但不能重新声明。

let x = 202; // variable x cannot be redeclared but can be reassigned a new value

3. JavaScript 数据类型

JavaScript 中的变量可以存储各种值和数据。您可以使用等号 ("=") 运算符为 JavaScript 变量赋值。JavaScript 具有以下数据类型：

• 数字：可以是实数或整数。

var id = 50

• 变量：与固定值不同，变量数据类型没有固定值。

var x

• 文本（字符串）：字符串是 JavaScript 数据最基本的类型。

var demoString = "Hello! World"

• 操作：JavaScript 变量可以被赋予操作。

var mul = 10*9

• 布尔值：布尔值只有真或假两种类型。

var booleanValue = true

• 常量：这些数据类型具有常量值。const

l = 8.8

• JavaScript 对象：它们是用于存储具有名称的属性的容器。JavaScript 对象包含方法和成员。

var name = {name:"Jon Snow", id:"AS123"}

4. JavaScript 运算符

变量允许你对它们执行各种类型的操作。运算符可以帮助你做到这一点。

操作员分为 4 种类型

• 基本算符：

• 位运算符：

• 比较运算符：

• 逻辑运算符：

5. JavaScript 函数

JavaScript 函数是一段执行特定任务的代码块。它们看起来像这样：

function nameOfTheFunction(parameterOne, parameterTwo, parameterThree, parameterFour,....,parameterN) {
   // Job or Task of the function 
}

• 数据输出函数 函数通常用于输出数据。输出方式有多种选择：

• 全局函数全局函数是内置于每个能够运行 JavaScript 的浏览器中的函数。

6. JavaScript 数组

数组是一种特殊的变量，它可以保存多个值：

const cars = ["Saab", "Volvo", "BMW"];

• 数组方法：

它可用于执行各种类型的操作。

数组是一种特殊的变量，它可以保存多个值：

const cars = ["Saab", "Volvo", "BMW"];

7. JavaScript 循环

几乎所有编程语言都包含循环。它允许你使用不同的值无限期地运行代码块：

• forloop：JavaScript 中创建循环最常用的方法。

for (initialization of the loop variable; condition checking for the loop; updation after the loop) {
   // code to be executed in loop
}

• whileloop：决定循环何时运行。// loop 变量的初始化在 while 循环开始之前完成。

while(condition checking for the loop){
// 1. code to be executed in loop
// 2. updation of the loop variable
}

• do-whiledo-while 循环：类似于 while 循环，它至少运行一次，并在循环结束时检查是否存在再次运行的条件。// 循环变量的初始化在 do-while 循环开始之前完成。

do{
// 1. code to be executed in loop
// 2. updation of the loop variable
}while(condition checking for the loop);

关于循环，有两点需要特别注意：

continue 语句：如果满足特定条件，则跳过循环的某些部分。break
语句：当满足指定条件时，退出循环。

8. JavaScript If-Else

在 JavaScript 中，if-else 语句用于根据条件执行代码块。它们用于设置代码块执行的条件。有些情况下会执行某些代码块，而有些情况下则不会。

if (condition)
{
   // Executes this block if
   // condition is true
}
else
{
   // Executes this block if
   // condition is false
}

9. JavaScript 字符串

在 JavaScript 中，字符串用于表示不执行任何功能但可以显示的文本。

var Name = "John Cena";

在这种情况下，约翰·塞纳就是那根弦。

以下是 JavaScript 中的所有转义序列，以及 JavaScript 为字符串提供的所有方法：

• 使用单引号或双引号标记字符串时，需要在 JavaScript 中使用转义字符。字符串中的引号需要使用特殊字符：

• 字符串方法：字符串可以通过多种不同的方式进行操作：

10. JavaScript 正则表达式

字符串可以通过正则表达式进行匹配，正则表达式是一种搜索模式。它们可用于文本搜索和文本替换。

• 模式修饰符

• 括号

• 元角色

• 量词

11. 数据转换

“数据转换”是指将一种格式转换为另一种格式。使用高阶 JavaScript 函数，您可以接受两个或多个函数作为输入，并返回一个结果函数，从而实现数据转换。`map()`、`filter()` 和 `reduce()` 都是接受函数作为输入的高阶函数。

• Map()JavaScript 的 map() 方法通过对父数组的每个元素调用特定函数来创建一个新数组。遍历数组并对每个元素调用函数可以通过以下方式实现：

map(), a non-mutating method.
var arr = [10,20,30];
var triple  = arr.map(x => x * 3);
triple; // [30,60,90]

• filter()使用 arr.filter()，可以生成一个新数组，该数组仅包含给定数组中满足给定条件和标准的元素。

var arr = [13,40,47];
var odd = arr.filter(x => x % 2);
odd; // [13,47]

• Reduce()在 JavaScript 中使用时，arr.reduce() 方法通过对每个值（从左到右）运行提供的函数，并将输出存储在累加器中，将给定的数组缩减为单个值。

var arr = [10,20,30];
var counter = 0;
let answer = arr.reduce((accumulator, value) => value + accumulator, counter);
console.log(answer) // answer = 10 + 20 + 30 = 60

12. 在 JavaScript 中处理日期

JavaScript 中的日期处理
您还可以使用 JavaScript 处理和修改日期和时间。这是 JavaScript 速查表的下一章。

• 设定日期

• 提取日期和时间值

• 设置日期的一部分

13. JavaScript 中的文档对象模型 (DOM)

网站的代码以文档对象模型（DOM）的形式组织。JavaScript 允许你以多种不同的方式构建和修改 HTML 元素（称为节点）。

• 节点属性

• 节点方法

• 元素方法

14. JavaScript 数字与数学

JavaScript 也支持数学函数和常量运算。

• 数字属性

• 数字方法

• 数学性质

• 数学方法

15. JavaScript 事件

事件是指用户对 HTML 元素执行的操作。编程语言可以监听这些事件，并在代码中触发相应的操作。任何 JavaScript 速查表都不能缺少事件。

• 老鼠

• 键盘

• 框架

• 形式

• 拖

• 剪贴板

• 媒体

• 动画片

• 其他

16. JavaScript 错误

在使用 JavaScript 时，可能会出现各种错误。处理这些错误的方法有很多种：

• 错误名称值

JavaScript 还内置了一个错误对象。它有两个属性：

error 属性可以返回六个不同的值作为其名称：

17. JavaScript 与浏览器的交互

除了 HTML 元素之外，JavaScript 还能考虑用户浏览器并将其属性融入代码中。

• 窗口属性

• 窗口方法

• 屏幕属性