循环结构的执行步骤
- 声明循环变量;
- 判断循环条件;
- 执行循环体;
- 更新循环变量;
- 然后循环执行2-4,直到条件不成立,跳出循环。
环控制语句
- break:跳出本层循环,继续执行循环后面的语句。
如果循环有多层,则break只能跳出一层。 - continue:跳过本次循环剩余的代码,继续执行下一次循环。
①对与for循环,continue之后执行的语句,是循环变量更新语句i++;
②对于while、do-while循环,continue之后执行的语句,是循环条件判断;
因此,使用这两个循环时,必须将continue放到i++之后使用,否则,continue将跳过i++进入死循环。
for(var i = 1; i < 10; i++){
if(i == 4){
continue;
}
console.log(n);//1 2 3 5 6 7 8 9
}
for(var i = 1; i < 10; i++){
if(i == 4){
break;
}
console.log(i);//1 2 3
}
1. for循环
for(初始化①;条件②;自增③){
循环体④
}
- 三个表达式:①声明循环变量;②判断循环条件;③更新循环变量
- 三个表达式都可以有多部分组成,第二部分多个判断条件用&& ||连接,第一三部分用逗号分割
- 执行特点:先判断再执行
- 执行顺序: 初始化① 》 判断② 》 执行循环体④ 》 自增③ , ②④③ ②④③… …直到②为假结束
- 主要用于数组循环
2. while 循环
lessons =["HTML","CSS","JS","Vue"];
var i=0;
while (lessons[i])
{
console.log(lessons[i] + "<br>")
i++;
};
while 循环和for循环底层处理是一样的,只是for可以把声明,条件,自增都放在一起
3. do-while循环
do-while 循环跟while循环相似, 但do-while先执行再判断,即使初始条件不成立,do-while循环至少执行一次;
let i = 3;
do{
console.log(i)
i--;
}
while(i>0)
// 3 , 2, 1
4. for in 循环
let obj = {name:'Jenny',age:18}
for(let key in obj){
console.log(key,obj[key])
}
// name Jenny
// age 18
- for…in循环主要是为遍历对象而设计的,不适用于遍历数组
- key代表对象的 键 值,obj[key] 代表对应的 值,也可用于数组遍历,但key输出为字符串,直接计算会出错。
- 注意: for in 循环的时候,不仅遍历自身的属性,还会找到 prototype 上去,所以最好在循环体内加一个判断,就用 obj[i].hasOwnProperty(i)判断一个属性是不是对象自身上的属性
5. for of 循环
- ES6新增语句,用来替代 for in 和 forEach,遍历获得键值,不同于forEach方法,它可以与break、continue和return配合使用
- 可遍历 Arrays(数组), Strings(字符串),DOM NodeList 对象、arguments对象的例子, Maps(映射), Sets(集合)等可迭代(Iterable data)的数据结构
// 数组
let arr = [a, b, c, d]
for (let val of arr) {
console.log(val); // a b c d
}
// 字符串
var str = "hello";
for (let s of str) {
console.log(s); // h e l l o
}
// DOM NodeList对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
p.classList.add("test");
}
// arguments对象
function printArgs() {
for (let x of arguments) {
console.log(x);
}
}
printArgs('a', 'b');// 'a' 'b'
6. 数组forEach 循环
- forEach 循环在所有元素调用完毕之前是不能停止的,它没有 break 语句
- 可用 try catch 语句,就是在要强制退出的时候,抛出一个 error 给 catch 捕捉到,然后在 catch 里面 return,这样就能中止循环了
- forEach 循环可以修改原来的数组
let arr = [1,2,3];
arr.forEach(function(val,index){
console.log(val,index)
})
// 1 0
// 2 1
// 3 2
7. 数组 map()
- map() 方法返回一个新数组,数组中的元素 由 原始数组元素调用函数处理后的值
- map()会分配内存空间存储新数组并返回,forEach()不会返回数据。所以 map()的执行速度 > forEach()的执行速度
let arr = [1,2,3];
let tt = arr.map(function(i){
i *= 2
console.log(i)
return i
})
// [2,4,6]
8.数组 reduce()
接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
let tt = arr.reduce(
(total, currentValue, currentIndex, arr)=>{// 计算代码块},
initialValue)