HoRain云--JavaScript语句全解析：从基础到实战-平芜编程栈

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

JavaScript 语句

JavaScript 语句是浏览器执行的指令单元，通过控制网页行为实现动态交互。每条语句通常以分号结尾，但语言标准允许行末自动识别结束。

语句概述

JavaScript 语句是发给浏览器的命令，告诉浏览器要执行的操作。语句是代码的基本构建块，可以组合成复杂的逻辑结构。

语句类型

JavaScript 支持多种语句类型，主要包括：

声明语句：用于声明变量或函数

let name = "John"; const PI = 3.14; function greet() { /* ... */ }

赋值语句：为变量赋值
```
count = 10;
```

条件语句：根据条件执行不同代码

if (age >= 18) { console.log("You are an adult"); } else { console.log("You are a minor"); }

循环语句：重复执行代码块

for (let i = 0; i < 10; i++) { console.log(i); }

控制流语句：控制程序执行流程

break; // 跳出循环 continue; // 跳过当前迭代 return; // 退出函数

语句标识符（关键字）

JavaScript 语句通常以保留关键字为开始，这些关键字不能作为变量名使用：

关键字	描述
`break`	用于跳出循环
`catch`	语句块，在 try 语句块执行出错时执行
`continue`	跳过循环中的一个迭代
`do...while`	执行一个语句块，条件为 true 时继续执行
`for`	在条件为 true 时执行代码块
`for...in`	用于遍历数组或对象的属性
`function`	定义一个函数
`if...else`	基于条件执行不同动作
`return`	退出函数
`switch`	基于不同条件执行不同动作
`throw`	抛出（生成）错误
`try`	实现错误处理，与 catch 一同使用
`var`	声明一个变量（不推荐，使用 let/const 替代）
`while`	当条件为 true 时执行语句块

代码块

代码块是用于组合语句的结构，以左花括号{开始，以右花括号}结束：

{ console.log("First statement"); console.log("Second statement"); }

代码块的作用是将多个语句组合在一起，作为单个逻辑单元执行。通常用于：

函数体
条件语句（if/else）
循环语句（for/while）
switch 语句的 case

语句执行顺序

JavaScript 代码执行顺序遵循以下规则：

先同步后异步：先执行所有同步代码，再处理异步任务
异步任务队列：异步任务按以下顺序执行
- 先微任务（microtask）：Promise.then、MutationObserver、process.nextTick
- 再宏任务（macrotask）：setTimeout、setInterval、I/O、UI渲染

最佳实践

1. 避免全局变量

// 不推荐：创建全局变量 name = "John"; // 推荐：使用局部变量 function greet() { let name = "John"; console.log(name); }

2. 始终声明局部变量

// 不推荐：隐式创建全局变量 function calculate() { result = 10 + 5; // result 会成为全局变量 } // 推荐：使用 let/const 明确声明 function calculate() { let result = 10 + 5; console.log(result); }

3. 顶部声明

// 推荐：所有声明放在函数顶部 function processItems(items) { let filteredItems = []; let processedItems = []; // 逻辑代码 }

4. 初始化变量

// 推荐：声明时初始化 let count = 0; const MAX_ITEMS = 10; // 不推荐：声明后未初始化 let count;

5. 使用 const

// 推荐：使用 const 声明常量 const PI = 3.14; const MAX_SIZE = 100; // 不推荐：使用 var 或未声明 var PI = 3.14; MAX_SIZE = 100;

6. 避免使用 new Object()

// 推荐：使用字面量 const person = { name: "John", age: 30 }; const colors = ["red", "green", "blue"]; // 不推荐：使用 new const person = new Object(); person.name = "John"; person.age = 30;

7. 使用 === 比较

// 推荐：使用严格相等 if (age === 18) { console.log("You are 18"); } // 不推荐：使用 ==，会进行类型转换 if (age == "18") { console.log("You are 18"); // 会匹配，但不推荐 }

语句执行示例

console.log('script start'); // 同步 async function async1() { await async2(); console.log('async1 end'); // 异步 } async function async2() { console.log('async2 end'); // 同步 } async1(); setTimeout(function() { console.log('setTimeout'); // 宏任务 }, 0); new Promise(resolve => { console.log('Promise'); // 同步 resolve(); }).then(function() { console.log('promise1'); // 微任务 }).then(function() { console.log('promise2'); // 微任务 }); console.log('script end'); // 同步

执行顺序：