循环/遍历
- 循环，就是一遍又一遍的重复执行相同或者相似的代码
- 循环结构的两个要素
- 循环体--要执行的相同或相似的语句
- 循环条件--重复执行的次数，或者继续执行循环的条件
👉while循环
-
while循环语法格式
javascriptwhile(boolean表达式){ 循环体语句 } // 若boolean表达式为true，则执行一遍循环体中的语句，然后再判定一次boolean表达式，若为true，则再次执行一遍循环体中的语句，直到boolean表达式的值为false，则循环结束。 while(isHungury){ eatSomething() } // 需要注意的是，一般情况下，循环操作中会存在使得循环终止的可能性，否则将成为死循环 -
案例1
javascript// 打印1~10 var i=1; //初始值 while(i<=10){//循环条件 //循环体 console.log(i); i++; //增量 } console.log('当循环结束的时候,i的值是'+i)//拼接 -
案例2
javascript// 循环打印70 65 60 55 50 var i=70 while (i>=50) { console.log(i); i-=5; } -
案例3
javascript//打印1-100之间所有的奇数 var i=1; while(i<=100){ //奇数 if(i%2===1){ console.log(i); } i++;} //计算1-100之间所有整数的和 var i=1; var sum=0;//用于记录和 while (i<=100) { //把每次产生的值加到sum sum+=i //console.log(sum); i++ } //打印sum最终的结果 console.log(sum); //计算1-100之间所有偶数的和 var i=1; var sum=0; while(i<=100){ if(i%2===0){ //加到一起 sum+=i; } i++; } console.log(sum);
👉do-while循环
-
do-while循环语法格式
javascriptdo{ 可执行的语句; // 无论循环条件是否满足，循环体至少执行一遍 }while(boolean表达式) // 先执行一次循环体中的语句，然后判定boolean表达式的值，若为true，则继续执行循环体中的语句；然后再继续判定boolean表达式的值...直到boolean表达式的值为false退出 do{ eatSomething() }while(isHungry) -
案例1
javascript// 打印30-50之间的所有整数 var i=30; do { console.log(i); i++ }while (i<51); -
案例2
js// 打印1-100的所有奇数 var i=1; do { //判断是否为奇数 if(i%2===1){ console.log(i); } i++ }while (i<=100); -
案例3
javascript//计算1~100之间所有能被7整除的数字的和 var i=1; var sum=0; do { if(i%7===0){ sum+=i; } i++; }while (i<=100); console.log(sum); //计算1~20之间所有能被3整除的数字的乘积 var i =1; var s=1; do { if(i%3===0){ s*=i; } i++; }while (i<=20); console.log(s);
while和do-while语句的区别
- while循环，先判断再执行
- do-while循环，先执行再判断，例如ATM机输密码
- 当初始情况不满足循环条件时，while循环一次都不会执行；do-while循环不管任何情况都至少执行一次。
javascript
//ATM机输密码，先输密码再判断对错。
//使用while循环
var upwd=123456;
while(true){
varstr=prompt('请输入密码')；
if(str===upwd){
break;
}
}
//使用do-while循环
var upwd=123456;
do
{
varstr=prompt('请输入密码');//输入密码
}
while ( str!=upwd);👉for语句
-
for循环的语法格式
javascript// 初始值 循环条件 增量 for(表达式1;表达式2;表达式3){ 循环体语句 } -
for循环执行过程
-
计算表达式1的值
-
计算表达式2（boolean表达式）的值，如果为true则执行循环体，否则退出循环
-
执行循环体
-
执行表达式3
-
计算表达式2；如果为true则执行循环体，否则退出循环
-
如此循环往复，直到表达式2的值为false
-
案例
javascript//1-50之间所有能被3整除 for (var i=1;i<=50;i++ ) { if(i%3===0){ console.log(i); } } //计算101-200之间所有的偶数和 for (var i=101,sum=0;i<=200;i++) { if(i%2==0){ sum+=i; } } console.log(sum); //打印本世纪所有闰年 for (var i=2000;i<2100;i++ ) { if(i%4===0 && i%100 !==0||i%400===0){ console.log(i); } } //九九乘法表的第五行 //1*5= 5 ，2*5=10 ，3*5=15 ，4*5=20 ，5*5=25 for(var i=1,str='';i<=5;i++){ //str+=i; //1 2 34 5在一行 str+=i+'*5='+i*5+' '; //字符串的拼接 } console.log(str); -
-
for语句三个表达式特殊用法
-
表达式1位置内容为空
javascriptvar sum=0; var i=1; for(;i<=100;i++){ sum+=i; } console.log('1-100的和为:',sum) //1-100的和为: 5050 -
表达式3的位置内容为空时
javascriptvar sum=0; for(var i=1;i<=100;){ sum+=i; i++; } console.log('1-100的和为:',sum) //1-100的和为: 5050 -
表达式1，2，3位置内容均为空时
javascriptfor(;;){ console.log('我要读书...') //死循环 }
-
-
循环中使用break语句
- break用于循环，可使程序终止循环而执行循环后面的语句，常常与条件语句一起使用
javascriptvar sum=0 for(var i=0；i<=100;i++){ if(sum>=4000){ break } sum+=i } // 当总和大于等于4000时，退出循环 -
循环中使用continue 语句
- continue关键字只用于循环中
- 其作用为跳过本次循环体中剩余语句而执行下一次循环
javascript//打印1-10之间所有整数，不包含5 for(var i=1;i<=10;i++){ //当i为5，跳过后续语句 if(i===5){ continue; } console.log(i); } //计算1-100之间所有偶数的和,遇到奇数跳过 for (var i=1,sum=0;i<=100;i++){ //如果i为奇数，跳过 if(i%2===1){ continue; } sum+=i; } console.log(sum); -
循环嵌套(一)
-
需要多次重复执行一个或多个任务的问题考虑使用循环来解决
-
for/while/do-while三种循环在很多情况下是可以互换的；一般情况下，for循环使用最多
-
案例1
javascript//***** for (var i=1,str='';i<=5;i++) { str+='*'; } console.log(str); //***** //***** //***** //***** //***** for (var j=1;j<=5;j++ ) { for(var i=1,str='';i<=5;i++) { str+='*'; } console.log(str); } //外层：循环行 //内层：循环列 -
案例2
javascript//* 1 1 //** 2 2 //*** 3 3 //**** 4 4 //***** 5 5 for (var j=1;j<=5;j++ ) { for(var i=1,str='';i<=j;i++) //str写在内层，表示每循环一层把之前一层清空 str 写在外层，表示每循环一层把之前一层加上 { str+='*'; } console.log(str); } //外层：循环行 //内层：循环列 -
案例3
javascript//打印九九乘法表 （外层是九行 /* 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 */ //外层循环 for(var i=1;i<=9;i++){ //内层循环 for(var j=1 str='';j<=i;j++){ str+=j+'*'+i+'='+(j*i)+''; } console.log(str); } -
案例4
javascript//打印本世纪前10个闰年 for (vari=2000,count=0;i<=2100;i++) { if(i%4===0 && i%100!==0 ||i%400===0 ){ console.log(i); //如果i为闰年 count++; //每次有一个闰年产生，判断是否为10 if(count===10){ break; } } } console.log(count);
-
-
循环嵌套(二)
-
案例1
javascriptfor(var i=0,j=8;i<=5;i++,j--){ console.log(i,j) } -
案例2
javascript// 多个条件表达式后边的起作用 for(i=1,j=8;j>=1,i<=5;i++,j--){ console.log(i,j) } for(var i=1,j=8;i<=5,j>=1;i++,j--){ console.log(i,j) } -
案例3
javascript//计算1/20+2/18+.....10/2 for(vari=1,j=20,sum=0;i<=10;i++,j-=2){ sum+=i/j; } console.log(sum);
-
👉for in
- 用于遍历对象
- 只有对象才会关注原型上的方法，而遍历数组更多的是关注遍历数组里面的值，而不是关注原型。
- for in会把原型上的东西都给遍历出来，只是数组都加了隐藏的属性，所以看不出来。
👉for of （es6）
- 遍历具有可迭代协议（[Symbol.iterator] 属性）的对象（Array Map Set string 类数组）
- 迭代器的语法糖，循环出的item是next返回对象里的value值
javascript
// 迭代完成后循环结束
for(const item of iterable){
// iterable:可迭代对象
// item 每次迭代得到的数据
}👉forEach()
-
forEach(fun)专门用于对原数组中每个元素执行相同的fun函数对象规定的操作
-
forEach(function(elem,i,arr){})- elem 数组中的每一个值
- i 每一个下标
- arr 数组本身
【面试题】：forEach能否取代for循环
- 不能，forEach不支持continue和break
- forEach的优势就是，它传入一个回调函数，因此形成一个作用域，它内部所定义的变量不会像for循环一样污染全局变量。
- forEach本身无法跳出循环，必须遍历所有的数据才会结束
👉every()
-
every(fun) 判断数组中每一个元素是否都满足fun函数定义的条件，只有满足才返回true，否则返回false
-
every(function(elem,i,arr){ return xxx})- every中自带for循环，自动遍历数组中每个元素
- 每遍历一个元素，就会自动调用回调函数
- 如果回调函数返回true，则有必要继续判断下一个
- 如果回调函数返回false，则没必要继续判断下一个，而是退出函数，直接返回false，表示不是所有元素都符合要求
- 如果程序可以正常执行完循环，说明数组中所有元素都符合要求，才能返回true
- 如果回调函数没有返回值，则every会悄悄得添加一个返回值为false
- every得遍历见到false就停止
- 回调函数得返回值如何设置
- 返回值应该为筛选条件-->看数组中得值是否满足条件
- 不满足条件，直接返回false，遍历停止
- 满足条件，遍历继续，都满足，返回true。
- 返回值应该为筛选条件-->看数组中得值是否满足条件
👉some(func)
some(function(elem,i,arr){ return xxx})判断数组中是否包含满足fun函数定义得条件得元素。只要包含返回true，否则返回false- 如果回调函数没有返回值.则some会悄悄得添加一个返回值为false
- some 的遍历见到false就继续，见到true才停止。
- 返回值应该为筛选条件->看数组中的值是否都满足条件
- 满足条件,直接返回true，遍历停止
- 值不满足条件,继续遍历，如都不满足，返回false
👉filter(func)
filter(function(elem,i,arr){ return xxx})专门用于筛选出数组中符合fun函数判断条件得新数组
👉map(func)
-
map(function(elem,i,arr){ return xxx})专门用于基于原数组创建新数组对象 -
对数组中的每一个值做操作 并把操作后的值汇成一个新数组
javascriptvar newArr=arr.map((val)=>{ return val+2 }); console.log(newArr); -
map()和forEach()的区别： 前者不改变原数组的内容，后者改变原数组的内容
👉reduce(func)
reduce((prev,elem,i,arr)=>{ return prev+elem})reduce()和reduceRight()方法会迭代数组中的每一个元素，汇总出和一个最终结果值返回
👉 find(func) 查找数组中符合指定条件的第一个元素，并返回该元素
js
const result = array.find((element, index, array) => {
// 返回一个条件，用于查找符合条件的元素
// element:当前遍历到的数组元素
// index：遍历到所有数组元素的索引
// array：调用 find 的数组本身
})
// 例
const numbers = [1, 2, 3, 4, 5];
const result = numbers.find((element) => {
return element >= 3;
});
console.log(result); // 输出: 3👉【扩展1】 for和forEach跳出循环的方法
-
for循环跳出循环
- break 跳出循环
- continue 跳出当次循环
- return 终止当前函数的执行
javascriptvar arr = [1,3,5,7,9]; var id = 5; for (var i = 0; i < arr.length; i++) { if(arr[i]=== 1) continue; //跳过当次循环 console.log(arr[i]) if (arr[i] === id) { break; //满足条件，跳出循环 } if (arr[i] === 6) { return; //满足条件，可以终止当前函数 } } -
forEach跳出循环
-
通过抛出异常的方式跳出循环，return 跳出当次循环
javascriptvar arr = [1,3,5,7,9]; var id = 5; try { arr.forEach(function (curItem, i) { if(curItem === 1) return; console.log(curItem) if (curItem === id) { throw Error(); //满足条件，跳出循环 } }) } catch (e) { } arr.forEach(function (curItem, i) { if(curItem === 1) return; console.log(curItem) if (curItem === id) { return; //满足条件，跳出当次循环 // break 语法报错; } })
-