當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript - for 循环结构与数组

發布時間：2023/12/14 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript - for 循环结构与数组小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

循環結構

循環結構作用：代碼重復執行

1.1-for循環結構

1.for循環語法

for( 語句1;語句2;語句3 ){循環體：需要反復執行的代碼; }

2.執行步驟：
- 1.執行語句1（定義一個循環變量）
  - 2.執行語句2，判斷語句2條件是否成立（條件表達式）
    - 2.1 如果條件成立，則執行循環體代碼
      - 執行語句3（循環變量自增），重復步驟2
    - 2.2 如果不成立，結束循環，執行大括號后面的代碼
3.for循環好處及注意點
- 好處：循環變量的聲明與循環變量自增在一個小括號中，可以更好的避免死循環
- 注意點：原則上語句1，語句2，語句3可以是任意代碼，但是不建議亂寫，因為會導致死循環

語句1：通常是定義循環變量
語句2：條件表達式
語句3：通常都是循環變量自增/自減（視需求而定

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>for循環</title></head><body><script>/* 1. for循環語法for(代碼1;代碼2;代碼3){循環體代碼};*///需求：打印三次大前端愛你們么么噠for (let i = 1; i <= 3; i++) {console.log("大前端愛你們么么噠");}/* for循環注意點：原則上代碼1，代碼2，代碼3可以寫任意代碼,但是一般不會亂寫代碼1 ：聲明循環變量代碼2 ：循環條件代碼3 ：循環變量自增*/</script></body></html> </html>

1.2-for循環練習(籮筐思想求和)

籮筐思想求和

? a.聲明空籮筐

? b.遍歷蘿卜堆數

? c.將蘿卜放入籮筐中

1.3-for循環練習(擂臺思想求最大/小值)

擂臺思想求最大/小值

? a.聲明擂主

? b.遍歷挑戰者

? c.依次與擂主PK，交換位置

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>for循環-擂臺思想求最大值</title></head><body><script>/* 擂臺思想：三步法1.聲明空擂主 : （第一次挑戰者無條件坐擂主）2.遍歷挑戰者3.依次和擂主PK*///5.求最大值與最小值//請用戶輸入5個數, 將最大的那個數打印出來// 求最大值:// 定義一個擂主:保存最大值 , 需要的是用戶的最大值,定義一個變量一定能夠被打贏(定義一個最小值) -Infinitylet max = -Infinity;// 打擂:5次 (for循環遍歷)for (let i = 0; i < 5; i++) {let user = +prompt(`請輸入第${i + 1}個數`);// console.log(i);// 依次和擂主Pkif (user > max) {// 交換擂主max = user;}}document.write(`您輸入的數字中最大的那個數是${max}`);//請用戶輸入5個數, 將最小的那個數打印出來// 求最小值//1.聲明空擂主 : （第一次挑戰者無條件坐擂主）let min = Infinity;//2.遍歷挑戰者(for 循環)for (let i = 1; i <= 5; i++) {let num = prompt("請輸入第" + i + "個挑戰者");//3.依次和擂主PKif (num < min) {// 交換擂主min = num;}}console.log(min);</script></body> </html>

1.4-break與continue關鍵字

1.break：結束整個語句
- break既可以用于循環結構也可以用于switch分支結構
2.continue：結束本次循環體，進入下一次循環判斷
- continue只能用于循環結構語句

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>break與continue關鍵字</title> </head> <body></body> <script>/*** break：結束整個語句* break既可以用于循環結構也可以用于switch分支結構* continue：結束本次循環體，進入下一次循環判斷* continue只能用于循環結構語句*///示例：吃包子：我買了十個包子，包子每次只能吃一個，需要循環吃十個//break：假如吃到第五個我吃飽了，后面的包子就都不用吃了//continue:假如吃到第五個吃出來小強，那我第五個不吃了，但是我沒吃飽，后面還是要繼續吃let sum = 0;for(let i = 1;i<=10;i++){// continue// if(i == 5) {// console.log ( "吃到小強了，這個包子我不吃了" );// continue;//結束本次循環體（后面的代碼不會執行），循環沒有結束，還是會依次執行語句3和語句2// };//breakif(i==5){console.log ( "我吃飽了，后面的包子都不想吃了" );break;//結束整個循環語句}console.log ( "我吃的是第" + i + "個包子" );}</script> </html>

1.5-循環次數不固定02：窮舉

窮舉：從1遍歷到無窮大，找出符合條件的數

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>循環次數不固定02：窮舉</title></head><body></body><script>//需求：有一群人，如果3個人站一排多出1個人，如果4個人站一排多出2個人，如果5個人站一排多出3個人//請問這群人有多少人for (let i = 1; i < Infinity; i++) {//從1循環到無窮大，也是一種死循環if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {console.log("人數為" + i);break; //找到答案，結束循環}}</script> </html>

1.6-數組遍歷

1.數組的遍歷：獲取數組中每一個元素的值，稱之為遍歷該數組
- 如果想要獲取數組中每一個元素的值，則需要通過循環語法來獲取
2.一般使用for循環來遍歷數組，只不過數組的遍歷是一種固定格式的for循環
3.固定循環語句格式:for(let i = 0; i < arr.length; i++) {// 數組遍歷的固定結構}
- 思考：為什么循環變量let i = 0 而不是1呢？

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>數組遍歷</title></head><body></body><script>/*** * 1.數組的遍歷：獲取數組中每一個元素的值，稱之為遍歷該數組* * 如果想要獲取數組中每一個元素的值，則需要通過循環語法來獲取* 2.一般使用for循環來遍歷數組，只不過數組的遍歷是一種固定格式的for循環* 3.固定循環語句格式:* `for(let i = 0; i < arr.length; i++) {* // 數組遍歷的固定結構* }`*/let arr = [10, 20, 30, 40, 50];for (let i = 0; i < arr.length; i++) {let item = arr[i]; //獲取數組的每一個元素console.log(item);}</script> </html>

1.7 - 翻轉數組

//真正使用,一行搞定 console.log( arr.reverse( ) );

1.7.1 - 翻轉數組(思維鍛煉)

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let arr = ["a", "b", "c", "d", "e"];// 0 1 2 3 4// 翻轉數組目標:['e','d','c','b','a']// 0 1 2 3 4// 簡單的思路解析// 1.創建一個新數組:空的// 2.從原數組最后開始讀取元素:讀取一個就放到新數組中// 分析:新數組放數據新數組[新數組.length] = 值// 分析:老數組如何從后面開始讀取數據? for循環的變量從 length - 1 到 0let newArr = [];for (let i = arr.length - 1; i >= 0; i--) {console.log(arr[i]);newArr[newArr.length] = arr[i];}console.log(newArr);</script> </html>

1.7.2 - 交換數組(思維鍛煉)

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let arr = ["a", "b", "c", "d", "e"];/* 1.2 交換法(1)遍歷數組一半(2)下標為 i元素與下標為 arr.length-1-i 元素交換*///1.遍歷數組的一半for (let i = 0; i < arr.length / 2; i++) {// 第一個與最后一個// i= 0 arr.length - 1// i= 1 arr.length - 1 - 1// i= 2 arr.length - 1 - 2// i === arr.length - 1 - iconsole.log(i); //0,1,2// a = arr[i] b = arr[arr.length - 1 - i]// let temp = a// a = b// b = temp//2. 下標為i元素和下標為arr.length-1-i元素交換let temp = arr[i]; // 01-定義一個新變量保存第 i 個位置的值arr[i] = arr[arr.length - 1 - i]; // 后面的覆蓋前面的arr[arr.length - 1 - i] = temp; //}console.log(arr);</script> </html>

1.8 - 二維數組及遍歷

二維數組：數組元素又是數組

◆ 一維數組：數組元素都是基礎數據類型
◆ 二維數組：數組元素都是一維數組
◆ 二維數組訪問：一維一層下標
◆ 一維訪問：數組變量[下標] 得到的是數組
◆ 二維訪問：數組變量[下標][下標]

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let angle = ["安琪拉", 18, "女", "仍個球"];let fox = ["妲己", 20, "女", "愛心"];let monkey = ["猴子", 22, "男", "棍子"];// 二維數組:將數組扔到數組里let hero = [angle, fox, monkey];console.log(hero);// 二維數組訪問// 1.訪問一維:數組變量[下標]console.log(hero[1]);// 2.訪問二維:在第一維的基礎上增加下標訪問即可數組變量[下標][下標]console.log(hero[1][0]);// 二維數組遍歷:循環里面套循環for (let i = 0; i < hero.length; i++) {// i 是下標,hero[i] 訪問元素:也是一個數組console.log(hero[i]);// hero[i] 是一個數組:可以遍歷for (let j = 0; j < hero[i].length; j++) {// hero[i] 是一個數組,j 是數組下標 ,訪問元素 hero[i][j]console.log(hero[i][j]);}}</script> </html>

1.9 - 數組形式訪問字符串

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>let str = "我愛你中國";console.log(str);// 字符串:本質的存在是數組,由下標和lengthconsole.log(str.length);console.log(str[0]);// 字符串具有恒定性:不可修改str[0] = "你";console.log(str); //無效// 變量可以被重新賦值:修改字符串就必須給字符串變量重新賦值str = "你愛我中國";console.log(str);// 總結// 以后但凡有 length 屬性的東西,一定可以用數組的形式去訪問(由下標):為開發者帶來便捷性// 能訪問不一定能修改(數組可以,其他都不行)</script> </html>

2.0 - 案例:

01-九九乘法表

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>// 需求:做九九乘法表// 九九乘法表 : 有行有列 (二維結構)for (let i = 1; i <= 9; i++) {// 循環:負責輸出內容// 列的數量跟行有關:第幾行就有幾列for (let j = 1; j <= i; j++) {// i 代表行, j 代表列document.write(`${i} * ${j} = ${i * j}  `);}// 換行document.write(`<br>`);}</script> </html>

02 - 動態生成柱狀圖

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {display: flex;align-items: flex-end;justify-content: space-evenly;width: 1200px;height: 400px;border: 3px solid rgb(241, 30, 30);}/* .box > div {width: 400px;height: 300px;background-color: rgb(12, 221, 236);} */</style></head><body></body><script>// 1.獲取用戶輸入let sum = +prompt("請輸入柱狀圖柱子的數量");// 柱子寬度let width = 1200 / (sum * 2 + 1);// 渲染大盒子一半document.write('<div class="box">');// 遍歷每一個柱子for (let i = 0; i < sum; i++) {// 柱子的高度,顏色rgb都隨機let h = Math.ceil(Math.random() * 400);let r = Math.round(Math.random() * 255);let g = Math.round(Math.random() * 255);let b = Math.round(Math.random() * 255);// 渲染柱子document.write(`<div style="width:${width}px;height:${h}px;background-color: rgb(${r}, ${g}, ${b});"></div>`);}// 結束渲染大盒子document.write("</div>");</script> </html>

03- for循環 - 起始值,結束值 for (; start <= end; start++)

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 100px;height: 100px;background-color: #6cf;float: left;margin: 10px;}</style></head><body></body><script>// 需求:用戶指定要生成的div次數// let user = +prompt("請輸入要生成的div數量");// for (let i = 0; i < user; i++) {// document.write("<div></div>");// }let start = +prompt("請輸入起始值:");let end = +prompt("請輸入結束值:");for (; start <= end; start++) {document.write("<div></div>");}</script> </html> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=, initial-scale=1.0" /><title>Document</title></head><body></body><script>// // 求 1 - 10 之間的所有整數之和// // 定義一個空框// let num = 0;// // 遍歷// for (let i = 1; i <= 10; i++) {// // 求和// num += i;// }// // 打印// console.log(num);let sum = 0;let start = +prompt("請輸入初始值");let end = +prompt("請輸入結束值");for (; start <= end; start++) {sum += start;console.log(start);}console.log(sum);</script> </html>

循環補充

while循環結構

1.語法：

while(條件 true/false){循環體/需要重復執行的代碼;}

執行步驟：
- 1.判斷條件是否成立
  - 1.1 如果成立，執行循環體代碼，然后重復步驟1
  - 1.2 如果不成立，結束循環，執行大括號后面的代碼
3.注意點
- （1）小括號中的語句，無論結果是什么都會轉換成布爾類型來判斷是否成立
- （2）避免寫一個死循環

do-while循環結構

1.語法:

do{循環體; }while( 條件 );

2.執行過程
- 1.先執行循環體代碼
- 2.執行條件語句
  - 如果結果為true，執行循環體代碼
  - 如果為false，循環結束
- 3.重復步驟2
3.do-while和while實現的循環其實是一樣的，只有一個不同點：do-while循環不管怎樣先執行一次循環體代碼，然后再判斷條件
- while循環：先奏后斬（先判斷條件再執行循環體）
- do-while循環：先斬后奏（不管怎樣先執行一次循環體代碼，然后再判斷條件）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>/* 1. 學習目標： do-while循環 2. 學習路線(1)復習while語法特點(2)學習do-while語法(3)介紹do-while語法應用場景*///1.while循環://let i = 1;// while(i > 5){// //循環條件不成立，循環體一次都不執行// console.log ( "哈哈哈哈" );// i++// }//2.do-while循環/**do-while語法：(用的很少)do{循環體;}while( 條件 );特點：無論如何先執行一次循環體，然后再去判斷條件*/let i = 1;do{console.log ( "呵呵呵呵呵" );i++;}while (i > 5);//while循環：先奏后斬（先判斷條件再執行循環體）//do-while循環：先斬后奏（不管怎樣先執行一次循環體代碼，然后再判斷條件）//3.do-while循環與while循環應用場景//無論如何需要先執行一次循環體，使用do-while代碼更簡潔//例子：讓用戶輸入賬號和密碼，如果輸入正確就登陸成功，如果輸入錯誤就讓他一直輸入//while循環實現// let username = prompt('請輸入賬號');// let password = prompt('請輸入密碼');//// while(username != 'admin' || password != '123456'){// username = prompt('請輸入賬號');// password = prompt('請輸入密碼');// }//do-while實現do{let username = prompt('請輸入賬號');let password = prompt('請輸入密碼');}while(username != 'admin' || password != '123456')</script> </body> </html> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>循環補充</title></head><body></body><script>// while循環: 解決不確定次數的循環// while (條件 true / false) {// 循環體 / 需要重復執行的代碼;// 一般, while循環都會結合break// }// 需求: 猜數字let rand = Math.ceil(Math.random() * 100); // 1-100// while循環: 不確定猜的次數let flag = true;// while (flag) {// // 死循環// let user = +prompt('請輸入0-100之間的數字')// if (user > rand) {// alert('猜大了')// } else if (user < rand) {// alert('猜小了')// } else {// alert('猜中了,就是' + rand)// // break // 結束循環// flag = false// }// }// 不論for循環還是while循環: 條件如果不滿足: 循環不執行for (; false; ) {console.log("1");}// 需求: 循環必須執行,哪怕只有一次?// do {// 循環體;// } while (條件);// 先干了再說do {console.log(2);} while (false);// do-while的特點: 保證循環體一定執行1次(最少)// 循環體執行的次數與條件判定的次數一樣// 總結: 三種循環的選擇// 1. 如果指定次數: for循環(有起始有結束)// 2. 如果不確定次數: while// for替代: for(;;){}// 3. 如果要求循環體必須執行: do-while// for替代: for(let flag = true; flag;){}</script> </html>

三種循環結構總結

1.原則上，三種循環結構語句之間可以互轉，只不過每一種語句的適用場景不一樣
2.最常用：for循環：適合循環次數固定
3.while循環：適合循環次數不固定
4.do-while循環：適合循環次數不固定，但是循環體代碼至少要執行一次

總結

以上是生活随笔為你收集整理的JavaScript - for 循环结构与数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于QT实现的图元拖曳、定点滚轮旋转和缩
下一篇：十年架构师带来的Spring源码解析，极