当前位置：首页 > web >正文

零基础学前端-传统前端开发（第四期-JS基础-语法，语句）

web 2025/6/17 12:15:28

注：JS文章流程为：数据类型>>运算>>语法，语句>>对象>>数组>>函数>>类

传统的语法定义：音义结合的各结构单位之间的组织规则的汇集。但是在JavaScript学习中，语法意为描述合法代码书写规则的集合（就是拼拼图，必须按照固定搭配才能拼好）

语句：是程序中执行一个操作的基本单元，它是构成程序的基本结构元素之一（就好像写作文，是一句话一句话拼起来的）

语法：

代码块：代码块是用花括号 {}括起来的代码片段，通常用于表示代码的逻辑结构。

比如在if语句、for循环、while循环和函数中，代码块用来定义执行的具体操作。（在 JavaScript 中，语句通常以分号（;）结尾，表示一个完整的操作结束。）

if (age >= 18) {console.log("成年了");console.log("可以参加选举了");}这里的 {} 中的内容就是代码块，表示当条件满足时，要执行的多个操作。

注释：注释是用来解释代码片段的，它不会被浏览器执行，但可以帮助我们理解代码的逻辑。

单行注释：使用 //，它只能注释这一行的内容。

// 这是单行注释，解释变量的作用let x = 10; // 初始化变量 x

多行注释：使用 /* 和 */ 包裹内容，可以注释多行代码。

/*这是一个多行注释，可以用来解释一个复杂的功能模块或者代码逻辑*/

语句：

变量声明

var语句：是 JavaScript 中最初用于声明变量的关键字。它具有函数作用域，也就是说在函数内部用 var 声明的变量，只在该函数内部有效。

function test() {var x = 10;}console.log(x); // 会报错，因为 x 只在 test 函数内部有效

let语句：let 是 ES6（ECMAScript 2015）引入的用于声明变量的关键字，它具有块级作用域。块级作用域是指在一对大括号（{}）内声明的变量，只在该大括号内有效。

{let y = 20;}console.log(y); // 会报错，因为 y 只在大括号内有效

const：const 用于声明常量，也具有块级作用域。一旦声明后，常量的值不能被改变。

const PI = 3.14;console.log(PI); // 输出 3.14PI = 3; // 会报错，不能修改常量的值

条件语句

if 语句：if 语句用于根据条件执行不同的代码。

语法格式

if (条件) {代码块}

var age = 18;if(age >= 18){console.log("你好");}

if...else 语句：当需要在条件为真和为假时分别执行不同的代码时，可以使用 if...else 语句。

语法格式

if (条件) {代码块 1} else {代码块 2}

var score = 60;if(score >= 60){console.log("及格");}else{console.log("不及格");}如果 `score >= 60` 为真，就执行代码块 1 ，输出 “及格”；否则执行代码块 2 ，输出 “不及格”。

if...else if...else 语句：当有多个条件需要判断时，可以使用 if...else if...else 语句。

语法格式

if (条件 1) {代码块 1} else if (条件 2) {代码块 2} else {代码块 3}

var num = 5;if(num > 10){console.log("大于 10");}else if(num > 5){console.log("大于 5");}else{console.log("小于等于 5");}

循环语句

for 循环：for 循环用于重复执行一段代码，直到满足特定条件为止。

语法格式

for (初始化表达式; 条件表达式; 更新表达式) {代码块}* 解释：* 初始化表达式：通常用于初始化循环变量。* 条件表达式：在每次循环开始前进行判断，如果为真，则执行循环体；如果为假，则退出循环。* 更新表达式：在每次循环体执行完毕后更新循环变量。* 例如：for(let i = 0; i < 3; i++){console.log(i); // 输出 0、1、2}这里初始化变量 `i` 为 0 ，条件是 `i < 3` ，每次循环后 `i` 增加 1 。循环会执行 3 次，依次输出 0、1、2。

while 循环：while 循环也是用于重复执行一段代码，

while (条件) {代码块}* 先判断条件是否为真，如果为真，就执行代码块，然后再次判断条件，直到条件为假。* 例如：let count = 0;while(count < 3){console.log(count); // 输出 0、1、2count++;}如果不注意在循环体中更新变量（如这里的 `count++` ），可能会导致死循环，因为条件一直为真。

do...while 循环*：do...while 循环和 while 循环类似，但它的区别在于不管条件是否为真，都会先执行一次代码块，然后再判断条件

语法格式

do {代码块} while (条件)

{let num = 1; // 这个 num 只在这个花括号的作用域内有效do {console.log(num); // 输出 num 的值num++; // num 值加 1} while (num <= 5); // 只要 num 小于等于 5，就继续循环}

循环语句区别

条件判断时机

for 循环：在每次循环开始前都会先执行条件表达式的判断。

while 循环：同样在每次循环开始前判断条件，但没有内置的初始化和更新表达式。

初始化和更新

for 循环：将初始化、条件判断和更新操作集中在一个语句中，结构更紧凑，适合有明确的初始化和更新逻辑的场景。

while 循环：没有内置的初始化和更新操作，需要在循环体内部手动处理。

执行条件

do...while 循环（虽然你没有问，但这里也提一下）：do...while 循环会先执行一次循环体，然后才判断条件。因此，它至少会执行一次循环体，即使条件一开始就不满足。

for 和 while 循环：如果条件一开始就不满足，循环体可能一次都不执行。

适用点

for 循环

适用场景：当你需要在循环中初始化一个变量，并且每次循环后需要更新这个变量时，for 循环是一个很好的选择。它将初始化、条件判断和更新操作集中在一个地方，代码更清晰。

示例：

遍历数组或集合。

执行固定次数的循环。

for (let i = 0; i < 5; i++) {console.log(i); // 输出 0, 1, 2, 3, 4}

while 循环

适用场景：当你需要在循环中动态地控制条件，或者循环的次数不确定时，while 循环更适合。它更灵活，因为你可以根据需要在循环体中动态地改变条件变量。

示例：

读取用户输入，直到用户输入特定的值。

执行一个任务，直到某个条件满足。

let num = 0;while (num < 5) {console.log(num); // 输出 0, 1, 2, 3, 4num++;}

for 循环：适合有明确的初始化和更新逻辑，循环次数相对确定的场景。

while 循环：适合循环次数不确定，或者需要在循环体中动态控制条件的场景。

break 语句

break 语句用于完全终止当前的循环，跳出循环体，继续执行循环之后的代码。

当你需要在满足某个条件时立即退出循环时，可以使用 break。

常用于避免无限循环或在找到目标后提前退出循环。

const numbers = [1, 3, 5, 12, 8, 15];for (let i = 0; i < numbers.length; i++) {if (numbers[i] > 10) {console.log("找到第一个大于 10 的数字:", numbers[i]);break; // 找到后立即退出循环}}console.log("循环结束");

continue 语句

continue 语句用于跳过当前循环的剩余部分，直接开始下一次循环迭代。

当你需要跳过某些特定条件的迭代，但仍然继续执行后续的迭代时，可以使用 continue。

常用于过滤掉不符合条件的元素，只处理符合条件的元素。

const numbers = [1, 2, 3, 4, 5, 6];for (let i = 0; i < numbers.length; i++) {if (numbers[i] % 2 !== 0) {continue; // 如果是奇数，跳过当前迭代}console.log("偶数:", numbers[i]);}