js循環的幾種方式總結

前言

只描述了一些最基本的用法，和一些可能遇到的問題。一些細節，或者特殊寫法之類的，沒有。

1.for循環

最基本的循環方式，很少說。可是我在其它某篇文章上，聽別人說，這種最基本的循環纔是速度最快的，效率最高的。(就是這https://www.jb51.net/article/...

for(var i = 0;i<5;i++){
 console.log(i)
}

2.for in循環

for in循環是用來遍歷對象的。要知道JavaScript對象的全部屬性都是字符串，不過屬性對應的值能夠是任意數據類型。（注意：遍歷時不只能讀取對象自身上面的成員屬性，也能遍歷出對象的原型屬性）

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指對象的屬性名
console.log(prop, obj[prop]);
}
// 輸出:
// a,1
// b,2
// c,3

for in一樣能夠用來循環數組,可是不推薦這麼作。因爲Array也是對象，而它的每一個元素的索引被視爲對象的屬性，所以，for in循環能夠直接循環出Array的索引，但獲得的是String而不是Number，因此一旦你想用這個index去進行計算，就會出錯。並且由於會遍歷原型屬性，因此可能得出的結果不會是你想要的(具體細節很少說，須要瞭解的本身查詢，反正不少坑)。雖然能夠用hasOwnProperty()方法避免這個缺陷，可是何須呢，循環方法那麼多，換一個就是了。

for (var index in myArray) { // 不推薦這樣
console.log(myArray[index]);
}

3. forEach循環

沒什麼好說的，看例子。(注意：forEach循環裏面沒辦法用break跳出循環。並且在IE中沒法實現，須要作兼容處理。)

let arr = ['123','qwewq','sfds'];
myArray.forEach(function (value, index) {
    console.log(value,index);
});
//輸出
//"123",1
//"qwewq",2
//"sfds",3

4.for of循環

做爲ES6新增的循環方法，我的以爲至關好用，並且方便。這個方法避開了for-in循環的全部缺陷。並且，它能夠正確響應break、continue和return語句。

//循環數組
let arr = ['123','qwewq','sfds'];
for(let item of arr){
    console.log(item);    //item指的的就是數組每一項的值。不是索引。
}
//輸出
//'123'
//'qwewq'
//'sfds'

for-of循環不只支持數組，還支持大多數類數組對象，例如DOM NodeList對象。可是for of也有一個致命傷，就像例子看到的，沒有索引。對，這是優勢也是缺點。遍歷數組對象，直接就是item.屬性(或者item[屬性]),而不用像for循環那樣arr[index].屬性(arrindex)。可是你有的時候真的就得用到index。很差意思，只能把數組轉成Map()。但我以爲真的須要用到index，仍是換成forEach吧。

//遍歷字符串
let name = 'Asher';
for (let char of name){
    console.log(char);         //A s h e r
}

此外，對於在ES6中新增的兩種類型，Map和Set(若是學過Java或者其餘有這兩種類型的語言，會發現用法幾乎同樣)。for of一樣適用。

let mapArray = new Map();
for (let [key, value] of mapArray) {
   console.log(key,value);
}
//Set集合同理，不列舉了。

總結

以上就是經常使用的幾種for循環總結，不少細節，原理之類的沒有寫。由於這只是一個簡單使用的介紹，不想寫那麼多。此外，還有不少像while循環，do-while循環之類的其它循環方法，都沒提。由於根據個人使用經驗，上面的幾種已經能夠應對幾乎全部狀況了。