Penerokaan mendalam tentang isu kecekapan dan pengoptimuman berkaitan untuk gelung dalam kemahiran JavaScript_javascript

Pustaka Underscore.js

Berapa banyak gelung yang telah anda tulis dalam satu hari (minggu)?

var i;
for(i = 0; i < someArray.length; i++) {
 var someThing = someArray[i];
 doSomeWorkOn(someThing);
}

Ia tidak berbahaya, sudah tentu, tetapi ia hodoh dan pelik dan bukan sesuatu yang mengadu. Tetapi cara penulisan ini terlalu cetek.

var i,
 j;
for(i = 0; i < someArray.length; i++) {
 var someThing = someArray[i];
 for(j = 0; j < someThing.stuff.length; j++) {
   doSomeWorkOn(someThing.stuff[j]);
 }
}

Anda memanjangkan kod buruk, dan sebelum anda melontarkan sekumpulan ifs, anda sudah gila.
Saya tidak menulis satu gelung dalam dua tahun.
"Apa yang awak cakapkan?"
Memang betul, lawak yang teruk. Sebenarnya tidak ada (ok, saya ada menulis beberapa), kerana saya tidak menulis gelung dan kod saya lebih mudah difahami.
Bagaimana?

_.each(someArray, function(someThing) {
 doSomeWorkOn(someThing);
})

Atau lebih baik lagi:

_.each(someArray, doSomeWorkOn);

Inilah yang dilakukan oleh underscorejs. Bersih, ringkas, boleh dibaca, pendek, tiada pembolehubah perantaraan, tiada banyak koma bertitik, ringkas dan sangat elegan.
Berikut adalah beberapa lagi contoh.

var i,
 result = [];
for(i = 0; i < someArray.length; i++) {
 var someThing = someArray[i];
 // 打到这，我已经手疼了
 if(someThing.isAwesome === true) {
   result.push(someArray[i]);
 }
}

Sekali lagi, kes penggunaan biasa untuk membuang masa menggunakan gelung. Walaupun laman web ini mempromosikan anti-merokok dan vegetarian, saya berasa marah apabila saya melihat kod ini. Lihatlah cara mudah untuk menulisnya.

var result = _.filter(someArray, function(someThing) {
 return someThing.isAwesome === true;
})

Seperti nama penapis dalam garis bawah, hanya 3 baris kod boleh memberi anda tatasusunan baharu.
Atau adakah anda mahu menukar tatasusunan ini kepada bentuk lain?

var result = _.map(someArray, function(someThing) {
 return trasformTheThing(someThing);
})

Tiga contoh di atas adalah mencukupi dalam kehidupan seharian, tetapi fungsi ini tidak mencukupi untuk garis bawah diletakkan di atas meja.

var grandTotal = 0,
 somePercentage = 1.07,
 severalNumbers = [33, 54, 42],
 i; // don't forget to hoist those indices;
for(i = 0; i < severalNumbers.length; i++) {
 var aNumber = severalNumbers[i];
 grandTotal += aNumber * somePercentage;
}

versi garis bawah

var somePercentage = 1.07,
 severalNumbers = [33, 54, 42],
 grandTotal;
grandTotal = _.reduce(severalNumbers, function(runningTotal, aNumber) {
 return runningTotal + (aNumber * somePercentage);
}, 0)

Ini mungkin kelihatan agak pelik pada mulanya saya menyemak dokumentasi tentang mengurangkan dan mengetahui kewujudannya. Oleh kerana saya enggan menggunakan gelung, itu pilihan pertama saya. Perkara di atas hanyalah pengenalan Pustaka underscorejs juga mempunyai banyak fungsi yang hebat.

30 hari tiada cabaran kitaran penggunaan.

Jangan gunakan sebarang gelung untuk 30 hari seterusnya Jika anda melihat sekumpulan bahan yang jahat dan kasar, gantikannya dengan setiap gelung atau peta. Gunakan lebih sedikit pengurangan.

Anda perlu ambil perhatian bahawa Underscore ialah pintu masuk kepada pengaturcaraan berfungsi. Cara yang kelihatan, tidak kelihatan. Cara yang baik untuk pergi.

OurJS Note* Penyemak imbas moden kini menyokong setiap kaedah, menapis, memetakan dan mengurangkan kaedah, tetapi perpustakaan garis bawah boleh mencapai keserasian dengan versi lama IE Berikut ialah contoh yang ditulis menggunakan kaedah asli ES5:

[3,4,5,3,3].forEach(function(obj){
  console.log(obj);
});

[1,2,3,4,5].filter(function(obj){
  return obj < 3
});

[9,8,5,2,3,4,5].map(function(obj){
  return obj + 2;
});

[1,2,3,4,5].reduce(function(pre, cur, idx, arr) {
  console.log(idx);  //4 个循环: 2-5
  return pre + cur;
});  //15

//sort方法同样很有用
[9,8,5,2,3,4,5].sort(function(obj1, obj2){
  return obj1 - obj2;
});

untuk dalam dan untuk gelung

Seseorang menyatakan bahawa kecekapan for in adalah jauh lebih rendah daripada for gelung. Sekarang mari kita uji kecekapan penggunaan for in, for loop dan forEach dalam pelayar berbeza apabila memproses tatasusunan besar.

Pada masa ini, kebanyakan perisian sumber terbuka akan cache panjang tatasusunan dalam gelung for, kerana pandangan biasa ialah sesetengah penyemak imbas Array.length akan mengira semula panjang tatasusunan setiap kali, jadi pembolehubah sementara biasanya digunakan untuk menyimpan panjang tatasusunan terlebih dahulu, seperti:

for (var idx = 0, len = testArray.length; idx < len; idx++) {
 //do sth.
}

Kami juga akan menguji perbezaan prestasi antara caching dan tiada caching.

Juga tambahkan operasi penjumlahan dalam setiap gelung ujian untuk menunjukkan bahawa ia bukan gelung kosong.

for (var idx = 0, len = testArray.length; idx < len; idx++) {
 //do sth.
}

Kami juga akan menguji perbezaan prestasi antara caching dan tiada caching.

Juga tambahkan operasi penjumlahan dalam setiap gelung ujian untuk menunjukkan bahawa ia bukan gelung kosong.

Kod ujian adalah seperti berikut, klik Jalankan untuk melihat
Kod HTML

<h4 id="browser"></h4>
<table id="results" class="table"></table>

Kod JavaScript

function () {

 //准备测试数据, 有200万条数据的大数组
 var testArray = []
  , testObject = {}
  , idx
  , len = 2000000
  , tmp = 0
  , $results = $("#results")
  , $browser = $("#browser")
  ;

 $browser.html(navigator.userAgent);
 $results.html('');

 for (var i = 0; i < len; i++) {
  var number = Math.random(); //若希望加快运算速度可使用取整：Math.random() * 10 | 0
  testArray.push(number);
  testObject[i] = number;
 }

 $results.append('<tr><th>测试代码</th><th>计算结果</th><th>所需时间,毫秒</th></tr>');

 //测试函数
 var test = function(testFunc) {
  var startTime
   , endTime
   , result
   ;

  startTime = new Date();
  tmp = 0;
  testFunc();
  endTime  = new Date();

  //计算测试用例(Test Case)运行所需要的时间
  result = endTime - startTime;
  $results.append('<tr><td><pre class="brush:php;toolbar:false">{0}

{1}{2}'.format(testFunc.toString(), tmp | 0, result)); }; test(function() { //测试for in 的效率 for (idx in testArray) { tmp += testArray[idx]; //经测试，idx是string类型，可能是慢的原因之一 } }); test(function() { //测试for loop循环的效率 for (idx = 0, len = testArray.length; idx < len; idx++) { tmp += testArray[idx]; } }); test(function() { //测试forEach的效率 testArray.forEach(function(data) { tmp += data; }); }); test(function() { //测试不缓存Array.length时效率 for (idx = 0; idx < testArray.length; idx++) { tmp += testArray[idx]; } }); test(function() { //测试使用{} (Object) 存健值对时，使用for in的效率如何 for (idx in testObject) { tmp += testObject[idx]; } }); test(function() { //测试从{} Object查值时的效率如何（这里的健key值事先己知） for (idx = 0, len = testArray.length; idx < len; idx++) { tmp += testObject[idx]; } }); }

Lari [Sila tunggu sebentar]
Keputusan ujian
Keputusan ujian mungkin berbeza-beza bergantung pada pengiraan Ini adalah ringkasan keputusan ujian Firefox, Chrome dan IE yang dijalankan pada mesin saya.

Berikut adalah beberapa kesimpulan yang diperhatikan

• Untuk in adalah lebih perlahan daripada untuk gelung, sekurang-kurangnya 20 kali lebih perlahan dalam Chrome
• FF telah dioptimumkan untukSetiap (ES5), dan prestasinya lebih baik daripada untuk gelung, tetapi prestasi Chrome/IEn adalah lemah
• Array.length caching FF/Chrome adalah lebih perlahan daripada menggunakannya secara langsung. Kecuali untuk versi terkini IE, peningkatan prestasi adalah minimum (ini sangat tidak dijangka)
• Dalam sesetengah kes, prestasi enjin JS FF nampaknya lebih baik daripada V8