Ikuti saya untuk mempelajari gelung for dan untuk...dalam gelung kemahiran javascript

Ikuti saya untuk mempelajari gelung for dan untuk...dalam gelung kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 15:31:38

asal

1095 orang telah melayarinya

Semua orang tahu bahawa JavaScript menyediakan dua cara untuk mengulang objek:

untuk gelung;

1 untuk gelung

Ketidakcukupan:

Panjang tatasusunan mesti diperolehi setiap kali ia digelung

Syarat penamatan hendaklah jelas; Dalam gelung untuk, anda boleh menggelungkan nilai tatasusunan atau objek seperti tatasusunan, seperti argumen dan objek HTMLCollection. Bentuk gelung biasa adalah seperti berikut:

// 次佳的循环
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做点什么
}

Salin selepas log masuk

Kelemahan bentuk gelung ini ialah panjang tatasusunan mesti diperolehi setiap kali ia digelung. Ini akan mengurangkan prestasi kod anda, terutamanya apabila myarray bukan tatasusunan, tetapi objek HTMLCollection.

HTMLCollections merujuk kepada objek yang dikembalikan oleh kaedah DOM, contohnya:

document.getElementsByName() document.getElementsByClassName() document.getElementsByTagName()

Terdapat HTMLCollections lain yang diperkenalkan sebelum standard DOM dan masih digunakan hari ini. Ya:

document.images: Semua elemen imej pada halaman document.links: Semua elemen tag document.forms : semua borang
document.forms[0].elemen : Semua medan dalam bentuk pertama pada halaman

Masalah dengan koleksi ialah mereka menanyakan dokumen asas (halaman HTML) dalam masa nyata. Ini bermakna bahawa setiap kali anda mengakses panjang mana-mana koleksi, anda perlu menanyakan DOM dalam masa nyata dan operasi DOM biasanya mahal.

Itulah sebabnya adalah bentuk yang baik untuk cache panjang tatasusunan (atau koleksi) apabila anda menggelungkan nilai, seperti yang ditunjukkan dalam kod berikut:

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做点什么
}

Salin selepas log masuk

Dengan cara ini, anda hanya mendapatkan nilai panjang sekali sahaja semasa gelung ini.

Cache panjang HTMLCollections apabila menggelung untuk mendapatkan semula kandungan adalah lebih pantas dalam semua penyemak imbas, antara 2x (Safari3) dan 190x (IE7). //Data ini kelihatan sangat lama

Perhatikan bahawa apabila anda secara eksplisit ingin mengubah suai koleksi dalam gelung (cth., menambah lebih banyak elemen DOM), anda mungkin lebih suka kemas kini panjang berbanding pemalar.

Dengan bentuk var tunggal, anda boleh menarik pembolehubah keluar daripada gelung, seperti ini:

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做点什么
 }
}

Salin selepas log masuk

Borang ini mempunyai manfaat ketekalan kerana anda berpegang pada satu bentuk var. Kelemahannya ialah apabila memfaktorkan semula kod, menyalin dan menampal keseluruhan gelung agak sukar. Sebagai contoh, jika anda menyalin gelung dari satu fungsi ke fungsi yang lain, anda perlu memastikan bahawa anda boleh memperkenalkan i dan max ke dalam fungsi baharu (jika ia tidak berguna di sini, kemungkinan besar anda perlu memadamkannya daripada fungsi asal ) Kalah).

Pelarasan terakhir pada gelung ialah menggantikan i dengan salah satu ungkapan di bawah.

i = i + 1
i += 1

Salin selepas log masuk

JSLint menggesa anda untuk melakukan ini kerana dan -- menggalakkan "kelicikan yang berlebihan". Jika anda mengabaikannya, pilihan tambah tambah JSLint akan menjadi palsu (lalai adalah lalai).

Dua variasi:

Satu pembolehubah tiada (tiada maks)

Mengira turun hingga 0 biasanya lebih cepat kerana membandingkan dengan 0 adalah lebih cekap daripada membandingkan dengan panjang tatasusunan atau apa-apa lagi yang bukan 01

//第一种变化的形式：

var i, myarray = [];
for (i = myarray.length; i–-;) {
 // 使用myarray[i]做点什么
}

//第二种使用while循环：

var myarray = [],
 i = myarray.length;
while (i–-) {
 // 使用myarray[i]做点什么
}

Salin selepas log masuk

Peningkatan kecil ini hanya untuk prestasi, selain itu JSLint akan mengadu tentang menggunakan i--.

2 untuk…dalam gelung—juga dikenali sebagai “penghitungan”

Gelung untuk…dalam sering digunakan untuk mengulang sifat objek atau setiap elemen tatasusunan Pembilang gelung dalam gelung untuk…dalam ialah rentetan, bukan nombor. Ia mengandungi nama harta semasa atau indeks unsur tatasusunan semasa. Berikut ialah beberapa contoh:

Apabila melintasi objek, pembolehubah i, iaitu pembilang gelung, ialah nama atribut objek:

//使用for..in循环遍历对象属性 
varperson={ 
 name: "Admin", 
 age: 21, 
 address:"shandong" 
}; 
for(var i in person){ 
 console.log(i); 
}

Salin selepas log masuk

Hasil pelaksanaan ialah:

nama

umur

alamat

Apabila merentasi tatasusunan, pembolehubah i, iaitu pembilang gelung, ialah indeks bagi elemen tatasusunan semasa:

//使用for..in循环遍历数组 
vararray = ["admin","manager","db"] 
for(vari in array){ 
 console.log(i); 
}

Salin selepas log masuk

Hasil pelaksanaan:

2 Namun, kini nampaknya for.. in loop agak mudah digunakan. Namun, jangan terlalu gembira lihat contoh berikut:

运行结果：

admin

manager

zhangsan
咦，奇观了，怎么平白无故的冒出来一个zhangsan
现在，再看看使用 for循环会怎样？

vararray = ["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name = "zhangsan"; 
for(var i =0 ; i<array.length; i++){ 
 alert(array[i]); 
};

Salin selepas log masuk

运行结果：

admin

manager

db
哦，现在明白了，for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来，所以这可能会导致代码中出现意外的错误。为了避免这个问题，我们可以使用对象的hasOwnProperty()方法来避免这个问题，如果对象的属性或方法是非继承的，那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法，只会检查在特定对象自身中直接创建的属性。

vararray = ["admin","manager","db"]; 
Array.prototype.name= "zhangshan"; 
for(var i in array){ 
//如果不是该对象自身直接创建的属性（也就是该属//性是原型中的属性），则跳过显示 
 if(array.hasOwnProperty(i)){ 
  alert(array[i]); 
  }
}

Salin selepas log masuk

运行结果：

admin

manager

db
另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像这样：

// 对象
var man = {
 hands: 2,
 legs: 2,
 heads: 1
};
for (var i in man) {
 if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤
  console.log(i, ":", man[i]);
 }
}

Salin selepas log masuk

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法，你可以使用局部变量“缓存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
 if (hasOwn.call(man, i)) { // 过滤
  console.log(i, ":", man[i]);
 }
}

Salin selepas log masuk

严格来说，不使用hasOwnProperty()并不是一个错误。根据任务以及你对代码的自信程度，你可以跳过它以提高些许的循环速度。但是当你对当前对象内容（和其原型链）不确定的时候，添加hasOwnProperty()更加保险些。

格式化的变化（通不过JSLint）会直接忽略掉花括号，把if语句放到同一行上。其优点在于循环语句读起来就像一个完整的想法（每个元素都有一个自己的属性”X”，使用”X”干点什么）：

// 警告： 通不过JSLint检测
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // 过滤
 console.log(i, ":", man[i]);
}

Salin selepas log masuk

以上就是介绍了JavaScript提供的两种方式迭代对象：for循环和for...in循环，希望这篇文章对大家的学习有所帮助。