JS循環——for循環

JS中的循環有不少，今天咱們簡單說一下for循環及它和for in循環的區別;

1、for循環

一、做用

• 一輪一輪的重複作某一件事情

二、項目中的使用狀況

• 循環一個集合或者控制循環處理的次數，每一輪循環都控制相關的事情執行一遍

三、語法

for(設置初始值;設置循環執行的條件,控制循環次數;每一輪循環結束後處理的事情[步長累加]){
	//=>循環體（每一輪循環要作的事情）		 
}
複製代碼

四、操做步驟

• 一、設置初始值
• 二、驗證條件（條件不成立循環結束）
• 三、循環體
• 四、步長累加
• 五、再次驗證條件
• 六、循環體
• ...

五、例題詳解

-1).

for (var i = 0; i < 5; i++) {
	console.log(`本輪循環i的值是：${i}`);
}
console.log(`循環結束後，此時的i已經變爲：${i}`);

/* * 初始值：i=0 * 0<5 成立的 * 0<3成立 i++ i=1 =>1 * i+=2 i=3 * 3<5 成立的 * 3<3 不成立 =>3 * i+=2 i=5 * 5<5 不成立 循環結束 */
複製代碼

-2).

for (var i = 0; i < 5; i += 2) {
	if (i < 3) {
		i++;
	}
	console.log(`本輪循環i的值是：${i}`);//=> 1 , 3
}
console.log(`循環結束後，此時的i已經變爲：${i}`);//=> 5
複製代碼

-3). 此題須要注意的是，

• 循環體中能夠不定義初始值，但必須用分號隔開（佔位），
• 且循環體中變量在全局做用域下可查詢，
• 步長累加也可省略，一樣必須用分號佔位

var n = 10;
for (; n > 0;) {
	if (n > 5) {
		n -= 2;
	} else {
		n -= 3;
	}
}
console.log(`循環結束後，此時的i已經變爲：${n}`);  //=>-2
複製代碼

2、循環中可能出現的兩個關鍵字break和continue

一、break

• 強制結束整個循環
• 循環體中一旦遇到break ，整個循環都結束了，break 下面代碼不在執行，步長累計也不在執行

for (var i = 0; i < 5; i++) {
	if (i > 3) {
		// i=4 的時候，遇到了break，此時循環結束
		break;
	}
	console.log(`本輪循環i的值是：${i}`); //=> 0 1 2 3 
}
console.log(`循環結束後，此時的i已經變爲：${i}`); //=>4
複製代碼

二、continue

• 結束本輪循環，下一輪繼續
• 循環體中一旦遇到continue ，本輪循環結束，continue 下面代碼不在執行，可是步長累計會執行

for (var i = 0; i < 5; i++) {
	if (i > 2) {
		i += 1;
		//=>i=3 i++ =>i=4 遇到continue：本輪循環結束（下面輸出不執行，可是i++會執行）
		continue; 
	}
	console.log(`本輪循環i的值是：${i}`); //=>0 1 2 
}
console.log(`循環結束後，此時的i已經變爲：${i}`); //=>5
複製代碼

for (var i = 0; i < 10; i++) {
	if (i >= 2) {
		i += 2;
		continue;
	}
	if (i >= 6) {
		i--;
		break;
	}
	i++;
	console.log(i); //=>1
}
console.log(i); //=>11
複製代碼

3、for 循環與for in循環的區別及應用

一、for 循環應用

• 遍歷（循環 / 迭代）數組中的每一項：由於數組有索引和length屬性，因此咱們可以知道循環次數，也能基於索引獲取對應項，使用FOR循環就能夠解決

var arr = [10, 20, 30, 40, 50];
for (var i = 0; i < arr.length; i++) {
	// arr.length = 5
	// 第一輪循環 i=0
	arr[0]
	// 第二輪循環 i=1
	arr[1]
	// ....
	// 第五輪循環 i=4
	arr[4]
	每一輪循環i變量存儲的值就是咱們當前這一輪想獲取數組中當前項的索引

	console.log(arr[i]);
}
複製代碼

二、for in 循環

• 遍歷對象中的每個屬性：咱們沒法直接獲取到對象中有多少個屬性（ES6中的Object.keys除外），也就沒法知道循環多少次，因此沒法使用FOR循環；真實項目中遍歷對象咱們基於FOR IN循環；

• 語法：

  • for（var key in obj）{...}
    • 建立變量（存儲的是屬性） in 對象
    • 當前對象中有多少個可枚舉的屬性，就能循環多少次
    • key變量存儲的是每一次循環的屬性名
      • obj[key]獲取key變量對象屬性名的屬性值

  var obj = {
  	name: '小明',
  	age: 18,
  	address: '北京市'
  };
  for (var key in obj) {
  	console.log(`本輪循環，屬性名：${key}，屬性值：${obj[key]}`);
  }
  複製代碼

  

• 注意：

  • FOR IN遍歷的時候，是優先按照從小到大的機制遍歷數字屬性的

  var obj = {
  	name: '小明',
  	age: 10,
  	10: 100,
  	0: 10
  };
  for (var key in obj) {
  	// 0 10 name age
  	console.log(`本輪循環，屬性名：${key}，屬性值：${obj[key]}`);
  }
  複製代碼

  

思惟導圖