章节索引 :

JavaScript while 语句

while 语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环。—— MDN

while 语句也是一种循环语句,也称 while 循环。

while 循环接收一个表达式,当这个表达式结果非 false 的时候,就会执行 while 循环的代码块。

1. 基本语法

while (表达式) {
  表达式结果为真时候执行的代码;
}

while 的语法相对简单,其使用的频率没有for循环高,可以使用 for 循环完成的都可以使用 while 循环完成,反之亦然。

例如输出 0 到 100 的偶数,使用 while 就可以这样做:

var num = 0
while (num <= 100) {
  if (num % 2 === 0) {
    console.log(num);
  }

  num++;
}

var i;
for (i = 0; i <= 100; i++) {
if (i % 2 === 0) {
    console.log(i);
  }
}

对比 for 循环,许多场景两者在同一问题的处理方式上区别不大。

for 循环将初始操作、循环条件、条件判断后要做的事情放在了规定的位置,而 while 循环只是将这些操作换个地方写而已。

事实上 for 循环也可以写得像 while 循环一样:

var num = 0;
for (;num <= 100;) {
  if (num % 2 === 0) {
    console.log(num);
  }

  num++;
}

换成这样的写法可以说是高度一致了。

2. 使用 while 的场景

根据个人的经验,while 比 for 循环用到的少,通常有三种情况:

  • 需要“无限循环”

相比 for 循环,while 来做无限循环更直接:

for (;;) {
  console.log('我停不下来了!!');
}

console.log('永远也不会执行到这里 :)');

while(true) {
  console.log('我也停不下来了!!');
}

那么问题就来了,为什么需要无限循环。

主要是想将复杂的条件拿出来,自己判断条件是否达成,然后使用 break 中断循环。

  • 有许多不可控的量构成循环条件

当循环条件为一个复杂表达式,而又不需要用到循环计数变量的时候(循环变量不一定非要是一个数字进行累加的)。

  • 通过循环对已有变量做操作,并将这个变量作为条件或者构成条件的成员

3. 小结

可以使用 while 语句实现的需求,都可以使用 for 语句实现,但 while 更适合复杂循环条件的场景。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源