好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

for 语句

for 语句

for 语句是循环语句中的一种。

for 语句可以使程序在某 一个 条件下重复执行一段 代码 。

1. 基本语法

for 语句相对于 if 语句稍微复杂,通常为以下格式:

 @H_ 419 _23@for   ( 初始语句 ;  条件 ;  条件为真值时执行的语句 )   { 
   // 循环体 
 } 
 

初始语句 会在循环开始前进行执行。

条件 会在每次循环结束 后执行 ,结果影响循环语句是否要继续执行。

条件为真时执行的语句 通常会用来影响下一次计算条件的结果。

2. 为什么需要循环语句

循环的应用非常广泛,如果有学习过数据结构与算法,会发现大部分的算法都需要循环介入,否则会使程序变得冗余复杂。

如我们需要 生成 一段 HTML 列表 代码 :

    < div   id   =  " container "   >     </ div  >  

   < script  >   
  @H_ 419 _23@var  arr  =   [  ,   ,   ,   ,   ,   ,   ,   ,   ]  ; 

  @H_ 419 _23@var  li1  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li2  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li3  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li4  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li5  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li6  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li7  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li8  =   '<li>'   +  arr [  ]   +   '</li>'  ; 
  @H_ 419 _23@var  li9  =   '<li>'   +  arr [  ]   +   '</li>'  ; 

  @H_ 419 _23@var  ul  =   '<ul>'  +  li1  +  li2  +  li3  +  li4  +  li5  +  li6  +  li7  +  li8  +  li9  +   '</ul>'  ; 

  document .  getElementById  (  'container'  )  . innerHTML  =  ul ; 
    </ script  >  
 

可以发现这里 生成 列表的 代码 很冗余,都是重复的操作,如果使用 for 循环, 代码 可以改成这样:

    < div   id   =  " container "   >     </ div  >  
   < script  >   
  @H_ 419 _23@var  arr  =   [  ,   ,   ,   ,   ,   ,   ,   ,   ]  ; 

  @H_ 419 _23@var  lis  =   ''  ; 

   // 单独拿到数组的长度 
  @H_ 419 _23@var  len  =  arr . length ; 
   // 声明变量i用来计数 
  @H_ 419 _23@var  i ; 
  @H_ 419 _23@for   ( i  =   ;  i  <  len ;  i ++  )   { 
    lis  =  lis  +   (  '<li>'   +  arr [ i ]   +   '</li>'  )  ; 
   } 

  @H_ 419 _23@var  ul  =   '<ul>'   +  lis  +   '</ul>'  ; 

  document .  getElementById  (  'container'  )  . innerHTML  =  ul ; 
    </ script  >  
 

这里使用 for 循环 生成 了 一个 列表, 效果 和上述声明九个变量然后做拼接的方式是一样的。

循环开始前先声明的变量 i 用于计数,表示当前循环到第几次。

在循环开始前先将 i 设置为0,这只会执行一次,随后比较当前循环的 次数 是否小于数组长度,如果比数组长度小则执行 i++ , i++ 会先使用 i 的值,再做累加 ( i = i + 1) 操作,随 后执行 循环体,重复上述操作。

具体的流程如下:

第一次循环 i 的值为 0,i是小于 len 变量的,所以 arr[0] 的值就是 1,这个时候 lis 被累加了 <li>1</li> 。 第二次循环 i的值为 1,i 是小于 len 变量的,所以 arr[1] 的值就是 2,这个时候 lis 被累加了 <li>2</li> 。 第三次循环 i 的值为 2,i 是小于 len 变量的,所以 arr[2] 的值就是 3,这个时候 lis 被累加了 <li>3</li> 。 第四次循环 i 的值为 3,i是小于 len 变量的,所以 arr[3] 的值就是 4,这个时候 lis 被累加了 <li>4</li> 。 第五次循环 i的值为 4,i 是小于 len 变量的,所以arr[4]的值就是5,这个时候lis被累加了 <li>5</li> 。 第六次循环 i的值为 5,i 是小于 len 变量的,所以 arr[5] 的值就是 6,这个时候 lis 被累加了 <li>6</li> 。 第七次循环 i的值为 6,i 是小于 len 变量的,所以 arr[6] 的值就是 7,这个时候 lis 被累加了 <li>7</li> 。 第八次循环 i 的值为 7,i 是小于 len 变量的,所以 arr[7] 的值就是 8,这个时候 lis 被累加了 <li>8</li> 。 第九次循环 i的值为 8,i 是小于 len 变量的,所以 arr[8] 的值就是 9,这个时候 lis 被累加了 <li>9</li> 。 第十次循环 i 的值为 9,i 等于 len 变量,不再小于 len,条件不成立,循环结束。

虽然流程看起来复杂,但是 代码 的可维护性得到了提高,冗余 代码 也减少了,如果这个时候 li 标签 需要加一些 属性 ,如 class 或者 style ,只需要 修改 循环体中的一行 代码 即可。

这种形式的 for 循环还有一种语法:

 @H_ 419 _23@for   ( 初始语句 ;  条件 ;  条件为真值时执行的语句 )  需要循环的语句 ; 
 

和 if 语句很像,这种属于行循环语句,这种用到的比较少,因为 代码 的可阅读性比较低,而且一般用到循环的场景都不止一行 代码 。

3. for … in

for…in 循环可以用来遍历对象的 属性 名。

 @H_ 419 _23@var  obj  =   { 
  name :   '小红'  , 
  age :   , 
  hobby :   [  '打篮球'  ,   '唱歌'  ]  , 
 }  ; 

@H_ 419 _23@for   ( key @H_ 419 _23@in  obj )   { 
  console .  log  ( obj [ key ]  )  ; 
 } 

 //  输出 : 
 //   "小红" 
 //   12 
 //   ["打篮球", "唱歌"] 
 

每一次遍历拿到的 key 就是对象的某 一个 属性 名,当 属性 名被遍历完后会 自动 退出 循环。

有部分 key 是无法遍历到的,具体规则可以参阅对象章节。

4. 无限循环

 @H_ 419 _23@for   (  ;  ;  )   { 
  console .  log  (  'loop...'  )  ; 
 } 
 

这样的循环语句会陷入无限循环。

大部分无限循环会让浏览器卡死,需要强制 退出 浏览器!

5. 循环应用的例子

5.1 判断 一个 数是不是质数

 @H_ 419 _23@var  num  =   ; 

@H_ 419 _23@var  flag  =   false  ; 

@H_ 419 _23@var  len ; 
@H_ 419 _23@var  i ; 

@H_ 419 _23@for   ( i  =   ,  len  =    -  ;  i  <=  len ;  i ++  )   { 
  @H_ 419 _23@if   ( num  %  i  ===   )   { 
    flag  =   true  ; 
    @H_ 419 _23@break  ;   // break可以中断循环 
   } 
 } 

@H_ 419 _23@if   ( flag )   { 
  console .  log  ( num  +   '不是质数'  )  ; 
 }  @H_ 419 _23@else   { 
  console .  log  ( num  +   '是质数'  )  ; 
 } 

 //  输出 :"17是质数" 
 

首先要知道什么是质数,质数就是只能被1和本身整除的数。

所以如果要判断 num 是不是质数,只需要去掉头尾,从 2 循环到 num - 1 ,用 num 对每 一个 循环数做取余操作,如果存在余数为 0 的,就说明中间有个数可以被整除,那就不是质数,反之就是质数。

5.2 计算阶乘

 @H_ 419 _23@var  num  =   ; 

@H_ 419 _23@var  result  =   ; 

@H_ 419 _23@var  i ; 
@H_ 419 _23@for   ( i  =  num ;  i  >   ;  i --  )   { 
  result  =  result  *  i ; 
 } 

console .  log  ( result )  ;   //  输出 :24 
 

阶乘是所有小于及等于某一数的正整数的积,如4的阶乘,在数学中表示为 4! ,结果为 4 * 3 * 2 * 1 。

在 代码 中,就可以用 一个 变量来保存每次做乘法的结果,如 4 的阶乘,就可以用变量 result 记录结果,初始值为 1,循环可以从 4 循环到 1,每次将循环到的值乘以 result ,循环结束后就可以得到结果。

6. 小结

循环语句和条件语句一样,是给语言带来处理业务能力的重要特性之一。

通常如果需要连续执行多次的重复操作,都应该考虑使用循环来 解决 。

JavaScript 算数运算符 ? ?JavaScript if 语句

查看更多关于for 语句的详细内容...

  阅读:61次

上一篇

下一篇

第1节:什么是 JavaScript    第2节:学习环境准备    第3节:调试方案    第4节:JavaScript 变量    第5节:JavaScript 数据类型    第6节:JavaScript if 语句    第7节:for 语句    第8节:JavaScript 算数运算符    第9节:JavaScript 比较运算符    第10节:JavaScript 逻辑运算符    第11节:JavaScript 函数    第12节:JavaScript 表达式    第13节:JavaScript 对象    第14节:JavaScript 字符串    第15节:JavaScript 数字    第16节:JavaScript 数组    第17节:JavaScript switch 语句    第18节:JavaScript while 语句    第19节:JavaScript 的 break 与 continue    第20节:JavaScript with    第21节:document.cookie    第22节:JavaScript Function    第23节:JavaScript Math    第24节:JavaScript Date    第25节:JavaScript RegExp    第26节:JavaScript JSON    第27节:什么是 DOM    第28节:DOM 和 JavaScript 的关系    第29节:获取和操作 DOM 节点    第30节:DOM 与事件    第31节:DOM 事件绑定    第32节:DOM 事件对象    第33节:DOM 事件流    第34节:事件相关的优化    第35节:自定义事件    第36节:表单校验    第37节:什么是 BOM    第38节:常用的 BOM 相关对象    第39节:BOM 常用属性和方法    第40节:AJAX    第41节:异常处理    第42节:三元运算符    第43节:逗号操作符    第44节:void    第45节:typeof    第46节:delete 操作符    第47节:debugger    第48节:getter & setter    第49节:new 运算符与构造函数    第50节:JavaScript 原型    第51节:JavaScript instanceof    第52节:JavaScript this    第53节:严格模式    第54节:作用域    第55节:闭包    第56节:变量提升    第57节:对象包装器    第58节:Lodash    第59节:moment    第60节:swiper    第61节:ECMAScript 6    第62节:Node.js    第63节:Babel    第64节:CSS 预处理器    第65节:代码规范    第66节:TypeScript    第67节:WebComponents    第68节:Vue、React、Angular    第69节:小程序    第70节:JavaScript 关键字    第71节:分号导致的问题    第72节:对象属性访问问题    第73节:this 使用问题    第74节:浮点数精度问题    第75节:独一无二的 NaN    第76节:避免全局污染    第77节:控制台观察对象问题    第78节:根据环境选择语言特性    第79节:相关资源