1. 程式人生 > >循環語句和數組

循環語句和數組

繼續 開始 prompt == word 案例 取數 密碼 就是

1. 循環語句

在javascript中,循環語句有三種,while、do..while、for循環。

1.1. while循環

基本語法:

//當循環條件為true時,執行循環體,
//當循環條件為false時,結束循環。
while(循環條件){
  //循環體
}

代碼示例:

//計算1-100之間所有數的和
//初始化變量
var i = 1;
var sum = 0;
while(i <= 100){//判斷條件
  sum += i;//循環體
  i++;//自增
}
console.log(sum);

1.2. 斷點調試

斷點調試是指自己在程序的某一行設置一個斷點,調試時,程序運行到這一行就會停住,然後你可以一步一步往下調試,調試過程中可以看各個變量當前的值,出錯的話,調試到出錯的代碼行即顯示錯誤,停下。

調試步驟:

瀏覽器中按F12-->sources-->找到需要調試的文件-->在程序的某一行設置斷點

調試中的相關操作:

Watch:監視,通過watch可以監視變量的值的變化,非常的常用。
F10:程序單步執行,讓程序一行一行的執行,這個時候,觀察watch中變量的值的變化。
F8:跳到下一個斷點處,如果後面沒有斷點了,則程序執行結束。

tips: 監視變量,不要監視表達式,因為監視了表達式,那麽這個表達式也會執行。

1.3. do..while循環

do..while循環和while循環非常像,二者經常可以相互替代,但是do..while的特點是不管條件成不成立,都會執行一次。

基礎語法:

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

代碼示例:

//初始化變量
var i = 1;
var sum = 0;
do{
  sum += i;//循環體
  i++;//自增
}while(i <= 100);//循環條件

思考:

1. 循環輸入賬號密碼的案例用do..while怎麽寫?
2. 循環表白的案例用do..while怎麽寫?
// var i = 1; // var sum = 0; // while(i <= 100){ // sum += i;//sum =sum + i; // i++; // } // console.log(sum) // var i = 1; // var sum = 0; // do { // sum = sum + i; // i++; // } while (i <= 100); // console.log(sum); // var usename = prompt("請輸入用戶名"); // var password = prompt("請輸入密碼"); // while(usename != "admin" || password != "123456"){ // usename = prompt("請輸入用戶名"); // password = prompt("請輸入密碼"); // } // do { // var usename = prompt("請輸入用戶名"); // var password = prompt("請輸入密碼"); // } while (usename != "admin" || password != "123456"); // var love = prompt("請說你愛我y/n"); // while(love != "y"){ // love = prompt("請說你愛我y/n"); // } // do{ // var love = prompt("請說你愛我y/n"); // }while(love != "y"); // alert("我也很愛我自己")

1.4. for循環(重點)

寫while循環的經常會忘記自增,for循環其實是while循環演化過來的,語法更加的簡潔明了,使用非常的廣泛。

for循環語法:

//主要for循環的表達式之間用的是;號分隔的,千萬不要寫成,
for(初始化表達式;判斷表達式;自增表達式){
  //循環體
}

執行順序:1243 ---- 243 -----243(直到循環條件變成false)

  1. 初始化表達式
  2. 判斷表達式
  3. 自增表達式
  4. 循環體

for循環代碼示例:

//計算1-100之間所有數的和
var sum = 0;
for(var i = 1; i <= 100; i++){
  sum += i;
}

思考1:

1 求1-100之間所有數的和、平均值
var sum = 0; // // for(var i = 1; i <= 100; i++){ // sum += i; // } // console.log(sum); // var average = sum/100; // console.log(average);
2 求1-100之間所有數的乘積
var product = 1; // for(var i = 2;i <= 100;i++){ // product = product * i; // } // console.log(product);
3 計算1-100之間能3整除的數的和
var sum = 0; // for(i = 1;i <= 100;i++){ // if(i % 3 == 0){ // sum = sum +i; // } // } // console.log(sum); // 1680
4 計算1-100之間不能被7整除的數的和
var sum = 0; for(i = 1;i <= 100;i++){ if(i % 7 != 0){ sum = sum +i; } } console.log(sum); //4315

思考2:

5 求1-100之間所有偶數的和
6 求1-100之間所有奇數的和
7 同時求1-100之間所有偶數和奇數的和
var oddsum = 0; //奇數和 var evensum = 0; //偶數和 for(i = 1; i <= 100; i++){ if(i % 2 == 0){ evensum += i; } if(i % 2 != 0){ oddsum += i; } } console.log(evensum); console.log(oddsum);

思考3:

1 打印正方形
2  打印直角三角形
3 打印9*9乘法表
for(var i = 1;i <= 9; i++){ for(var j = 1;j <= i;j++){ document.write(j + "+" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;") } document.write("<br/>") }

思考4:

1. 本金10000元存入銀行,年利率是千分之三,每過1年,將本金和利息相加作為新的本金。計算5年後,獲得的本金是多少?
var money = 10000; var rate = 0.003; for (var i = 1; i <= 5; i++) { money = money + money * rate; } console.log(money);

2. 有個人想知道,一年之內一對兔子能繁殖多少對?於是就築了一道圍墻把一對兔子關在裏面。已知一對兔子每個月可以生一對小兔子,而一對兔子從出生後第3個月起每月生一對小兔子。假如一年內沒有發生死亡現象,
那麽,一對兔子一年內(12個月)能繁殖成多少對? 
   兔子的規律為數列,1,1,2,3,5,8,13,21
// var n1 = 1; // var n2 = 1; // var sum = 0; // for(var i = 3;i <= 12;i++ ){ // sum = n1 + n2; // n1 = n2; // n2 = sum; // } // console.log(sum);

1.5. break和continue

break:立即跳出整個循環,即循環結束,開始執行循環後面的內容(直接跳到大括號)

跳出小循環 // for(var i = 0; i < 20; i ++){ // console.log("i循環中的內容" + i); // var flag = false; // for(var j = 0; j < 20; j ++){ // if(j == 10){ // flag = true; // break; // } // console.log("j循環中的內容" + j); // } // if(flag){ // break; // } // } 跳出大循環 // iloop: // for(var i = 0; i < 20; i ++){ // console.log("i循環中的內容" + i); // for(var j = 0; j < 20; j ++){ // if(j == 10){ // break iloop; // } // console.log("j循環中的內容" + j); // } // }

continue:立即跳出當前循環,繼續下一次循環(跳到i++的地方)

思考1:

//輸出結果是什麽?
for(var i = 1; i <=10; i++) {
  if(i == 5){
    continue;
  }

  if(i == 7){
    break;
  }
  console.log(i);
}   (1,2,3,4,6)

思考2:

1. 求1-100之間不能被7整除的整數的和(用continue)
2. 求200-300之間所有的奇數的和(用continue)
var sum = 0; for (var i = 200; i <= 300; i++) { if (i % 2 == 0) { continue; } sum = sum + i; } console.log(sum);

3. 求200-300之間第一個能被7整數的數(break)

1.6. 總結

  1. 循環有很多種,但是以後用得最多的是for循環
  2. 當不明確循環次數的時候,可以使用while循環
  3. 當無論如何都要執行一次代碼的時候,可以使用do..while循環。
  4. 循環可以相互替代。

2. 數組

所謂數組,就是將多個元素(通常是同一類型)按一定順序排列放到一個集合中,那麽這個集合我們就稱之為數組。

思考:

為什麽要有數組?
1. 我們知道,一個變量能夠存儲一個值,當我們想要存儲多個值的時候,就可以使用數組。比如存儲一個班級裏面所有學生的姓名。
2. 使用數組可以對多個相同類型的值統一的管理,存儲起來方便,操作的時候也會很方便。

2.1. 創建數組

在javascript數組是一個有序的列表,可以在數組中存放任意的數據,並且數組的長度可以動態的調整。

通過構造函數創建數組

var arr = new Array();//創建了一個空數組
var arr = new Array("zs","ls","ww");//創建了一個數組,裏面存放了3個字符串
var arr = new Array(1,2,3,4);//創建了一個數組,裏面存放了4個數字
var arr = new Array(5);//長度為5的數組

通過數組字面量創建數組

var arr1 = []; //創建一個空數組
var arr2 = [1, 3, 4]; //創建一個包含3個數值的數組,多個數組項以逗號隔開
var arr3 = ["a", "c"]; // 創建一個包含2個字符串的數組

2.2. 數組的下標與長度

數組的下標:數組是有序的,數組中的每一個元素都對應了一個下標,下標是從0開始的

var arr = ["zs", "ls", "ww"];
arr[0];//下標0對應的值是zs
arr[3];//下標3對應的值是ww

數組的長度:跟字符串一樣,數組有一個length屬性,指數組中存放的元素的個數。

var arr = ["zs", "ls", "ww"];
arr.length;//這個數組的長度是3
//空數組的長度是0

下標與長度的關系:最大的下標 = length - 1

2.3. 數組的賦值與取值

數組的取值

//格式:數組名[下標]
//功能:獲取數組對應下標的那個值,如果下標不存在,則返回undefined。
var arr = ["red", "green", "blue"];
arr[0];//red
arr[2];//blue
arr[3];//這個數組的最大下標為2,因此返回undefined

數組的賦值

//格式:數組名[下標] = 值;
//如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給數組新增一個元素。
var arr = ["red", "green", "blue"];
arr[0] = "yellow";//把red替換成了yellow
arr[3] = "pink";//給數組新增加了一個pink的值

思考:如何給一個數組增加新的元素?

1. 把1-100之間所有的數,放到數組中
var arr = new Array(); for(var i = 1;i <= 100;i++ ){ // arr[i-1] = i; arr.push(i); } console.log(arr);
2. 把1-100之間所有的奇數,放到數組中
var arr = []; for(i = 1;i <= 100;i++){ if(i % 2 !=0){ // arr[arr.length] = i; arr.push(i); } } console.log(arr);
3. 把1-100之間能被3整數的數字,存到數組中
var arr = []; for(i = 1;i <= 100;i++){ if(i % 3 == 0){ // arr[arr.length] = i; arr.push(i); } } console.log(arr);

2.4. 數組的遍歷

遍歷:遍及所有,對數組的每一個元素都訪問一次就叫遍歷。

數組遍歷的基本語法:

for(var i =0; i < arr.length; i++) {
    //數組遍歷的固定結構
}

思考1:

var arr = [298, 1, 3, 4, 6, 2, 23, 88,77,44];
1 求一組數中的所有數的和跟平均值
var sum = 0; for(i = 0 ;i < arr.length;i++){ sum = sum + arr[i]; } console.log(sum); console.log(sum / arr.length);
2 求一組數中的最大值
var max = arr[0]; for(i = 0 ;i < arr.length;i++){ if(arr[i] > max){ max = arr[i]; } } console.log(max);
3 求一組數中的最小值和最小值所在的位置
var min = arr[0]; var index = 0; for(i = 0 ;i < arr.length;i++){ if(arr[i] < min){ min = arr[i]; index = i; } } console.log(min); console.log(index);

4 求一組數中的最大值和最小值以及所在位置
var arr = ["a", "bb", "ccc", "dddd"]; // var arr1 = []; // for (var i = arr.length - 1; i >= 0; i--) { // arr1.push(arr[i]); // } // console.log(arr1);

思考2:

var arr = ["a", "bb","ccc","dddd"];
1 將字符串數組用|或其他符號分割
var arr = ["a", "bb", "ccc", "dddd"]; var str = ""; for(i = 0;i < arr.length; i++){ if(i == arr.length - 1){ str = str + arr[i] }else{ str = str + arr[i] + "|"; } } console.log(str);

2 有一個字符串數組,求字符串數組中每項的長度,並把長度的數值存儲到新的數組中
var arr = ["a", "bb", "ccc", "dddd"]; var len = 0; var arr1 = []; for(i = 0; i < arr.length; i++){ arr1.push(arr[i].length); } console.log(arr1);

3 將數組中值為0的項去掉,將不為0的值存入一個新的數組
var arr = [1, 0, 0, 2, 6, 8, 0, 10, 0, 22]; var arr1 = []; for(var i = 0; i < arr.length; i++){ if(arr[i] != 0){ arr1.push(arr[i]); } } console.log(arr1);

4 讓一個數組倒敘保存另一個數組中的每一項( 倒著遍歷)

3. 冒泡排序

  1. var arr = [65, 97, 76, 13, 27, 49, 58] var ci = 0; var tang = 0; for (var i = 0; i < arr.length - 1; i++) { tang++; for (var j = 0; j < arr.length - 1 - i; j++) { ci++; if (arr[j] > arr[j + 1]) { var temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp; } } } console.log(arr); console.log(ci); console.log(tang); 2.完成版本
    var arr = [65, 97, 76, 13, 27, 49, 58];    var ci = 0;    var tang = 0;     for (var i = 0; i < arr.length - 1; i++) {      var flag= true;     tang++;      for (var j = 0; j < arr.length - 1 - i; j++) {      if (arr[j] > arr[j + 1]) {      var temp = arr[j];      arr[j] = arr [j + 1];      arr[j + 1] = temp;      flag= false;      }      ci++;      }      if (ygs == true) {      break;      }      } console.log(arr); console.log(tang); console.log(ci);

【數組去重】

var arr = [1, 2, 3, 5, 6, 7, 2, 3, 54, 645, 64, 23, 42, 342, 4, 24, 23, 42, 42, 42]; var newArr = []; var ci = 0; var tang = 0; for (var i = 0; i < arr.length; i++) { //需要判斷arr[i] 在newArr中是否存在 var flag = true;//假設不存在 tang++; for (var j = 0; j < newArr.length; j++) { if (arr[i] == newArr[j]) { flag = false; } ci++; } if (flag) { newArr.push(arr[i]); } } console.log(ci); console.log(tang); console.log(newArr);

【計算一個數是幾位數】

var num = +prompt("請輸入一個數字"); //1 1/10=0.1 = 0 //21 21/10=2/10 = 0 //321 321/10 = 32/10 = 3/10 = 0 //count用來記錄位數 var count = 0; while(num != 0){ num = parseInt(num/10); count++; } console.log(count);

【將12345轉換成54321】

var num = +prompt("請輸入一個數字"); //12345 var str = ""; while(num != 0){ var yu = num%10; str = str + yu; num = parseInt(num/10); } console.log(+str);

循環語句和數組