var arr=[1,2,3]

1.傳統(tǒng)for循環(huán)

//遍歷數(shù)組 for(var i=0;i<arr.length;i++){ console.log(typeof i);//"number"console.log(arr[i])//1,2,3 }for(var i=0;i<arr.length;i++){console.log(arr[i]);//1break; }for(var i=0;i<arr.length;i++){if(i==1){continue;}console.log(arr[i]);//1,3 }for(var i=0;i<arr.length;i++){console.log(arr[i]);return; } //報錯：Illegal return statement //函數(shù)體里邊return可以起作用 function a(){for(var i=0;i<arr.length;i++){console.log(arr[i]);return;} } a();//1

標(biāo)準(zhǔn)的for循環(huán)中i是number類型的，可以使用break,continue語句

//遍歷對象 var obj={name:'cc',aa:10}; var keys=Object.keys(obj);//返回一個表示給定對象的所有可枚舉屬性的字符串?dāng)?shù)組 ["name", "aa"] for(var i=0;i<keys.length;i++) {console.log('屬性：'+keys[i]);console.log('值：'+obj[keys[i]]); }

缺點(diǎn)：這種方式寫法比較麻煩,且不方便于遍歷對象

2.for in

for(var i in arr){}

for in

• for in這種循環(huán)i是string類型的
• 作用于數(shù)組的for-in循環(huán)體除了遍歷數(shù)組元素外，還會自身可枚舉屬性
• 如果給對象的原型加上方法，for in這種循環(huán)會把數(shù)組原型鏈上的屬性都能被訪問到。
• 在某些情況下，這段代碼可能按照隨機(jī)順序遍歷數(shù)組元素。
• 簡而言之，for-in是為普通對象設(shè)計的，你可以遍歷得到字符串類型的鍵，因此不適用于數(shù)組遍歷。

//循環(huán)數(shù)組 Array.prototype.test=function(){} arr.name='jq' for(var i in arr){console.log(typeof i);//"string"console.log(i);//"0","1","2","name","test"console.log(arr[i]);//1,2,3,jq,? (){} } //循環(huán)json Object.prototype.aa=function(){} var json={'name':111} for(var i in json){console.log(i);//"name","aa"console.log(json[i])；//111,? (){} }

使用for in可能會出現(xiàn)的錯誤：
1.假設(shè)有一天誰不小心自己為了擴(kuò)展js原生的Array類，或者引入一個外部的js框架也擴(kuò)展了原生Array。那問題就來了。再此建議兩點(diǎn)
2.很可能在無意之間進(jìn)行字符串算數(shù)計算，例如：“2” + 1 == “21”,這給編碼過程帶來極大的不便。

3.forEach循環(huán)

forEach方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù),是es5操作數(shù)組的一種方法。

arr.aa=12; arr.forEach(function(item,index,arr){console.log(item);//1,2,3 }) //加上return語句不起作用 arr.forEach(function(item,index,arr){return;console.log(item);//1,2,3 }) //函數(shù)里邊寫return語句也不起作用 function a(){arr.forEach(function(item){console.log(item);return 7;}) } a()//1,2,3 //加上break，continue語句報錯 var arr=[1,2,3,4]; arr.forEach(function(item,index,arr){break;//continue;console.log(item); }) //報VM3387:2 Uncaught SyntaxError: Illegal break statement //或者Illegal continue statement: no surrounding iteration statement

缺點(diǎn)：無法中途跳出forEach循環(huán)，continue、break命令或return命令都不能奏效

ES6 for-of循環(huán)

for…of允許遍歷獲得鍵值。

for…of循環(huán)內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator方法。

arr.foo='hello' for (let a of arr) {console.log(a); //1，2，3 } //for...of里邊用return語句報錯 for(let i of arr){ console.log(i); return; } //報錯：Illegal return statement //break可以起作用 for(let i of arr){ console.log(i);//1 break; } //continue語句可以起作用 for(let i of arr){if(i==1){continue;}console.log(i);//2,3 } //在函數(shù)內(nèi)return可以起作用 function a(){for(let i of arr){console.log(i);return;} } a();//1 優(yōu)點(diǎn)：- 有著同for...in一樣的簡潔語法，只返回具有數(shù)字索引的屬性,沒有for...in那些缺點(diǎn)。- 不同用于forEach方法，它可以與break、continue和return配合使用。- 提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口。- for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對象（比如arguments對象、DOM NodeList 對象）、后文的 Generator 對象，以及字符串。

總結(jié)

以上是生活随笔為你收集整理的js中for-in的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。