Penjelasan terperinci tentang kemahiran javascript traversal method_javascript

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

Anda hanya boleh melihat contoh, ia digunakan terlalu banyak, ia sangat mudah

(function() {
 for(var i=0, len=demoArr.length; i<len; i++) {
 if (i == 2) {
 // return; // 函数执行被终止
 // break; // 循环被终止
 continue; // 循环被跳过
 };
 console.log('demo1Arr['+ i +']:' + demo1Arr[i]);
 }
})();
关于for循环，有一下几

Mengenai gelung for, terdapat perkara berikut yang perlu diperhatikan

• i dalam gelung for masih wujud dalam skop selepas gelung tamat Untuk mengelak daripada mempengaruhi pembolehubah lain dalam skop, ia diasingkan menggunakan pelaksanaan sendiri fungsi ()();
• Elakkan menggunakan for(var i=0; i

var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};

• Terdapat beberapa cara untuk keluar dari gelung

pelaksanaan fungsi pulangan ditamatkan
putus Gelung ditamatkan
gelung continue dilangkau
Contoh lengkap

untuk dalam

for(var item dalam arr|obj){} boleh digunakan untuk melintasi 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 gelung tidak lagi akan terus dilaksanakan. 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'); //不会执行
}

untukSetiap

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

untukSetiap tidak boleh melintasi objek
forEach tidak boleh digunakan dalam IE, firefox dan chrome melaksanakan kaedah ini
forEach tidak boleh menggunakan break dan terus melompat keluar dari gelung Apabila menggunakan return, kesannya adalah sama seperti menggunakan continue dalam gelung for
buat/semasa

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 melintasi tatasusunan
// Gunakan sambil
terus

(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);
})();

$.setiap

$.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 "Telan"
2 "CSS3"
3 "Dengus"
4 "jQuery"
5 "sudut"
Terdapat banyak perkara yang perlu diberi perhatian di sini

• Gunakan return atau return true untuk melangkau gelung dan teruskan melaksanakan gelung seterusnya
• Gunakan return false untuk menamatkan pelaksanaan gelung, tetapi tidak menamatkan pelaksanaan fungsi
• Tidak boleh menggunakan break dan terus melangkau gelung
• 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}

$(this) dalam $.setiap berbeza daripada ini, tetapi hasil traversal adalah sama Anda boleh mencetaknya dalam kod ujian untuk melihat
$(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) {}

类似这样的对象还有函数的属性arguments对象，当然字符串也是可以遍历的，但是因为字符串其他属性的enumerable被设置成了false，因此遍历出来的结果跟数组是一样的，也就不用担心这个问题了.
小补充

如果你发现有些人写函数这样搞，不要惊慌，也不要觉得他高大上。

+function(ROOT, Struct, undefined) {
 ... 
}(window, function() {
 function Person() {}
})

()(), !function() {}() +function() {}() 三种函数自执行的方式。

以上就是本文的全部内容，希望对大家的学习有所帮助。