基本寫法:
for (var i = 0; i < array.length; i++) {
//使用 for 迴圈 (初始狀態;條件;更新內容)
console.log(i); //執行內容
}
迴圈會判斷條件相符時開始執行,若條件不符就不會執行,如果跑完了也會停止執行。
學 JavaScript 必寫「九九乘法表」
來做一個綜合練習,會使用以下方法:
建立一個 HTML 環境,這邊的 container 目的是讓畫面居中,為了讓九九乘法表呈現在 box 內,所以有設定了九個 box,
<body>
<div class="container">
<h1>九九乘法表</h1>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
設定兩個變數,a 為乘數, b 為被乘數,用陣列呈現資料,a 的乘數只有八個,原因是九九乘法表從 2 開始,
var a = [2, 3, 4, 5, 6, 7, 8, 9]; //乘數
var b = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //被乘數
var el = document.querySelectorAll(".box"); //選取全部的 box
var aLen = a.length;
// console.log(aLen); 結果為 8
var bLen = b.length;
// console.log(bLen); 結果為 9
在來使用 for 迴圈來計算乘數與被乘數,
for (var i = 0; i < aLen; i++) {
//乘數迴圈
var str = ""; // 預計將結果填入 str
for (var j = 0; j < bLen; j++) {
//被乘數迴圈
}
為什麼 b 的迴圈會包在 a 裡面呢?
因為是要用 a*b,讓 b 在 a 裡面跑九次,創造出九九乘法表的效果,因為要兩者相乘後要有一個數值,所以設定 var str = "",在計算結果後要丟進 str。
這個觀念很重要,要記起來。
再來就是要呈現九九乘法了,這時候來組標籤(變數加字串),a 陣列乘上 b 陣列,等於 a、b 陣列相乘,當中相乘與等於的符號是為了在網頁上呈現的,所以標示為字串。
var count = a[i] + "*" + b[j] + "=" + a[i] * b[j]; //組字串
// console.log(count); 結果為九九乘法表
為了讓 str 完整呈現 從 21=1 計算到 29=18 ,這時候就使用 str 加總的功能,把所有的組合完成後,變成<p>
標籤,丟回 str 裡面
str += "<div>" + count + "</div>"; //將結果套回 str
最後,就在 b 的迴圈裡呈現所有 a 變數中九九乘法表跑完的結果,並把這個結果透過剛剛變數 str 的設定,渲染到網頁上。
el[i].innerHTML = str; // 將 box 裡的乘數,透過 innerHTML 渲染於網頁
這樣就透過 JavaScript 的語法,完成了九九乘法表了!
當得到龐大的陣列資料時,透過迴圈來存取資料會輕鬆又省事,所以陣列跟迴圈常常會搭配使用。
倘若今天要查詢兩間店家的老闆姓名,拿到兩個陣列資料,程式碼如下:
var shops = [
{
captain: "Tim",
coke: 10,
cookie: 25,
egg: 170,
},
{
captain: "Min",
coke: 77,
cookie: 44,
egg: 58,
},
];
//陣列資料
之前學過透過陣列存取資料的方法為:
console.log(shops.length); //結果會得到 2
不過有時候在工作上得到資料無法預期有多少的資料,可以用下方寫法找出有多少筆資料:
var captainTotal = shops.length;
console.log(captainTotal); //結果會得到 2
使用迴圈存取陣列資料
透過迴圈存取陣列資料,程式碼如下:
var shops = [
{
captain: "Tim",
coke: 10,
cookie: 25,
egg: 170,
},
{
captain: "Min",
coke: 77,
cookie: 44,
egg: 58,
},
];
//陣列資料
for (i = 0; i < captainTotal; i++) {
console.log(shops[0].captain);
//帶入陣列長度的變數。
}
但迴圈這樣帶會有一個問題,上面得知 captainsTotal 的資料長度是 2,但是這樣迴圈會直接抓兩次第一個陣列的 captain 兩次,如下圖:
但今天的目標是要把兩個物件內的店長姓名找出來,所以會變成下方程式碼:
for (i = 0; i < captainTotal; i++) {
console.log(shops[i].captain);
//帶入陣列長度的變數。
//陣列裡改成 i
}
因為 captainTotal 資料有兩筆,所以迴圈會跑兩次,要記得在陣列中起始的數字為 0,不是 1,所以會跑兩次的原因是這樣。
這樣就會找到兩個物件中店長的名字,如下方畫面:
假設有三間賣炸雞的餐廳要被評鑑銷售量,套餐要超過 100 筆訂單的就可獲得獎品。
三家炸雞店的資料如下:
var shops = [
{
captain: "Tim",
chicken: 150,
coke: 200,
fries: 70,
set: 99,
},
{
captain: "Min",
chicken: 99,
coke: 77,
fries: 55,
set: 101,
},
{
captain: "Mike",
chicken: 105,
coke: 111,
fries: 75,
set: 130,
},
];
//陣列資料
因為只有三筆資料,可以很輕易地用眼睛看出來誰的套餐超過 100 套,但如果資料一多,就要使用迴圈了。
先用 length 查一下資料長度:
var setTotal = shops.length;
console.log(setTotal); //結果會得到 3
使用迴圈來找超過一百套的店家吧!
for (i = 0; i < setTotal; i++) {
if (shops[i].set > 100) {
console.log(shops[i].captain + "的套餐在本月賣超過 100 套,以資鼓勵");
}
畫面結果如下: