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

• 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 untuk

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

$.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 "Gulp"
2 "CSS3"
3 "Grunt"
4 "jQuery"
5 "angular"

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}
$.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^_^