當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript - for 循环结构 与 数组
生活随笔
收集整理的這篇文章主要介紹了
JavaScript - for 循环结构 与 数组
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
循環結構
循環結構作用：代碼重復執行
1.1-for循環結構
- 1.for循環語法
- 2.執行步驟：
- 1.執行語句1（定義一個循環變量）
- 2.執行語句2，判斷語句2條件是否成立（條件表達式）
- 2.1 如果條件成立，則執行循環體代碼
- 執行語句3（循環變量自增），重復步驟2
- 2.2 如果不成立，結束循環，執行大括號后面的代碼
- 2.1 如果條件成立，則執行循環體代碼
- 2.執行語句2，判斷語句2條件是否成立（條件表達式）
- 1.執行語句1（定義一個循環變量）
- 3.for循環好處及注意點
- 好處：循環變量的聲明與循環變量自增在一個小括號中，可以更好的避免死循環
- 注意點：原則上語句1，語句2，語句3可以是任意代碼，但是不建議亂寫，因為會導致死循環
- 語句1：通常是定義循環變量
- 語句2：條件表達式
- 語句3：通常都是循環變量自增/自減（視需求而定
1.2-for循環練習(籮筐思想求和)
籮筐思想求和
? a.聲明空籮筐
? b.遍歷蘿卜堆數
? c.將蘿卜放入籮筐中
<!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>//4.求累加和/ 平均值 = 累加和/數量/* 籮筐思想 ： 三步法1.聲明空籮筐2.遍歷蘿卜堆數3.將蘿卜放入籮筐*///1.聲明空籮筐let sum = 0;// 2.遍歷蘿卜堆數for (let i = 1; i <= 100; i++) {console.log(i); // 遍歷出來 1 ~ 100// 3.將蘿卜放入籮筐sum += i;}console.log(sum);</script></body> </html>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只能用于循環結構語句
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呢？
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 - 二維數組及遍歷
二維數組：數組元素又是數組
◆ 一維數組：數組元素都是基礎數據類型
◆ 二維數組：數組元素都是一維數組
◆ 二維數組訪問：一維一層下標
◆ 一維訪問：數組變量[下標] 得到的是數組
◆ 二維訪問：數組變量[下標][下標]
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><!-- <div class="box"><div></div></div> --></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.語法：
- 執行步驟：
- 1.判斷條件是否成立
- 1.1 如果成立，執行循環體代碼，然后重復步驟1
- 1.2 如果不成立，結束循環，執行大括號后面的代碼
- 1.判斷條件是否成立
- 3.注意點
- （1）小括號中的語句，無論結果是什么都會轉換成布爾類型來判斷是否成立
- （2）避免寫一個死循環
do-while循環結構
- 1.語法:
- 2.執行過程
- 1.先執行循環體代碼
- 2.執行條件語句
- 如果結果為true，執行循環體代碼
- 如果為false，循環結束
- 3.重復步驟2
- 3.do-while和while實現的循環其實是一樣的，只有一個不同點：do-while循環不管怎樣先執行一次循環體代碼，然后再判斷條件
- while循環：先奏后斬（先判斷條件再執行循環體）
- do-while循環：先斬后奏（不管怎樣先執行一次循環體代碼，然后再判斷條件）
三種循環結構總結
- 1.原則上，三種循環結構語句之間可以互轉，只不過每一種語句的適用場景不一樣
- 2.最常用：for循環：適合循環次數固定
- 3.while循環：適合循環次數不固定
- 4.do-while循環：適合循環次數不固定，但是循環體代碼至少要執行一次
總結
以上是生活随笔為你收集整理的JavaScript - for 循环结构 与 数组的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于QT实现的图元拖曳、定点滚轮旋转和缩
- 下一篇： 久坐伤身 关爱程序员，从自己做起