JavaScript深度解析：从控制结构到优雅编程

发表时间: 2023-08-15 10:36

要成为一名JavaScript开发者，掌握控制结构是构建强大应用的关键一步。JavaScript不仅仅是一门编程语言，更是实现逻辑、处理条件和循环的利器。在本篇文章中，我们将深入探讨JavaScript中的各种控制结构，帮助您以更优雅的方式编写代码。

灵活应对条件：条件语句

条件语句让您可以根据不同的情况执行不同的代码块，实现灵活的逻辑控制。JavaScript提供了多种条件语句，以下是其中几种常用的：

1. if语句：为真实世界添加逻辑

单分支语法：

if (条件表达式) {  // 当条件为真时执行的代码}

括号内的条件表达式为布尔值，当条件表达式的值为True时，执行{}中的代码，为Flase时则不执行。条件表达式的值如果不是布尔值，会发生类型转换为布尔值，如果值为数字类型，除了值为0，所有的数字均为true，如果值为字符串类型，除了''空，所有字符串均为真。

  if (0) {    //     console.log('执行语句')    //   }  if ('') {    //   console.log('执行语句')    // }

双分支语法：

if (条件表达式){  // 满足条件要执行的语句} else {  // 不满足条件要执行的语句}

举例：

 <script>    // 1. 用户输入    let username = prompt('请输入用户名:')    let pwd = prompt('请输入密码:')    // 2. 判断输出    if (username === 'admin' && pwd === '123456') {      alert('恭喜登录成功')    } else {      alert('用户名或者密码错误')    }  </script>

多分支语法：处理多重情况

<script>    // 1. 用户输入    let score = +prompt('请输入成绩：')    // 2. 判断输出    if (score >= 90) {      alert('成绩为优秀')    } else if (score >= 70) {      alert('成绩为良好')    } else if (score >= 60) {      alert('成绩为及格')    } else {      alert('成绩不及格')    }  </script>

2.三元表达式

使用场景：一些简单的双分支，可以使用三元运算符（三元表达式），写起来比 if else双分支更简单

符号：? 与 : 配合使用

语法格式

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

三元表达式的执行过程，如果条件为真，则执行表达式1的代码，如果条件为假，就执行表达式2的代码

// 1. 用户输入 let num = prompt('请您输入一个数字:')// 2. 判断输出- 小于10才补0// num = num < 10 ? 0 + num : numnum = num >= 10 ? num : 0 + numalert(num)

3. switch语句：精准多选一

switch (表达式) {  case 值1:    // 当表达式等于value1时执行的代码    break;  case 值2:    // 当表达式等于value2时执行的代码    break;  // 可以添加更多的case语句  default:    // 当表达式不匹配任何case时执行的代码}

循环精进：循环语句

循环语句让您可以重复执行一段代码，让您的应用变得更加高效。以下是JavaScript中常用的循环语句：

1. for循环：精确控制迭代次数

for (初始值; 终止条件; 变化量) {  // 需要循环中执行的代码}

举例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>for循环语句</title></head><body>    <script>  // 在网页中输出标题1至标题6  // 起始值为 1  // 变化量 i++  // 终止条件 i <= 6  for(let i = 1; i <= 6; i++) {    document.write(`<h${i}>我是标题${i}<h${i}>`)  }</script></body></html>

2. while循环：条件满足就不停止

while (表达式) {  // 在表达式为真时持续执行的代码}

举例：

let i = 1while (i <= 3) {  document.write('重复打印三次<br>')  i++   // 这里千万不要忘了变量自增否则造成死循环}

3. do-while循环：先执行一次再判断条件

do {  // 首次执行，之后在条件为真时继续执行的代码} while (表达式);

控制流的艺术：跳转语句

跳转语句让您可以在程序中跳转，以便更好地控制代码的执行流程。

1. break语句：精准中断循环

for (let i = 0; i < 5; i++) {  if (i === 3) {    break; // 当 i 等于 3 时中断循环  }  console.log(i);}

2. continue语句：跳过当前迭代

for (let i = 0; i < 5; i++) {  if (i === 3) {    continue; // 当 i 等于 3 时跳过此次迭代  }  console.log(i);}

3. return语句：优雅返回值

function multiply(a, b) {  return a * b; // 返回 a 和 b 的乘积，并终止函数执行}

通过深入理解这些控制结构，您可以更加优雅地编写出高效、可读性强的JavaScript代码。掌握这些技巧，让您的代码逻辑清晰，应对各种场景游刃有余。不断精进您的JavaScript控制结构，创造出更出色的应用吧！