您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript中的遍歷方式是什么”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“JavaScript中的遍歷方式是什么”文章能幫助大家解決問(wèn)題。
為了方便例子講解,現(xiàn)有數(shù)組和json對(duì)象如下
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' }; for
可以直接看示例,用得太多了,很簡(jiǎn)單
(function() { for(var i=0, len=demoArr.length; i<len; i++) { if (i == 2) { // return; // 函數(shù)執(zhí)行被終止 // break; // 循環(huán)被終止 continue; // 循環(huán)被跳過(guò) }; console.log('demo1Arr['+ i +']:' + demo1Arr[i]); } })();
關(guān)于for循環(huán),有一下幾點(diǎn)需要注意
for循環(huán)中的i
在循環(huán)結(jié)束之后任然存在與作用域中,為了避免影響作用域中的其他變量,使用函數(shù)自執(zhí)行的方式將其隔離起來(lái)()()
;
避免使用for(var i=0; i<demo1Arr.length; i++){}
的方式,這樣的數(shù)組長(zhǎng)度每次都被計(jì)算,效率低于上面的方式。也可以將變量聲明放在for的前面來(lái)執(zhí)行,提高閱讀性
var i = 0, len = demo1Arr.length; for(; i<len; i++) {};
跳出循環(huán)的方式有如下幾種
return 函數(shù)執(zhí)行被終止
break 循環(huán)被終止
continue 循環(huán)被跳過(guò)
完整實(shí)例
for in
for(var item in arr|obj){}
可以用于遍歷數(shù)組和對(duì)象
遍歷數(shù)組時(shí),item表示索引值, arr表示當(dāng)前索引值對(duì)應(yīng)的元素 arr[item]
遍歷對(duì)象時(shí),item表示key值,arr表示key值對(duì)應(yīng)的value值 obj[item]
(function() { for(var i in demoArr) { if (i == 2) { return; // 函數(shù)執(zhí)行被終止 // break; // 循環(huán)被終止 // continue; // 循環(huán)被跳過(guò) }; console.log('demoArr['+ i +']:' + demoArr[i]); } console.log('-------------'); })();
關(guān)于for in,有以下幾點(diǎn)需要注意:
在for循環(huán)與for in循環(huán)中,i
值都會(huì)在循環(huán)結(jié)束之后保留下來(lái)。因此使用函數(shù)自執(zhí)行的方式避免。
使用return,break,continue跳出循環(huán)都與for循環(huán)一致,不過(guò)關(guān)于return需要注意,在函數(shù)體中,return表示函數(shù)執(zhí)行終止,就算是循環(huán)外面的代碼,也不再繼續(xù)往下執(zhí)行。而break僅僅只是終止循環(huán),后面的代碼會(huì)繼續(xù)執(zhí)行。
function res() { var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; for(var item in demoArr) { if (item == 2) { return; }; console.log(item, demoArr[item]); } console.log('desc', 'function res'); //不會(huì)執(zhí)行 } forEach demoArr.forEach(function(arg) {})
參數(shù)arg表示數(shù)組每一項(xiàng)的元素,實(shí)例如下
demoArr.forEach(function(e) { if (e == 'CSS3') { return; // 循環(huán)被跳過(guò) // break; // 報(bào)錯(cuò) // continue;// 報(bào)錯(cuò) }; console.log(e); })
具體有以下需要注意的地方
forEach無(wú)法遍歷對(duì)象
forEach無(wú)法在IE中使用,firefox和chrome實(shí)現(xiàn)了該方法
forEach無(wú)法使用break,continue跳出循環(huán),使用return時(shí),效果和在for循環(huán)中使用continue一致
do/while
函數(shù)具體的實(shí)現(xiàn)方式如下,不過(guò)有一點(diǎn)值得注意的是,當(dāng)使用continue時(shí),如果你將i++放在了后面,那么i++的值將一直不會(huì)改變,***陷入死循環(huán)。因此使用do/while一定要小心謹(jǐn)慎一點(diǎn)。
不建議使用do/while的方式來(lái)遍歷數(shù)組
// 直接使用while (function() { var i = 0, len = demoArr.length; while(i < len) { if (i == 2) { // return; // 函數(shù)執(zhí)行被終止 // break; // 循環(huán)被終止 // continue; // 循環(huán)將被跳過(guò),因?yàn)楹筮叺拇a無(wú)法執(zhí)行,i的值沒(méi)有改變,因此循環(huán)會(huì)一直卡在這里,慎用??! }; console.log('demoArr['+ i +']:' + demoArr[i]); i ++; } console.log('------------------------'); })(); // do while (function() { var i = 0, len = demo3Arr.length; do { if (i == 2) { break; // 循環(huán)被終止 }; console.log('demo2Arr['+ i +']:' + demo3Arr[i]); i++; } while(i<len); })(); $.each $.each(demoArr|demoObj, function(e, ele))
可以用來(lái)遍歷數(shù)組和對(duì)象,其中e表示索引值或者key值,ele表示value值
$.each(demoArr, function(e, ele) {
console.log(e, ele);
})
輸出為
0 "Javascript"
1 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"
這里有很多需要注意的地方
使用return
或者return true
為跳過(guò)一次循環(huán),繼續(xù)執(zhí)行后面的循環(huán)
使用return false
為終止循環(huán)的執(zhí)行,但是并不終止函數(shù)執(zhí)行
無(wú)法使用break與continue來(lái)跳過(guò)循環(huán)
循環(huán)中this值輸出類似如下
console.log(this); //String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"} console.log(this == ele); // true
關(guān)于上面的this值,遍歷一下
$.each(this, function(e, ele) { console.log(e, ele); }) // 0 c // 1 s // 2 s // 4 3 為什么length 和 [[PrimitiveValue]]沒(méi)有遍歷出來(lái)?突然靈光一動(dòng),在《javascript高級(jí)編程》中找到了答案,大概意思就是javascript的內(nèi)部屬性中,將對(duì)象數(shù)據(jù)屬性中的Enumerable設(shè)置為了false // 查看length的內(nèi)部屬性 console.log(Object.getOwnPropertyDescriptor(this, 'length')); // Object {value: 4, writable: false, enumerable: false, configurable: false}
$.each 中的
$(this)
與this有所不同,不過(guò)遍歷結(jié)果卻是一樣,你可以在測(cè)試代碼中打印出來(lái)看看
$(selecter).each
專門用來(lái)遍歷DOMList
$('.list li').each(function(i, ele) { console.log(i, ele); // console.log(this == ele); // true $(this).html(i); if ($(this).attr('data-item') == 'do') { $(this).html('data-item: do'); }; })
i: 序列值 ele: 只當(dāng)前被遍歷的DOM元素
this 當(dāng)前被遍歷的DOM元素,不能調(diào)用jQuery方法
$(this) == $(ele) 當(dāng)前被遍歷元素的jquery對(duì)象,可以調(diào)用jquery的方法進(jìn)行dom操作
使用for in 遍歷DOMList
因?yàn)閐omList并非數(shù)組,而是一個(gè)對(duì)象,只是因?yàn)槠鋕ey值為0,1,2… 而感覺與數(shù)組類似,但是直接遍歷的結(jié)果如下
var domList = document.getElementsByClassName('its'); for(var item in domList) { console.log(item, ':' + domList[item]); } // 0: <li></li> // 1: <li></li> // ... // length: 5 // item: function item() {} // namedItem: function namedItem() {}
因此我們?cè)谑褂胒or in 遍歷domList時(shí),需要將domList轉(zhuǎn)換為數(shù)組
var res = [].slice.call(domList); for(var item in res) {}
類似這樣的對(duì)象還有函數(shù)的屬性arguments對(duì)象,當(dāng)然字符串也是可以遍歷的,但是因?yàn)樽址渌麑傩缘?code>enumerable被設(shè)置成了false,因此遍歷出來(lái)的結(jié)果跟數(shù)組是一樣的,也就不用擔(dān)心這個(gè)問(wèn)題了.
關(guān)于“JavaScript中的遍歷方式是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。