怎么做网上网站的网站网站设计psd模板

怎么做网上网站的网站,网站设计psd模板,开源快速网站搭建平台,茂名seo快速排名外包在编程中#xff0c;循环语句是实现代码复用和逻辑简化的核心手段之一。当需要重复执行某段代码#xff08;如遍历数组、处理批量数据、实现特定次数的运算等#xff09;时#xff0c;循环语句能帮我们摆脱重复编写代码的繁琐#xff0c;提升开发效率。JavaScript 中提供了…在编程中循环语句是实现代码复用和逻辑简化的核心手段之一。当需要重复执行某段代码如遍历数组、处理批量数据、实现特定次数的运算等时循环语句能帮我们摆脱重复编写代码的繁琐提升开发效率。JavaScript 中提供了多种循环语句包括for、while、do...while以及用于遍历可迭代对象的for...in和for...of。本文将逐一拆解它们的语法结构、核心特点、适用场景并结合实例说明用法帮助大家快速掌握并灵活运用。目录一、基础循环for 循环最常用的“计数型”循环1. 语法结构2. 基础示例3. 特殊用法省略部分表达式二、条件循环while 循环“未知次数”的循环1. 语法结构2. 基础示例3. 注意事项三、do...while 循环“至少执行一次”的循环1. 语法结构2. 基础示例3. 与 while 循环的核心区别四、遍历循环for...in 与 for...of针对可迭代对象1. for...in 循环遍历对象的可枚举属性键名语法结构示例1遍历对象的属性示例2遍历数组不推荐2. for...of 循环遍历可迭代对象的键值推荐用于数组、字符串等语法结构示例1遍历数组推荐示例2遍历字符串示例3遍历 Map键值对for...in 与 for...of 的核心区别五、循环控制break 与 continue 语句1. break 语句立即退出循环2. continue 语句跳过当前迭代继续下一次六、总结各循环语句的适用场景选型一、基础循环for 循环最常用的“计数型”循环for循环是 JavaScript 中最经典、最常用的循环语句尤其适合已知循环次数的场景如遍历固定长度的数组、执行指定次数的运算。它将循环的初始化、条件判断、迭代操作集中在一个语句中结构清晰可读性强。1. 语法结构for (初始化表达式; 条件判断表达式; 迭代表达式) { // 循环体满足条件时执行的代码块 }各部分作用详解初始化表达式循环开始前执行一次用于声明循环变量如let i 0也可省略若变量已在外部声明。条件判断表达式每次循环执行前判断结果为true则执行循环体为false则退出循环。若省略默认恒为true易造成死循环需谨慎。迭代表达式每次循环体执行完成后执行用于更新循环变量如i、i - 2可省略需在循环体内手动更新变量否则可能死循环。2. 基础示例需求打印 1 到 5 的数字for (let i 1; i 5; i) { console.log(i); // 输出1 2 3 4 5 }3. 特殊用法省略部分表达式场景1外部声明循环变量省略初始化表达式let i 0; for (; i 3; i) { console.log(i); // 输出0 1 2 }场景2循环体内更新变量省略迭代表达式for (let i 0; i 3;) { console.log(i); i; // 手动更新变量否则死循环 } // 输出0 1 2注意若同时省略三个表达式for (;;) {}会形成无限循环需在循环体内通过break语句手动退出。二、条件循环while 循环“未知次数”的循环while循环适用于未知循环次数仅依赖“条件是否成立”来决定是否执行循环的场景如等待用户输入正确内容、处理动态获取的数据直到无数据为止。它的结构相对简洁仅包含“条件判断”和“循环体”。1. 语法结构while (条件判断表达式) { // 循环体条件为 true 时执行 // 需在循环体内更新条件相关变量否则易死循环 }执行逻辑先判断条件若为true则执行循环体执行完成后再次回到条件判断若为false直接退出循环。2. 基础示例需求生成随机数直到生成的数字大于 0.5 为止let randomNum; while (randomNum 0.5 || randomNum undefined) { randomNum Math.random(); // 生成 0~1 之间的随机数 console.log(当前随机数, randomNum); } // 输出多次打印随机数直到某次数值 0.53. 注意事项1. 循环体内必须包含“更新条件”的逻辑如上述示例中randomNum Math.random()否则若初始条件为true会陷入无限循环。2. 若初始条件为false循环体可能一次都不执行这是while循环的核心特点。三、do...while 循环“至少执行一次”的循环do...while循环是while循环的变体它的核心区别的是先执行一次循环体再判断条件。因此无论条件是否成立循环体至少会执行一次。适用于“必须先执行一次操作再根据结果判断是否继续”的场景如表单验证先提交一次再判断是否符合规则不符合则重新提交。1. 语法结构do { // 循环体先执行一次 } while (条件判断表达式); // 执行后判断true 则继续循环2. 基础示例需求让用户输入数字若输入的不是数字则重新输入至少输入一次let num; do { num prompt(请输入一个数字); // 先执行一次输入 } while (isNaN(num)); // 若输入的不是数字isNaN 返回 true则继续循环 console.log(你输入的数字是, num);3. 与 while 循环的核心区别循环类型执行顺序循环体是否可能一次不执行while先判断条件再执行循环体是初始条件为 false 时do...while先执行循环体再判断条件否至少执行一次四、遍历循环for...in 与 for...of针对可迭代对象前面的for、while、do...while更适合“计数型”或“条件型”循环而for...in和for...of专门用于遍历可迭代对象如数组、对象、字符串、Map、Set 等。两者的核心区别在于遍历的目标不同for...in遍历“键名”for...of遍历“键值”。1. for...in 循环遍历对象的可枚举属性键名for...in主要用于遍历对象的可枚举属性包括自身属性和继承的原型属性也可用于遍历数组但遍历的是数组的索引而非元素值不推荐用于数组遍历易出现问题。语法结构for (const 键名变量 in 可迭代对象) { // 循环体每次遍历得到一个键名 }示例1遍历对象的属性const person { name: 张三, age: 25, gender: 男 }; for (const key in person) { console.log(键名, key, 键值, person[key]); } // 输出 // 键名 name 键值 张三 // 键名 age 键值 25 // 键名 gender 键值 男示例2遍历数组不推荐const arr [10, 20, 30]; for (const index in arr) { console.log(索引, index, 元素值, arr[index]); // 索引是字符串类型 } // 输出 // 索引 0 元素值 10 // 索引 1 元素值 20 // 索引 2 元素值 30不推荐用for...in遍历数组的原因1. 遍历的索引是字符串类型若进行数值运算需转换2. 会遍历数组原型上的可枚举属性导致结果混乱3. 遍历顺序可能不固定。2. for...of 循环遍历可迭代对象的键值推荐用于数组、字符串等for...of是 ES6 新增的循环语句专门用于遍历可迭代对象的键值如数组的元素、字符串的字符、Map 的值等。它避免了for...in的缺点语法简洁是遍历数组、字符串等的首选方式。语法结构for (const 键值变量 of 可迭代对象) { // 循环体每次遍历得到一个键值 }示例1遍历数组推荐const arr [10, 20, 30]; for (const value of arr) { console.log(元素值, value); // 直接获取元素值无需通过索引 } // 输出10 20 30示例2遍历字符串const str hello; for (const char of str) { console.log(字符, char); } // 输出h e l l o示例3遍历 Map键值对const map new Map([[name, 李四], [age, 30]]); for (const [key, value] of map) { // 解构赋值获取键名和键值 console.log(键名, key, 键值, value); } // 输出 // 键名 name 键值 李四 // 键名 age 键值 30for...in 与 for...of 的核心区别循环类型遍历目标适用对象是否遍历原型属性for...in键名对象属性名、数组索引对象、数组不推荐是易混乱for...of键值数组元素、字符串字符等数组、字符串、Map、Set 等可迭代对象否仅遍历自身五、循环控制break 与 continue 语句在循环过程中有时需要手动控制循环的执行如提前退出循环、跳过某次循环此时需要用到break和continue语句。1. break 语句立即退出循环break用于立即终止当前循环跳出循环体不再执行后续的循环迭代。适用于“找到目标值后直接退出”“满足某个条件时停止循环”的场景。// 需求遍历数组找到值为 20 的元素后立即退出 const arr [10, 20, 30, 40]; for (const value of arr) { if (value 20) { break; // 找到目标值退出循环 } console.log(value); } // 输出10仅打印 10找到 20 后退出2. continue 语句跳过当前迭代继续下一次continue用于跳过当前循环的剩余代码直接进入下一次迭代不会退出循环仅跳过本次。适用于“过滤某些条件不执行本次循环体”的场景。// 需求遍历 1~5 的数字跳过偶数只打印奇数 for (let i 1; i 5; i) { if (i % 2 0) { continue; // 是偶数跳过本次循环 } console.log(i); } // 输出1 3 5六、总结各循环语句的适用场景选型掌握循环语句的核心是“根据场景选对类型”以下是各循环的适用场景总结帮助大家快速决策for 循环已知循环次数如遍历固定长度数组、执行 N 次运算结构清晰首选。while 循环未知循环次数依赖条件判断如等待某个状态变化初始条件可能为 false循环体可能不执行。do...while 循环未知循环次数但必须先执行一次循环体如表单验证、强制输入。for...in 循环遍历对象的可枚举属性键名不推荐用于数组。for...of 循环遍历可迭代对象的键值数组元素、字符串字符等是数组、字符串遍历的首选。最后提醒大家编写循环时务必避免无限循环确保条件会最终变为 false或通过break手动退出同时根据代码可读性选择合适的循环类型让后续维护更高效。