JS中for,for…in,for…of和forEach的區別和用法實例
for循環
基本語法格式:
for(初始化變量;條件表達式;操作表達式){
循環體語句;
}
普通for循環在Array和Object中都可以使用。for循環中可以使用return、break等來中斷循環。
//遍歷數組 var arr = [1,2,3,4,5]; for(var i=0;i<arr.length;i++){ console.log(arr[i]); }
//遍歷對象 var obj={ x0:10, x1:20, x2:30 } for(var k=0;k<3;k++){ console.log(obj['x'+k]); }
在遍歷對象時,顯然存在著很大的限制,對屬性的命名和k的值都存在限制。
forEach循環
基本語法格式:
arr.forEach(function(k){
console.log(k);
})
依次從數組中取出元素放在k中,然後將k作為參數傳遞給函數
.forEach()是Array原型的一種方法,它允許您遍歷數組的元素, .forEach()不能遍歷對象。forEach 方法沒辦法使用 break 語句跳出循環,或者使用return從函數體內返回。
//遍歷數組 var arr = [3,2,3,9,5]; arr.forEach(function(value,arr){ console.log(value); })
for…in循環
基本語法格式:
for(var 變量 in 數組名或集合名)
{
數組名[變量]
}
變量中存放的數組或集合的索引。
//遍歷數組 var arr = [1,2,3,4,5]; for(var i in arr){ console.log(arr[i]); }
//遍歷對象 var obj={ x0:10, x1:20, x2:30 } for(var k in obj){ console.log(obj[k]); }
1.下標的值可能會是字符串(String)類型
2.循環不僅會遍歷數組元素,還會遍歷任意其他自定義添加的屬性,如,obj上面包含自定義屬性,obj.name,那這次循環中也會出現此name屬性
3.某些情況下,上述代碼會以隨機順序循環數組
for-in循環設計之初,是給普通以字符串的值為key的對象使用的。而非數組。
for…of循環
基本語法格式:
for(var 變量 of 數組名或集合名)
{
console.log(變量);
}
變量中存放的是數組或集合中的元素。
//遍歷數組 var arr = [3,2,3,9,5]; for(var value of arr){ console.log(value); }
//遍歷對象 var obj={ x0:10, x1:20, x2:30 } for(var k of Object.entries(obj)){ console.log(k); }
entries() 方法返回一個數組的迭代對象,該對象包含數組的鍵值對 (key/value)。
迭代對象中數組的索引值作為 key, 數組元素作為 value。
1.可以避免所有 for-in 循環的陷阱
2.不同於 forEach(),可以使用 break, continue 和 return
3.for-of 循環不僅僅支持數組的遍歷。同樣適用於很多類似數組的對象
4.它也支持字符串的遍歷
5.for-of 並不適用於處理原有的原生對象
總結
1.’for…in’用於迭代對象的所有’可枚舉’屬性,包括繼承的可枚舉屬性, 該迭代語句可用於數組字符串或普通對象,但不能用於Map或Set對象
2.’for…of’用於’可迭代’對象,迭代其值而不是其屬性,該迭代語句可以與數組,字符串Map或Set對象一起使用,但不能與普通對象一起使用。
到此這篇關於JS中for,for…in,for…of和forEach的區別和用法的文章就介紹到這瞭,更多相關JS中for,for…in,for…of,forEach區別內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS面試題之forEach能否跳出循環詳解
- JavaScript循環遍歷的24個方法,你都知道嗎
- forEach循環裡break使用方式詳解
- JavaScript中你不知道的Object.entries用法
- JavaScript中forEach的錯誤用法匯總