JS中for,for...in,for...of和forEach的區(qū)別和用法實例
for循環(huán)
基本語法格式:
for(初始化變量;條件表達式;操作表達式){
循環(huán)體語句;
}
普通for循環(huán)在Array和Object中都可以使用。for循環(huán)中可以使用return、break等來中斷循環(huán)。
//遍歷數(shù)組 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循環(huán)
基本語法格式:
arr.forEach(function(k){
console.log(k);
})
依次從數(shù)組中取出元素放在k中,然后將k作為參數(shù)傳遞給函數(shù)
.forEach()是Array原型的一種方法,它允許您遍歷數(shù)組的元素, .forEach()不能遍歷對象。forEach 方法沒辦法使用 break 語句跳出循環(huán),或者使用return從函數(shù)體內(nèi)返回。
//遍歷數(shù)組 var arr = [3,2,3,9,5]; arr.forEach(function(value,arr){ console.log(value); })
for…in循環(huán)
基本語法格式:
for(var 變量 in 數(shù)組名或集合名)
{
數(shù)組名[變量]
}
變量中存放的數(shù)組或集合的索引。
//遍歷數(shù)組 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.循環(huán)不僅會遍歷數(shù)組元素,還會遍歷任意其他自定義添加的屬性,如,obj上面包含自定義屬性,obj.name,那這次循環(huán)中也會出現(xiàn)此name屬性
3.某些情況下,上述代碼會以隨機順序循環(huán)數(shù)組
for-in循環(huán)設計之初,是給普通以字符串的值為key的對象使用的。而非數(shù)組。
for…of循環(huán)
基本語法格式:
for(var 變量 of 數(shù)組名或集合名)
{
console.log(變量);
}
變量中存放的是數(shù)組或集合中的元素。
//遍歷數(shù)組 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() 方法返回一個數(shù)組的迭代對象,該對象包含數(shù)組的鍵值對 (key/value)。
迭代對象中數(shù)組的索引值作為 key, 數(shù)組元素作為 value。
1.可以避免所有 for-in 循環(huán)的陷阱
2.不同于 forEach(),可以使用 break, continue 和 return
3.for-of 循環(huán)不僅僅支持數(shù)組的遍歷。同樣適用于很多類似數(shù)組的對象
4.它也支持字符串的遍歷
5.for-of 并不適用于處理原有的原生對象
總結
1.'for…in'用于迭代對象的所有'可枚舉'屬性,包括繼承的可枚舉屬性, 該迭代語句可用于數(shù)組字符串或普通對象,但不能用于Map或Set對象
2.'for…of'用于'可迭代'對象,迭代其值而不是其屬性,該迭代語句可以與數(shù)組,字符串Map或Set對象一起使用,但不能與普通對象一起使用。
到此這篇關于JS中for,for...in,for...of和forEach的區(qū)別和用法的文章就介紹到這了,更多相關JS中for,for...in,for...of,forEach區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)兩個數(shù)組的交集
這篇文章主要介紹了JavaScript實現(xiàn)兩個數(shù)組的交集,給定兩個數(shù)組???nums1???和??nums2??返回它們的交集,輸出結果中的每個元素一定是唯一的,下文詳細介紹,需要的小伙伴可以參考一下2022-03-03javascript 3d 逐偵產(chǎn)品展示(核心精簡)
這篇文章主要介紹了javascript實現(xiàn)的3d逐偵產(chǎn)品展示,需要的朋友可以參考下2014-03-03javascript設計模式 – 解釋器模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 解釋器模式,結合實例形式分析了javascript解釋器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04Javascript中獲取出錯代碼所在文件及行數(shù)的代碼
之前在做一個Javascript的日志控制臺功能模塊,希望能夠在Javascript代碼出錯時捕獲此錯誤,并將出錯的文件及相應的行數(shù)打印到控制臺并匯報給服務器。2010-09-09