13.JavaScript 新手入门指南：语法、变量、流程控制全解析

[一、初识 JavaScript](#一、初识 JavaScript)

[1. JavaScript 是什么](#1. JavaScript 是什么)

[2. JavaScript 能做些什么？](#2. JavaScript 能做些什么？)

[3. HTML、CSS、JavaScript 的关系](#3. HTML、CSS、JavaScript 的关系)

[4. JavaScript 运行过程](#4. JavaScript 运行过程)

[5. JavaScript 的组成](#5. JavaScript 的组成)

[6. JavaScript 的书写形式](#6. JavaScript 的书写形式)

[1. 基本用法（创建变量/变量定义/变量声明/变量初始化）](#1. 基本用法（创建变量/变量定义/变量声明/变量初始化）)

[2. 变量定义（let的出现）](#2. 变量定义（let的出现）)

[3. 强类型与弱类型变量](#3. 强类型与弱类型变量)

[4. 动态类型与静态类型变量](#4. 动态类型与静态类型变量)

五、基本数据类型

[1. number数字类型](#1. number数字类型)

[2. string字符串类型](#2. string字符串类型)

[3. boolean布尔类型](#3. boolean布尔类型)

[4. undefined未定义数据类型](#4. undefined未定义数据类型)

[5. null空值类型](#5. null空值类型)

六、运算符

[1. 算术运算符](#1. 算术运算符)

[2. 赋值运算符 & 复合赋值运算符](#2. 赋值运算符 & 复合赋值运算符)

[3. 自增自减运算符](#3. 自增自减运算符)

[4. 比较运算符](#4. 比较运算符)

[5. 逻辑运算符](#5. 逻辑运算符)

七、条件语句

[1. if语句](#1. if语句)

（1）基本语法格式

[2. 三元表达式](#2. 三元表达式)

[3. switch](#3. switch)

八、循环语句

[1. while循环](#1. while循环)

[2. continue& break](#2. continue& break)

[3. for循环](#3. for循环)

一、初识 JavaScript

1. JavaScript 是什么

JavaScript（简称 JS）是世界上最流行的编程语言之一，是一个脚本语言，通过解释器运行。早期主要在客户端（浏览器）运行，如今也可基于 Node.js 在服务器端运行。

最初它仅用于完成简单的表单验证（如验证数据合法性），后来逐渐发展为通用的编程语言。

2. JavaScript 能做些什么？

网页开发（更复杂的特效和用户交互）
网页游戏开发
服务器开发（基于 Node.js）
桌面程序开发（如 Electron、VSCode 就是这么来的）
手机 App 开发

3. HTML、CSS、JavaScript 的关系

HTML：网页的结构（骨）
CSS：网页的表现（皮）
JavaScript：网页的行为（魂）

4. JavaScript 运行过程

编写的 JS 代码保存在文件中（存储在硬盘/外存 ），双击 html文件时，浏览器会读取文件并将代码加载到内存，再解析成二进制指令交给 CPU 执行（执行流：内存 → CPU）。

浏览器分为 渲染引擎 + JS 引擎：

渲染引擎：解析 HTML + CSS，俗称"内核"。
JS 引擎：JS 解释器，典型代表是 Chrome 内置的 V8。

JS 引擎的工作：读取 JS 代码 → 解析成二进制指令 → 执行。

5. JavaScript 的组成

ECMAScript（简称 ES）：JavaScript 语法标准。
DOM：页面文档对象模型，操作页面元素。
BOM：浏览器对象模型，操作浏览器窗口。

光有 ES 语法只能写基础逻辑，要完成复杂交互（如操作页面、浏览器），需结合 DOM 和 BOM API。若 JS 运行在服务端（Node.js），则关注 Node.js API，不太需要 DOM/BOM。

6. JavaScript 的书写形式

（1）行内式

直接嵌入到 HTML 元素内部：

复制代码

<input type="button" value="点我~" onclick="alert('haha')">

注意：JS 中字符串常量可以使用单引号表示，也可以使用双引号表示。HTML 中推荐使用双引号，JS 中推荐使用单引号。

（2）内嵌式

写到 <script>标签中：

复制代码

<script>
alert("haha");
</script>

（3）外部式

写到单独的 .js文件中：

复制代码

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

html 复制代码

alert("hehe");

注意：这种情况下 <script>标签中间不能写代码，必须空着（写了代码也不会执行），适合代码多的情况。

二、注释

单行注释：// 注释内容（推荐使用）
多行注释：/* 注释内容 */

三、语法概览

JavaScript 虽然一些设计理念和 Java 相近，但是在基础语法层面上还是有一些相似之处。有了 Java 的基础很容易理解 JavaScript 的一些基本语法。

四、变量的使用

1. 基本用法（创建变量/变量定义/变量声明/变量初始化）

复制代码

var name = 'zhangsan';
var age = 20;

var是 JS 中的关键字，表示这是一个变量。
=在 JS 中表示"赋值"，相当于把数据放到内存的盒子中。两侧建议有一个空格。
每个语句最后带有一个分号，JS 中可以省略，但建议还是加上。
注意：此处的 ;为英文分号，JS 中所有的标点都是英文标点。
初始化的值如果是字符串，那么就要使用单引号或者双引号引起来。

2. 变量定义（`let`的出现）

let的出现，规避了 var在定义变量的时候的一些缺陷。如果使用 let定义变量，此时变量生命周期、作用域，基本和 Java 类似。

JS 中定义一个变量的时候，不需要对找个变量指定类型。

3. 强类型与弱类型变量

强类型变量：不同的类型之间变量进行赋值的时候，需要进行一定的手段（强制类型转化）。
弱类型变量：不同变量之间变量进行赋值的时候，可以直接赋值。

4. 动态类型与静态类型变量

动态类型变量：代码在执行过程中，变量类型可以随时发生变化。
静态类型变量：变量定义的时候是什么类型，在运行过程中就是什么类型。

五、基本数据类型

JS 中内置的几种类型：

number：数字，不区分整数和小数。
boolean：true真，false假。
string：字符串类型。
undefined：只有唯一的值 undefined，表示未定义的值。
null：只有唯一的值 null，表示空值。

1. `number`数字类型

JS 中不区分整数和浮点数，统一都使用"数字类型"来表示。

特殊的数字值：

Infinity：无穷大，大于任何数值。表示数字已经超过了 JS 表示的范围。
-Infinity：无穷小，小于任何数值。表示数字已经超过了 JS 表示的范围。
NaN：表示当前的结果不是一个数字。

2. `string`字符串类型

（1）基本规则

字符串字面量需要使用引号引起来，单引号双引号均可：

复制代码

var a = "haha";
var b = 'hehe';
var c = `hello`; // 模板字符串

（2）字符串中包含引号的处理

如果字符串中本来已经包含引号，需用转义字符 ``处理：

复制代码

var msg = "my name is \"zhangsan\""; // 正确，使用转义字符
var msg = 'my name is \'zhangsan\''; // 正确，搭配使用单双引号
var msg = "my name is 'zhangsan'";   // 正确，搭配使用单双引号

（3）转义字符

有些字符不方便直接输入，需通过转义字符表示：

\n：换行
\\：反斜杠
\'：单引号
\"：双引号
\t：制表符

（4）求长度

使用 String的 length属性即可：

复制代码

var a = 'hehe';
console.log(a.length); // 4

var b = '哈哈';
console.log(b.length); // 2

单位为字符的数量。

（5）字符串拼接

使用 +进行拼接：

复制代码

var a = "my name is ";
var b = "zhangsan";
console.log(a + b); // "my name is zhangsan"

注意：数字和字符串也可以进行拼接：

复制代码

var c = "my score is ";
var d = 100;
console.log(c + d); // "my score is 100"

注意：要认准相加的变量到底是字符串还是数字：

复制代码

console.log(100 + 100); // 200
console.log("100" + 100); // "100100"

3. `boolean`布尔类型

表示"真"和"假"。Boolean 原本是数学中的概念（布尔代数）。在计算机中 boolean意义重大，往往要搭配条件/循环完成逻辑判断。

Boolean 参与运算时当做 1和 0来看待：

复制代码

console.log(true + 1); // 2
console.log(false + 1); // 1

这样的操作其实是不科学的，实际开发中不应该这么写。

4. `undefined`未定义数据类型

如果一个变量没有被初始化过，结果就是 undefined，是 undefined类型：

复制代码

var a;
console.log(a); // undefined

undefined和字符串进行相加，结果将字符串拼接：

复制代码

console.log(a + "10"); // "undefined10"

undefined和数字进行相加，结果为 NaN：

复制代码

console.log(a + 10); // NaN

5. `null`空值类型

null表示当前的变量是一个"空值"：

复制代码

var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // "null10"

注意：null和 undefined都表示取值非法的情况，但侧重点不同。null表示当前的变量为空（相当于有一个空的盒子）；undefined表示当前的变量未定义（相当于连盒子都没有）。

六、运算符

1. 算术运算符

+、-、*、/、%（取余）等。

2. 赋值运算符 & 复合赋值运算符

=、+=、-=、*=、/=、%=等。

3. 自增自减运算符

++：自增 1
--：自减 1

4. 比较运算符

<、>、<=、>=
==：比较相等（会进行隐式类型转换）--只比较内容
===：比较相等（不会进行隐式类型转换）--比较内容和数据类型
!=：比较不等
!==：严格不等

5. 逻辑运算符

用于计算多个 boolean表达式的值：

&&：与（一假则假）
||：或（一真则真）
!：非

七、条件语句

1. `if`语句

（1）基本语法格式

条件表达式为 true，则执行 if的 {}中的代码：

html 复制代码

// 形式1
if (条件) {
    语句
}

// 形式2
if (条件) {
    语句1
} else {
    语句2
}

// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2
} else if (...) {
    语句...
} else {
    语句N
}

2. 三元表达式

是 if else的简化写法：

复制代码

条件 ? 表达式1 : 表达式2

条件为真，返回表达式 1 的值；条件为假，返回表达式 2 的值。

注意：三元表达式的优先级是比较低的。

示例：判断当前数字是奇数还是偶数

复制代码

let num = prompt("请输入数字");
if (num % 2 == 0) {
    alert("这个数字是偶数");
} else if (num % 2 == 1) {
    alert("这个数字是奇数");
} else {
    alert("非法输入");
}

提示：改成 ===就会返回 false。

3. `switch`

更适合多分支的场景：

复制代码

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2;
        break;
    ...
    default:
        语句N;
}

示例：用户输入一个整数，提示今天是星期几

复制代码

let day = prompt("请输入今天是星期几：");
// console.log(typeof(day))
day = parseInt(day);
switch (day) {
    case 1:
        alert("今天是星期一");
        break;
    case 2:
        alert("今天是星期二");
        break;
    case 3:
        alert("今天是星期三");
        break;
    case 4:
        alert("今天是星期四");
        break;
    case 5:
        alert("今天是星期五");
        break;
    case 6:
        alert("今天是星期六");
        break;
    case 7:
        alert("今天是星期天");
        break;
    default:
        alert("非法输入");
}

八、循环语句

重复执行某些语句。

1. `while`循环

复制代码

while (条件) {
    循环体;
}

执行过程：

先执行条件语句。
条件为 true，执行循环体代码。
条件为 false，直接结束循环。

2. `continue`& `break`

continue：结束这次循环（吃五个李子，发现第三个李子里有一只虫子，于是扔掉这个，继续吃下一个李子）。
break：结束整个循环（吃五个李子，发现第三个李子里有半个虫子，于是剩下的也不吃了）。

3. `for`循环

复制代码

for (表达式1; 表达式2; 表达式3) {
    循环体
}

表达式1：用于初始化循环变量。
表达式2：循环条件。
表达式3：更新循环变量。

示例：找到 100 - 200 中第一个 3 的倍数

复制代码

let result = 0;
for (i = 100; i <= 200; i++) {
    if (i % 3 == 0) {
        result = i;
        break;
    }
}
alert("100~200之间第一个3的倍数是" + result);