JavaScript中 for、for in、for of、forEach等使用總結

在JavaScript中，咱們常常須要去循環迭代方法操做數組對象等，常見等循環方法有 for、for in、for of、forEach等。

1.for循環

for循環是最基礎常見的一種循環，圓括號中須要三個表達式，由分號分隔，最後面是一個花括號的塊語句。

for (var i = 0; i <10; i++){
	if (i === 5) {
		continue; //跳出當前循環
	} else if (i === 8) {
		break;    //結束循環
	}
	console.log(i);
}
複製代碼

for循環中的語句

continue 語句用來跳出本次循環，但會繼續執行後面的循環。
break 語句用來結束循環，後面的循環不會再執行。
⚠️return 並不能用來跳出for循環，return語句只能出如今函數體內，它會終止函數的執行，並返回一個指定的值。

使用for循環中遇到的問題

你可能會遇到在for循環使用一個異步操做，這也是一個很常見的面試題。在以下場景，你須要將一批id從0到9的用戶名數據請求回來，並將id作爲key，name爲value塞到一個對象裏，代碼可能會是這樣的

var users = {};
for (var i = 0; i < 10; i++) {
  ajax.get(`/api/userName/${i}`).then(res => {
  	users[i] = res.name;
  });
}
複製代碼

最後users對象的數據結果並不是咱們所想的那樣，而是{10: '最後一個請求回來的用戶名'}。這是由於異步請求的緣由，因爲事件隊列機制，for循環會先所有執行完成，而異步請求會在後面的不定時間內完成，而且調用then方法被事件隊列排在了後面，而此時在任意一個then方法內i變量已經在最後一次循環中被遞增到等於10，在不停的調用then方法時，users對象key爲10的value會被一直改寫直到最後一個請求結束。

使用 let 塊級做用域解決

var users = {};
for (let i = 0; i < 10; i++) {
  ajax.get(`/api/userName/${i}`).then(res => {
  	users[i] = res.name;
  });
}
複製代碼

將遞增變量i使用let聲明便可解決，let 語句聲明一個塊級做用域的本地變量，花括號裏是一個塊，每次循環都使用該塊級做用域中的變量，能夠看做每次循環的塊都是相互隔離的，變量只會在該做用域內生效。

使用函數閉包做用域解決

var users = {};
for (var i = 0; i < 10; i++) {
  (function () {
  	var j = i;
  	ajax.get(`/api/user/${j}`).then(res => {
  	  users[j] = res.name;
 	});
  }());
}
複製代碼

咱們將異步方法包在一個當即執行函數裏面，經過var j聲明的變量去承接在該函數內i變量的值，因爲當即執行函數造成了一個閉包做用域，變量j在每個做用域內都是單獨存在的。

使用函數參數做用域解決

var users = {};
for (var i = 0; i < 10; i++) {
  (function (value) {
  	ajax.get(`/api/user/${value}`).then(res => {
  	  users[value] = res.name;
 	});
  }(i));
}
複製代碼

將變量i做爲當即執行函數的參數傳遞進來，參數也具備各自的做用域，函數參數只在函數內起做用，是局部變量。

2.for in循環(es5)

for...in語句以任意順序遍歷一個對象的可枚舉屬性，遍歷的順序可能因瀏覽器實現方式有所不一樣。所遍歷的內容能夠是一個對象、數組、字符串、arguments等。使用Object.defineProperty方法能夠爲對象屬性定義是否能夠枚舉。

枚舉

在JavaScript中，對象的屬性分爲可枚舉和不可枚舉之分，它們是由屬性的enumerable值決定的。可枚舉性決定了這個屬性可否被for…in查找遍歷到。對象的propertyIsEnumerable方法能夠判斷此對象是否包含某個屬性，而且返回這個屬性是否可枚舉。
Object, Array, Number等內置的方法和屬性都是不可枚舉的

const obj = {};
Object.defineProperty(obj, 'city', {value: '北京', enumerable: false});
const isEnumerable = obj.propertyIsEnumerable('city');
console.log(obj);           // {city: "北京"}
console.log(isEnumerable);  //false
複製代碼

for...in能夠遍歷可枚舉但對象，包括不是它自己但存在於原型鏈上的屬性。

const obj = {a:1, b:2, c:3};
Object.defineProperty(obj, 'd', {value: 4, enumerable: false})
obj.__proto__ = {name: 'ricky', age: '25'}

console.log(obj)

console.log('=====for in=======')
for (var prop in obj) {
  console.log(prop, obj[prop]);
}
console.log('=====Object.keys=======')
console.log(Object.keys(obj))
console.log('=====Object.getOwnPropertyNames=======')
console.log(Object.getOwnPropertyNames(obj))
console.log('=====Object.values=======')
console.log(Object.values(obj))
console.log('=====Object.entries=======')
console.log(Object.entries(obj))
複製代碼

輸出結果

binlive前端開發,web開發,node,vue,react,webpack

咱們先使用對象字面量的方式定義量一個 obj，而後使用 Object.defineProperty方法定義key爲 d的一個不可枚舉屬性，而後修改原型鏈 __proto__，爲其賦值了 name, age兩個屬性。

1. for in遍歷出除屬性名爲d之外的全部可枚舉屬性，包括其原型鏈上的屬性
2. Object.keys方法會返回一個由對象的自身可枚舉屬性名(key)組成的數組，其原型鏈上的屬性沒有被包含
3. Object.getOwnPropertyNames方法會返回一個由對象的自身全部屬性名(key)組成的數組，包括可枚舉和不可枚舉的屬性
4. Object.values方法會返回一個由對象的自身可枚舉屬性的值(value)組成的數組
5. Object.entries方法會返回一個由對象的自身可枚舉屬性的鍵值對(key和value)組成的數組

for in會循環全部可枚舉的屬性，包括對象原型鏈上的屬性，循環會輸出循環對象的key，若是循環的是一個數組則會輸出下標索引(index)。

in 運算符

in 運算符測試一個對象其自身和原型鏈中是否存在該屬性。

const obj = {name: 'ricky'};
Object.defineProperty(obj, 'city', {value: '北京', enumerable: false})
obj.__proto__ = {age: '25'}

console.log('name' in obj);   // true
console.log('city' in obj);   // true
console.log('age' in obj);    // true
console.log('sex' in obj);    // false
複製代碼

for of(es6) 循環可迭代對象

for of循環可迭代對象（包括 Array，Map，Set，String，TypedArray，類數組的對象（好比arguments對象、DOM NodeList 對象）、以及Generator生成器對象等）。

const array = [{a: 1}, {b: 2}, {c: 3}];
array.name = 'ricky';

console.log(array)
console.log('=====for of=======')
for (var prop of array) {
  console.log(prop);
}
console.log('=====for in=======')
for (var prop in array) {
  console.log(prop);
}
複製代碼

for of 與 for in 不一樣處

1. 與for in不一樣的是，for of不能循環普通對象({key: value})
2. for of不會將循環對象中自定義的屬性內容循環出來
3. for in 是遍歷鍵名(key或index)，而for of是遍歷鍵值(value)。

forEach、map 循環

forEach() 方法對數組的每一個元素執行一次提供的函數，其中函數有三個參數，依次爲：當前循環項的內容、當前循環的索引、循環的數組。

const array = ['a', 'b', 'c'];
array.forEach(function(value, index, data) {
	console.log(value, index, data);
});
// 輸出
// a 0 ["a", "b", "c"]
// b 1 ["a", "b", "c"]
// c 2 ["a", "b", "c"]
複製代碼

map() 方法會依次循環每一項，而且返回結果映射組成一個新的數組。

const array = [1, 2, 3];
const newArray = array.map(function(value, index, data) {
	return value * 2;
});
console.log(newArray);
//輸出 [2, 4, 6]
複製代碼

使用forEach、map不能中斷循環，方法會將每一個每項內容都執行完成纔會結束循環。

使用every或 some 提早結束循環

every循環當返回false時循環即會結束， some方法在循環返回true時結束循環，利用這個特性使用every和some方法均可以跳出循環。

const arr = [1, 2, 3, 4, 5];
arr.every(function(value){
   console.log(value);
   if(value === 3) {
   //every 循環當返回false時結束循環
       return false;
   }
   return true //every 循環須要返回true，沒有返回值循環也會結束
});

arr.some(function(value){
   console.log(value);
   if(value === 3) {
   //some 循環當返回true時結束循環
       return true;
   }
});
複製代碼