整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
第一節(jié)課的時(shí)候，我們學(xué)過(guò)：
var a=1; //聲明變量
if(a%2==0){
console.log(a);
}
a=2;
if(a%2==0){
console.log(a);
}
a=3;
if(a%2==0){
console.log(a);
}
a=4;
if(a%2==0){
console.log(a);
}
。。
a=10
if(a%2==0){
console.log(a);
}
這是打印10以內(nèi)的偶數(shù)。
在這個(gè)例子的下面，還有幾行語(yǔ)句可以達(dá)到相同的效果，但是要精簡(jiǎn)很多。
for(var i=1;i<=10;i++)
{
if(i%2==0)
{
console.log(i);
}
}
這個(gè)for語(yǔ)句就是Javascript的循環(huán)語(yǔ)句。
for語(yǔ)句的語(yǔ)法是這樣的：
for(初始化語(yǔ)句;條件語(yǔ)句;迭代操作)
{
//語(yǔ)句
}
在上面的例子中，就是：
var i=1 這是初始化語(yǔ)句，聲明了一個(gè)i的變量，數(shù)值是1
i<=10 條件是i小于等于10
i++ 就是每次執(zhí)行循環(huán)，i的值自動(dòng)加1，進(jìn)行迭代操作。
下面是例子1：
var count;
for(count=0;count<=10;count=count+1)
{
console.log("Count的值是"+count);
}
另外，還有幾種循環(huán)語(yǔ)句，這里也一并介紹一下
1、while語(yǔ)句
他的語(yǔ)法是：
while(條件)
{
//執(zhí)行語(yǔ)句
}
同樣是執(zhí)行打印1到10的值，while是這樣的（例子2）：
var count=0;
while(count<=10)
{
console.log("Count的值是"+count);
count=count+1; //這個(gè)地方是必須的，否則count一直為0，就會(huì)進(jìn)入死循環(huán)
}
2、do..while語(yǔ)句
它的語(yǔ)法是：
do {
//執(zhí)行語(yǔ)句
}while(條件)
同樣打印1到10的值（例子3）：
var count=0;
do {
console.log("Count的值是"+count);
count=count+1; //這個(gè)地方是必須的，否則count一直為0，就會(huì)進(jìn)入死循環(huán)
}while(count<=10);
最后一個(gè)例子是綜合第三節(jié)的if語(yǔ)句，來(lái)一個(gè)稍微復(fù)雜的應(yīng)用。
我們來(lái)求一下所有的“水仙花”數(shù)。
在百度百科里面，水仙花數(shù)的定義是這樣的：
水仙花數(shù)（Narcissistic number）也被稱為超完全數(shù)字不變數(shù)（pluperfect digital invariant, PPDI）、自戀數(shù)、自冪數(shù)、阿姆斯壯數(shù)或阿姆斯特朗數(shù)（Armstrong number），
水仙花數(shù)是指一個(gè) 3 位數(shù)，它的每個(gè)位上的數(shù)字的 3次冪之和等于它本身（例如：1^3 + 5^3+ 3^3 = 153）。
下面是具體的例子（例子4）：
var i;
var j;
var k;
for(var i=1;i<=9;i++){
for(j=1;j<9;j++){
for(k=1;k<9;k++){
var real_number=i*100+j*10+k;
if(i*i*i+j*j*j+k*K*k==real_number){
console("發(fā)現(xiàn)水仙花數(shù)："+real_number);
}
}
}}
今天就到這里。
程序中進(jìn)行有規(guī)律的重復(fù)性操作，需要用到循環(huán)語(yǔ)句。
先來(lái)看看生活中的一些場(chǎng)景：
（1）食堂阿姨打菜：接過(guò)顧客的餐盤→詢問(wèn)菜品→打菜→遞回餐盤，重復(fù)以上過(guò)程，直到所有顧客的菜都打完了。
（2）快遞員送快遞：查看送件地址→趕往目的地→電話告知收件人→收件人簽收→交快遞件，重復(fù)以上過(guò)程，直到所有需要送的快遞都處理完了。
（3）公交司機(jī)……
（4）作業(yè)流程……
以上場(chǎng)景都有一個(gè)共同的特點(diǎn)：有條件地重復(fù)地做一件事，每一次做的事情不同但類似。
程序是為了解決實(shí)際問(wèn)題的，實(shí)際問(wèn)題中存在著重復(fù)動(dòng)作，那么程序中也應(yīng)該有相應(yīng)的描述，這就是循環(huán)。
1.格式
for(var i=0;i<len;i++){
循環(huán)體
}2.案例：計(jì)算1+2+3+……+10
/*方案一*/ var sum1 = 1+2+3+4+5+6+7+8+9+10; /*方案二*/ var sum2 = 0; sum2 += 1; sum2 += 2; sum2 += 3; sum2 += 4; sum2 += 5; sum2 += 6; sum2 += 7; sum2 += 8; sum2 += 9; sum2 += 10;
但是這兩種方案的描述方式都不太理想，如果是要加到10000呢？
注意觀察方案二，它重復(fù)地做一件事（將一個(gè)數(shù)加到sum2中），每一次做的不同但類似。
我們希望能找到一種更好的描述方法
*方案三:改造方案二*/
var sum3 = 0;
var n = 1;
while(n <= 10){
sum3 += n;
n++;
}三、for循環(huán)的嵌套
1.語(yǔ)法
for(var i=0;i<=9;i++) {
for(var j=0;i<j;j++){
循環(huán)體;
}
循環(huán)體;
}2.案例：就如九九乘法表，雙重for循環(huán)，要領(lǐng)是內(nèi)存for循環(huán)從1開(kāi)始，不得大于上層i的值
for(var i=1;i<=9;i++) {
for(var j=1;j<=i;j++) {
document.write(i + '*' + j + '=' + i*j + ' ');
}
document.write("<br/>");
}1*1=1
2*1=2 2*2=4
3*1=3 3*2=6 3*3=9
4*1=4 4*2=8 4*3=12 4*4=16
5*1=5 5*2=10 5*3=15 5*4=20 5*5=25
6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81
??此賬號(hào)為華為云開(kāi)發(fā)者社區(qū)官方運(yùn)營(yíng)賬號(hào)，提供全面深入的云計(jì)算前景分析、豐富的技術(shù)干貨、程序樣例，分享華為云前沿資訊動(dòng)態(tài)
本文分享自華為云社區(qū)《JS中循環(huán)語(yǔ)句大集合丨【W(wǎng)EB前端大作戰(zhàn)】》，原文作者：hwJw19 。
JavaScript 中，一共給開(kāi)發(fā)者提供了一下幾種循環(huán)語(yǔ)句，分別是 while 循環(huán)，do…while 循環(huán)，for 循環(huán)，for Each，for…in 循環(huán)和 for…of 循環(huán)。
下面我們就通過(guò)本文來(lái)仔細(xì)分辨一下，各個(gè)循環(huán)的使用差異。
語(yǔ)法：
while (expr){
statement
}expr 為條件表達(dá)式，當(dāng) expr 為真時(shí)，執(zhí)行 statement 語(yǔ)句，執(zhí)行結(jié)束后，再次進(jìn)入下一輪循環(huán)，直到條件表達(dá)式為假時(shí)，跳出循環(huán)。
代碼示例：
var n = 1; //聲明并初始化循環(huán)變量
while(n <= 100){ //循環(huán)條件
n++; //遞增循環(huán)變量
if (n % 2 == 0) document.write(n + ""); //執(zhí)行循環(huán)操作
}語(yǔ)法：
do{
statement
} while(expr)do…while 循環(huán)與 while 循環(huán)很相似，區(qū)別在于，while 循環(huán)是先判斷再執(zhí)行，而 do…while 循環(huán)會(huì)先執(zhí)行一次語(yǔ)句，然后再開(kāi)始判斷循環(huán)。不論條件為真或者是假，都會(huì)執(zhí)行一次。
代碼示例：
var text = "" var i = 0;
do {
text += "<br>數(shù)字為 " + i; i++;
} while (i < 5);
document.getElementById("demo").innerHTML = text;語(yǔ)法：
for (expr 1; expr 2; expr 3)
{
statement
}?for 循環(huán)想必也是大家比較熟悉的一種循環(huán)方式了，for 循環(huán)主要用戶循環(huán)執(zhí)行一定次數(shù)的代碼塊，小括號(hào)中，是 for 循環(huán)的條件，花括號(hào)中，是循環(huán)條件為 true 時(shí)所需要執(zhí)行的語(yǔ)句。缺點(diǎn)是寫法比較麻煩。
示例代碼：
for (var i=0; i<5; i++) {
x=x + "該數(shù)字為 " + i + "<br>";
}語(yǔ)法：
array.forEach(function(currentValue, index, arr), thisValue)由于 for 循環(huán)的寫法比較繁瑣，因此數(shù)組提供了內(nèi)置的 forEach 方法，語(yǔ)法中的參數(shù) currentValue 是必填的，其他參數(shù)選填。forEach 語(yǔ)句的問(wèn)題在于，無(wú)法中途跳出 forEach 循環(huán)，break 命令或 return 命令都不能奏效。
代碼示例：
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
console.log(item);
});語(yǔ)法：
for (var in object) {
statement
} ?for…in 循環(huán)主要用于循環(huán)遍歷對(duì)象，可以獲取對(duì)象的鍵名，但是 for…in 并不適合遍歷數(shù)組，主要有如下原因：
1. 數(shù)組的鍵名是數(shù)字，但是..in 循環(huán)是以字符串作為鍵名“0”、“1”、“2”等等。
2. ..in 循環(huán)不僅遍歷數(shù)字鍵名，還會(huì)遍歷手動(dòng)添加的其他鍵，甚至包括原型鏈上的鍵。
3. 某些情況下，..in 循環(huán)會(huì)以任意順序遍歷鍵名。
代碼示例：
var person = {fname:"John", lname:"Doe", age:32};
var text = "";
var x;
for (x in person) {
text += person[x] + " ";
}語(yǔ)法：
for (variable of iterable) {
//要執(zhí)行的語(yǔ)句
}for...of 循環(huán)，是可以遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法，它可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對(duì)象（比如 arguments 對(duì)象、DOM NodeList 對(duì)象）、后文的 Generator 對(duì)象，以及字符串。讀取的是遍歷對(duì)象的鍵值。for...of 循環(huán)的優(yōu)點(diǎn)：
1. 有著同 for...in 一樣的簡(jiǎn)潔語(yǔ)法，但是沒(méi)有 for...in 那些缺點(diǎn)。
2. 不同于 forEach 方法，它可以與 break、continue 和 return 配合使用。
3. 提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口。
代碼示例：
const iterable = ['mini', 'mani', 'mo'];
for (const value of iterable) {
console.log(value);
}關(guān)于 JS 循環(huán)語(yǔ)法的相關(guān)內(nèi)容，就簡(jiǎn)單到這里了，歡迎大家溝通交流，批評(píng)指正。
點(diǎn)擊關(guān)注，第一時(shí)間了解華為云新鮮技術(shù)~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
