Rumah > Artikel > hujung hadapan web > Ringkasan cara melintasi menggunakan pelbagai gelung dalam pengetahuan JavaScript_Basic
Untuk memudahkan penjelasan contoh, tatasusunan dan objek json yang sedia ada adalah seperti berikut
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' };
untuk dalam
for(item var dalam arr|obj){} boleh digunakan untuk merentasi tatasusunan dan objek
Apabila merentasi tatasusunan, item mewakili nilai indeks dan arr mewakili elemen yang sepadan dengan nilai indeks semasa arr[item]
Apabila melintasi objek, item mewakili nilai kunci dan arr mewakili nilai yang sepadan dengan nilai kunci obj[item]
(function() { for(var i in demoArr) { if (i == 2) { return; // 函数执行被终止 // break; // 循环被终止 // continue; // 循环被跳过 }; console.log('demoArr['+ i +']:' + demoArr[i]); } console.log('-------------'); })();
Berkenaan dalam, terdapat perkara berikut yang perlu diperhatikan:
Dalam untuk gelung dan untuk dalam gelung, nilai i akan dikekalkan selepas gelung berakhir. Oleh itu, gunakan fungsi laksana sendiri untuk mengelakkan perkara ini.
Menggunakan return, break, dan terus melompat keluar dari gelung adalah konsisten dengan gelung untuk Walau bagaimanapun, anda perlu memberi perhatian untuk kembali dalam badan fungsi, kembali menunjukkan penamatan pelaksanaan fungsi tidak lagi meneruskan pelaksanaan. Break hanya menamatkan gelung, dan kod seterusnya akan terus dilaksanakan.
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'); //不会执行 } forEach demoArr.forEach(function(arg) {})
Parameter arg mewakili elemen setiap item dalam tatasusunan Contohnya adalah seperti berikut
demoArr.forEach(function(e) { if (e == 'CSS3') { return; // 循环被跳过 // break; // 报错 // continue;// 报错 }; console.log(e); })
Berikut adalah perkara khusus yang perlu diberi perhatian
buat/sementara
Pelaksanaan khusus fungsi adalah seperti berikut, tetapi satu perkara yang perlu diberi perhatian ialah apabila menggunakan continue, jika anda meletakkan i di penghujung, nilai i tidak akan pernah berubah, dan akhirnya ia akan jatuh ke dalam gelung tak terhingga. Oleh itu, anda mesti berhati-hati apabila menggunakan do/while.
Tidak disyorkan untuk menggunakan do/while untuk merentasi tatasusunan
// 直接使用while (function() { var i = 0, len = demoArr.length; while(i < len) { if (i == 2) { // return; // 函数执行被终止 // break; // 循环被终止 // continue; // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!! }; console.log('demoArr['+ i +']:' + demoArr[i]); i ++; } console.log('------------------------'); })(); // do while (function() { var i = 0, len = demo3Arr.length; do { if (i == 2) { break; // 循环被终止 }; console.log('demo2Arr['+ i +']:' + demo3Arr[i]); i++; } while(i<len); })();
$.each(demoArr|demoObj, function(e, ele))
boleh digunakan untuk melintasi tatasusunan dan objek, dengan e mewakili nilai indeks atau nilai kunci, dan ele mewakili nilai nilai
$.each(demoArr, function(e, ele) { console.log(e, ele); })
Outputnya ialah
0 "Javascript" 1 "Gulp" 2 "CSS3" 3 "Grunt" 4 "jQuery" 5 "angular"
Terdapat banyak perkara yang perlu diberi perhatian di sini
Output nilai ini dalam gelung adalah serupa dengan yang berikut
console.log(this); //String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"} console.log(this == ele); // true
Mengenai nilai ini di atas, mari kita merentasinya
$.each(this, function(e, ele) { console.log(e, ele); }) // 0 c // 1 s // 2 s // 4 3
Mengapakah panjang dan [[PrimitiveValue]] tidak dilalui? Tiba-tiba, saya mendapat idea dan menemui jawapan dalam "Pemrograman Lanjutan Javascript". Ini mungkin bermakna dalam sifat dalaman JavaScript, tetapkan Enumerable dalam atribut data objek kepada false
// 查看length的内部属性 console.log(Object.getOwnPropertyDescriptor(this, 'length')); // Object {value: 4, writable: false, enumerable: false, configurable: false} $.each 中的 $(this) 与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看$(selecter).setiap
Digunakan khas untuk melintasi DOMLlist
$('.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: nilai jujukan ele: hanya elemen DOM yang sedang dilalui
ini ialah elemen DOM yang sedang dilalui, kaedah jQuery tidak boleh dipanggil
$(this) == $(ele) Objek jquery bagi elemen yang sedang dilalui, anda boleh memanggil kaedah jquery untuk melaksanakan operasi dom
Gunakan untuk dalam untuk melintasi DOMlist
Oleh kerana domList bukan tatasusunan, tetapi objek Hanya kerana nilai kuncinya ialah 0, 1, 2... rasanya serupa dengan tatasusunan, tetapi hasil traversal langsung adalah seperti berikut
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() {}
Jadi apabila kita menggunakan for in untuk melintasi domList, kita perlu menukar domList menjadi array
var res = [].slice.call(domList); for(var item in res) {}
Objek seperti ini juga mempunyai hujah harta objek fungsi Sudah tentu, rentetan juga boleh dilalui, tetapi kerana bilangan sifat lain rentetan ditetapkan kepada palsu, hasil traversal adalah sama dengan tatasusunan, iaitu Jangan risau tentang masalah ini lagi.
Tambahan kecil
Jika anda mendapati bahawa sesetengah orang menulis fungsi seperti ini, jangan panik, dan jangan fikir mereka terlalu berfikiran tinggi untuk membeli burung
+function(ROOT, Struct, undefined) { ... }(window, function() { function Person() {} })
()(), !function() {}() function() {}() Tiga cara pelaksanaan fungsi sendiri^_^