在JavaScript中，我們經(jīng)常需要去循環(huán)迭代方法操作數(shù)組對象等，常見等循環(huán)方法有 for、for in、for of、forEach等。

1.for循環(huán)

for循環(huán)是最基礎(chǔ)常見的一種循環(huán)，圓括號(hào)中需要三個(gè)表達(dá)式，由分號(hào)分隔，最后面是一個(gè)花括號(hào)的塊語句。

for (var i = 0; i <10; i++){
    if (i === 5) {
        continue; //跳出當(dāng)前循環(huán)
    } else if (i === 8) {
        break;    //結(jié)束循環(huán)
    }
    console.log(i);
}

for循環(huán)中的語句

continue 語句用來跳出本次循環(huán)，但會(huì)繼續(xù)執(zhí)行后面的循環(huán)。
break 語句用來結(jié)束循環(huán)，后面的循環(huán)不會(huì)再執(zhí)行。
return 并不能用來跳出for循環(huán)，return語句只能出現(xiàn)在函數(shù)體內(nèi)，它會(huì)終止函數(shù)的執(zhí)行，并返回一個(gè)指定的值。

使用for循環(huán)中遇到的問題

你可能會(huì)遇到在for循環(huán)使用一個(gè)異步操作，這也是一個(gè)很常見的面試題。在如下場景，你需要將一批id從0到9的用戶名數(shù)據(jù)請求回來，并將id做為key，name為value塞到一個(gè)對象里，代碼可能會(huì)是這樣的

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

最后users對象的數(shù)據(jù)結(jié)果并非我們所想的那樣，而是{10: '最后一個(gè)請求回來的用戶名'}。這是因?yàn)楫惒秸埱蟮脑�因，由于事件�?duì)列機(jī)制，for循環(huán)會(huì)先全部執(zhí)行完成，而異步請求會(huì)在后面的不定時(shí)間內(nèi)完成，并且調(diào)用then方法被事件隊(duì)列排在了后面，而此時(shí)在任意一個(gè)then方法內(nèi)i變量已經(jīng)在最后一次循環(huán)中被遞增到等于10，在不停的調(diào)用then方法時(shí)，users對象key為10的value會(huì)被一直改寫直到最后一個(gè)請求結(jié)束。

使用 let 塊級(jí)作用域解決

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

將遞增變量i使用let聲明即可解決，let 語句聲明一個(gè)塊級(jí)作用域的本地變量，花括號(hào)里是一個(gè)塊，每次循環(huán)都使用該塊級(jí)作用域中的變量，可以看作每次循環(huán)的塊都是相互隔離的，變量只會(huì)在該作用域內(nèi)生效。

使用函數(shù)閉包作用域解決

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

我們將異步方法包在一個(gè)立即執(zhí)行函數(shù)里面，通過var j聲明的變量去承接在該函數(shù)內(nèi)i變量的值，由于立即執(zhí)行函數(shù)形成了一個(gè)閉包作用域，變量j在每一個(gè)作用域內(nèi)都是單獨(dú)存在的。

使用函數(shù)參數(shù)作用域解決

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

將變量i作為立即執(zhí)行函數(shù)的參數(shù)傳遞進(jìn)來，參數(shù)也具有各自的作用域，函數(shù)參數(shù)只在函數(shù)內(nèi)起作用，是局部變量。

2.for in循環(huán)(es5)

for...in語句以任意順序遍歷一個(gè)對象的可枚舉屬性，遍歷的順序可能因?yàn)g覽器實(shí)現(xiàn)方式有所不同。所遍歷的內(nèi)容可以是一個(gè)對象、數(shù)組、字符串、arguments等。使用Object.defineProperty方法可以為對象屬性定義是否可以枚舉。

枚舉

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

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))

輸出結(jié)果

我們先使用對象字面量的方式定義量一個(gè)obj，然后使用Object.defineProperty方法定義key為d的一個(gè)不可枚舉屬性，然后修改原型鏈__proto__，為其賦值了name, age兩個(gè)屬性。

1. for in遍歷出除屬性名為d以外的所有可枚舉屬性，包括其原型鏈上的屬性

2. Object.keys方法會(huì)返回一個(gè)由對象的自身可枚舉屬性名(key)組成的數(shù)組，其原型鏈上的屬性沒有被包含

3. Object.getOwnPropertyNames方法會(huì)返回一個(gè)由對象的自身所有屬性名(key)組成的數(shù)組，包括可枚舉和不可枚舉的屬性

4. Object.values方法會(huì)返回一個(gè)由對象的自身可枚舉屬性的值(value)組成的數(shù)組

5. Object.entries方法會(huì)返回一個(gè)由對象的自身可枚舉屬性的鍵值對(key和value)組成的數(shù)組

for in會(huì)循環(huán)所有可枚舉的屬性，包括對象原型鏈上的屬性，循環(huán)會(huì)輸出循環(huán)對象的key，如果循環(huán)的是一個(gè)數(shù)組則會(huì)輸出下標(biāo)索引(index)。

in 運(yùn)算符

in 運(yùn)算符測試一個(gè)對象其自身和原型鏈中是否存在該屬性。

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) 循環(huán)可迭代對象

for of循環(huán)可迭代對象（包括 Array，Map，Set，String，TypedArray，類數(shù)組的對象（比如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不能循環(huán)普通對象({key: value})

2. for of不會(huì)將循環(huán)對象中自定義的屬性內(nèi)容循環(huán)出來

3. for in 是遍歷鍵名(key或index)，而for of是遍歷鍵值(value)。

forEach、map 循環(huán)

forEach() 方法對數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)，其中函數(shù)有三個(gè)參數(shù)，依次為：當(dāng)前循環(huán)項(xiàng)的內(nèi)容、當(dāng)前循環(huán)的索引、循環(huán)的數(shù)組。

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() 方法會(huì)依次循環(huán)每一項(xiàng)，并且返回結(jié)果映射組成一個(gè)新的數(shù)組。

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

使用forEach、map不能中斷循環(huán)，方法會(huì)將每項(xiàng)內(nèi)容都執(zhí)行完成才會(huì)結(jié)束循環(huán)。

使用every或 some 提前結(jié)束循環(huán)

every循環(huán)當(dāng)返回false時(shí)循環(huán)即會(huì)結(jié)束， some方法在循環(huán)返回true時(shí)結(jié)束循環(huán)，利用這個(gè)特性使用every和some方法都可以跳出循環(huán)。

const arr = [1, 2, 3, 4, 5];
arr.every(function(value){
   console.log(value);
   if(value === 3) {
   //every 循環(huán)當(dāng)返回false時(shí)結(jié)束循環(huán)
       return false;
   }
   return true //every 循環(huán)需要返回true，沒有返回值循環(huán)也會(huì)結(jié)束
});

arr.some(function(value){
   console.log(value);
   if(value === 3) {
   //some 循環(huán)當(dāng)返回true時(shí)結(jié)束循環(huán)
       return true;
   }
});

以上就是JavaScript中 for、for in、for of、forEach的用法小結(jié)（附代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！