前端从入门到精通---循环(For、While)

循环可多次执行代码块, 大致循环分为两大类: while、for, 其执行步骤分为如下几步:

• 声明循环变量;
• 判断循环条件;
• 执行循环体操作;
• 更新循环变量;
• 然后循环执行2-4, 直到条件不成立, 跳出循环;

循环中使用 continue 跳出当前循环, 使用 break 结束循环, while、do/while 需要放到变量 i++ 之后。

while 循环:

while 循环又分为 普通的 while 循环、do/while 循环

• 普通的 while 循环

  while 循环中的表达式, 运算结果可以是各种类型, 但是最终都会转为真假, 其特点是先判断后执行, 转换规则如下:

1. Boolean: true为真, false为假;
2. String: 空字符串为假, 所有非空字符串为真;
3. Number: 0为假, 一切非0数字为真;
4. null/Undefined/NaN: 全为假;
5. Object: 全为真;

var i = 1 // 声明循环变量
while (i <= 10) { // 判断循环条件
    console.log(i) // 执行循环体操作
    if (i === 5) continue // 跳出当前循环
    if (i === 9) break // 跳出循环, 循环结束
    i++ // 更新循环变量
}

• do/while 循环

do/while 循环其特点是先执行再判断, 即使初始条件不成立, do-while循环至少执行一次。

var i = 1

// 即使条件不成立, 也会先执行 do 中的语句一次
do {
    console.log(i)
    i++
    if (i === 5) continue // 跳出当前循环
    if (i === 9) break // 跳出循环, 循环结束
}while(i <= 10)

for 循环:

• 普通的 for 循环

普通的 for 循环 有三个表达式:

1. 声明循环变量;
2. 判断循环条件;
3. 更新循环变量;

三个表达式之间用 ; 分割, 其三个表达式都可以省略, 但是两个 ; 缺一不可。

for 循环的执行特点是先判断再执行, 与 while 相同, 其三个表达式都可以有三部分组成, 第二部分多个判断条件用 && 或 || 连接, 第一三部分用 , 分割；

for(let i = 0; i < 10; i++) { // 声明循环变量: i; 判断循环条件: i < 10; 更新循环变量 i++(i = i + 1)
    if (i === 3) continue // 跳出当前循环
    if (i === 9) break // 跳出循环, 循环结束
    console.log(i)
}

• for/in 循环

for/in 循环主要用于遍历对象, 格式为: for(var key in obj){}, key 表示 obj 对象的每一个键值对的键。所有循环中, 需要使用obj[key]来取到每一个值。

for/in 循环遍历时不仅能读取对象自身上面的成员属性, 也能延续原型链遍历出对象的原型属性, 可以使用 hasOwnProperty 判断一个属性是不是对象自身上的属性, obj.hasOwnProperty(key) == true 表示这个属性是对象的成员属性, 而不是原先属性。

// 引用上一章节对象中的例子
var person = { // 定义一个人对象
  height:170,
  age: 25, 
  weight: 120,
  eat: function () {
    console.log('吃饭')
  },
  sleep: function () {
    console.log('睡觉')
  },    
}

for (let key in person) {
    console.log('键为: ', key, '值为: ', person[key])
}

• for/of 循环(ES6新增)

for/of 循环格式为: for(var i of arr){}, 其使用的范围包括数组(Array)、Set 和 Map 结构、某些类似数组的对象（比如 arguments对象、DOM NodeList 对象）、Generator 对象, 以及 字符串。

var arr = ['Javascript', 'PHP', 'Java']
for(let i of arr) {
    console.log(i)
}

var map = new Map();
map.set('1', 'Javascript');
map.set('2', 'PHP');
map.set('3', 'Java');
for (var [key, value] of map) {
    console.log(key + ": " + value);
}

下一节我们将认识一下Javascript的函数。