0基础入门前端到精通（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_31597919/article/details/146292232

JavaScript 从零基础到精通：核心语法与流程控制

1. 认识 JavaScript 🧐

1.1 基本概念 📖

JavaScript（简称 JS）是一门跨平台、面向对象的脚本语言，主要用于控制网页行为，实现人机交互效果。尽管 JavaScript 和 Java 在名称上相似，但它们是完全不同的语言。

1.2 组成 🏗️

JavaScript 由以下三部分组成：

ECMAScript ✍️：规定了 JS 的基础语法，包括变量、数据类型、流程控制、函数、对象等。
BOM（浏览器对象模型） 🌍：用于操作浏览器，如页面弹窗、地址栏操作、窗口管理等。
DOM（文档对象模型） 📜：用于操作 HTML 文档，如修改标签内容、样式等。

2. 引入方式 🚀

2.1 介绍 📢

JavaScript 代码可以嵌入 HTML 页面中，主要有以下两种引入方式：

方式一：内部脚本 🖋️

在 <script></script> 标签内编写 JS 代码。
可以放置在 HTML 任意位置，推荐放在 <body> 底部以提高加载速度。

<body>
    正文内容
    <script>
        alert("Hello World");
    </script>
</body>

方式二：外部脚本 📁

JS 代码存放在外部 .js 文件中，不包含 <script> 标签。
通过 <script src="路径"></script> 方式引入。

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

demo.js 内容：

alert('Hello JavaScript');

⚠️ 注意

.js 文件中只写 JS 代码，不包含 <script> 标签。
<script> 标签引入外部文件时，必须使用闭合标签 <script></script>，不可自闭合。

3. 基础语法 📚

3.1 书写规范 ✍️

✔ 区分大小写：变量名、函数名严格区分大小写。
✔ 分号：可选，建议保持统一风格。
✔ 代码块：用 {} 包裹。
✔ 注释：

单行：// 这是单行注释（快捷键：Ctrl + /）
多行：/* 这是多行注释 */（快捷键：Shift + Ctrl + /）
✔ 输出语句：
window.alert(...)：弹出警告框 ⚠️
document.write(...)：输出到 HTML 📝
console.log(...)：输出到控制台 🖥️

// 单行注释
console.log("Hello JS");
/* 多行注释 */
alert("Hello JS");
document.write("Hello JS");

3.2 变量 🔢

3.2.1 `let` 关键字 🏷️

let 用于声明变量，JS 是弱类型语言，变量可存不同类型的值。
命名规则：
- 变量名由字母、数字、下划线（_）、美元符（$）组成，不能以数字开头。
- 区分大小写。
- 不能使用 JS 关键字（如 let、if）。

let a = 20;
a = "Hello"; // 变量类型可变
alert(a);

3.2.2 `const` 关键字 🔒

const 用于声明常量，不可重新赋值。

const PI = 3.14;
PI = 3.15; // ❌ 报错：Assignment to constant variable

3.2.3 `var` 关键字 🛑（已不推荐）

var 可以重复声明变量，但作用域管理不够严格，不推荐使用。

var name = "A";
var name = "B";
alert(name); // 输出 "B"

3.3 数据类型 🌈

JS 数据类型分为两类：原始类型 和 引用类型。

📌 原始类型

number：整数、小数、NaN
string：字符串（单引号 ' 推荐）、双引号 "、反引号 `` `（模板字符串）
boolean：布尔值 true / false
null：空对象
undefined：未初始化的变量默认值

📌 类型检查（使用 typeof 操作符）

console.log(typeof 3);        // "number"
console.log(typeof "A");     // "string"
console.log(typeof true);     // "boolean"
console.log(typeof null);     // "object" （JS 语言的一个 Bug）
console.log(typeof undefined);// "undefined"

📌 模板字符串（反引号 ``）

通过 ${} 进行变量拼接，增强可读性。

let name = "Tom";
let age = 18;
console.log(`我是${name}，今年${age}岁`);

3.4 运算符（续）⚙️

3.4.2 赋值运算符 🖌️

赋值运算符用于给变量赋值，常见的有以下几种：

运算符	作用	示例	等价于
=	赋值	let a = 5;	-
+=	加后赋值	let a = 5; a += 3;	a = a + 3;
-=	减后赋值	let a = 5; a -= 2;	a = a - 2;
*=	乘后赋值	let a = 5; a *= 2;	a = a * 2;
/=	除后赋值	let a = 6; a /= 3;	a = a / 3;
%=	取余后赋值	let a = 7; a %= 3;	a = a % 3;

let num = 10; num += 5; 
 num = num + 5 
 console.log(num); 
 // 15 
 num *= 2; 
 num = num * 2 
 console.log(num); 
 // 30

⚠️ 注意：赋值运算符会直接改变变量的值，简化代码书写。

3.4.3 比较运算符 ⚖️

比较运算符用于比较两个值，返回布尔值（true 或 false）。

运算符	作用	示例	结果
==	等于（值相等）	5 == “5”	true
===	全等（值和类型都相等）	5 === “5”	false
!=	不等于	5 != “6”	true
!==	不全等	5 !== “5”	true
>	大于	5 > 3	true
<	小于	5 < 10	true
>=	大于等于	5 >= 5	true
<=	小于等于	5 <= 6	true

console.log(5 == "5");   
// true （只比较值，忽略类型） 
console.log(5 === "5");  
// false （值相等但类型不同） 
console.log(10 > 7);     
// true 
console.log(3 !== "3");  
// true （类型不同）

📌 提示：推荐使用 === 和 !==，因为它们更严格，能避免类型转换带来的意外结果。

3.4.4 逻辑运算符 🔗

逻辑运算符用于组合或操作布尔值，常用于条件判断。

运算符	作用	示例	结果
&&	逻辑与（且）	true && false	false
\|\|	逻辑或（或）	true \|\| false	true
!	逻辑非（取反）	!true	false

let a = 5; 
let b = 10; 
console.log(a > 0 && b < 15); 
// true （两个条件都满足） 
console.log(a < 0 || b > 5);  
// true （一个条件满足即可） 
console.log(!(a === 5));      
// false （取反，原本 true 变为 false）

📌 短路求值：

&&：如果左侧为 false，右侧不再执行。
||：如果左侧为 true，右侧不再执行。

let num = 0; 
console.log(num > 0 && alert("不会弹出")); 
// false，alert 不执行

3.5 流程控制语句 🚦

流程控制语句用于控制代码的执行顺序，包括条件判断和循环。

3.5.1 条件语句 if 🌟

根据条件执行不同的代码块。
语法：

if (条件) {    
	// 条件为 true 时执行 
	} else if (另一个条件) {    
	// 另一个条件为 true 时执行 
	} else {    
	// 以上条件都不满足时执行 
	}

let age = 18; 
if (age >= 18) {    
	console.log("已成年"); 
	} else {    
	console.log("未成年"); 
	}

📌 多条件示例：

let score = 85; 
if (score >= 90) {    
	console.log("优秀"); 
	} else if (score >= 60) {    
	console.log("合格"); 
	} else {    
	console.log("不及格"); 
	}

3.5.2 三元运算符 ?: ⚡

简化的 if-else，适合简单条件。
语法：条件 ? 值1 : 值2

let age = 20; 
let status = age >= 18 ? "成年" : "未成年"; 
console.log(status); 
// "成年"

3.5.3 switch 语句 🔢

根据变量的值匹配执行不同的代码块。
语法：

switch (表达式) {    
	case 值1:        
		// 代码块        
		break;    
	case 值2:        
		// 代码块       
		break;    
	default:        
		// 默认执行 
		}

let day = 3; 
switch (day) {    
	case 1:        
		console.log("星期一");        
		break;    
	case 2:        
		console.log("星期二");        
		break;    
	case 3:        
		console.log("星期三");        
		break;    
	default:        
		console.log("无效日期"); 
		}

⚠️ 注意：

break 用于跳出 switch，否则会继续执行后续 case。
default 是可选的，默认情况。

3.5.4 循环语句 🔄

1. for 循环 🔢

用于已知循环次数的场景。
语法：

for (初始化; 条件; 更新) {    
	// 循环体 
	}

for (let i = 1; i <= 5; i++) {    
	console.log(`第 ${i} 次循环`); 
	} 
	// 输出：第 1 次循环、第 2 次循环...第 5 次循环

2. while 循环 ⏳

条件为 true 时持续循环。
语法：

while (条件) {    
	// 循环体 
	}

let i = 0; 
while (i < 3) {    
	console.log(`i = ${i}`);    
	i++; 
	}
// 输出：i = 0、i = 1、i = 2

3. do-while 循环 🔁

先执行一次循环体，再判断条件。
语法：

do {    
	// 循环体 
}while (条件);

let j = 0; 
do {    
	console.log(`j = ${j}`);    
	j++; 
	} while (j < 2); 
	// 输出：j = 0、j = 1

📌 区别：do-while 至少执行一次，即使条件一开始不满足。

🎯 总结

概念	作用
JavaScript 基本概念	JavaScript 是一门跨平台、面向对象的脚本语言，主要用于控制网页行为，实现人机交互效果，与 Java 是完全不同的语言。
JavaScript 组成	由 ECMAScript（规定基础语法）、BOM（操作浏览器）、DOM（操作 HTML 文档）三部分组成。
JavaScript 引入方式	分为内部脚本（在`<script>`标签内编写代码）和外部脚本（将代码存于外部`.js`文件，通过`<script src="路径"></script>`引入）。
JavaScript 基础语法	包括书写规范（区分大小写、分号可选、用`{}`包裹代码块等）、变量声明（`let`、`const`、`var`）、数据类型（原始类型和引用类型）、运算符（算术、赋值、比较、逻辑等）、流程控制语句（`if`、`switch`、`for`、`while`等）。