Loop mana yang lebih baik dalam javascript?

Pada artikel ini, kita akan melihat cara tercepat untuk mengulang array dalam JavaScript. JavaScript memiliki berbagai macam loop yang tersedia untuk melakukan iterasi. Loop berikut beserta sintaksnya didukung oleh JavaScript

untuk putaran. Perulangan for terdiri dari inisialisasi variabel, kondisi untuk evaluasi variabel, dan ekspresi untuk menentukan penghentian perulangan. Itu melakukan jumlah iterasi yang tetap, oleh karena itu harus digunakan dalam skenario di mana berapa kali pengulangan loop diketahui sebelumnya
Dalam kasus konstanta, kami memiliki jenis sintaks berikut

// for loop that performs 10k iterations
for (let i = 0; i < 10000; i++) {
    // Statements 
}

Dalam kasus array

// Loop that runs up till the length
// of the array 
for (i = 0; i < array.length; i++) {
    // Statements 
}

while loop. Perulangan while melakukan inisialisasi di luar, sebelum permulaan perulangan, kemudian suatu kondisi divalidasi dan kemudian ekspresi dievaluasi. Eksekusi while loop berlanjut hingga kondisi terpenuhi

While loop dalam kasus array, ikuti sintaksnya

// Initialization 
let x = 0;


// Condition checking
while (x <= arr.length+1) {
    // Increment
    x += 1;
}

forEach() lingkaran. Setiap elemen array dikenai fungsi yang melakukan beberapa operasi atau tugas. Fungsi ditentukan sebagai parameter metode forEach dalam JavaScript. Itu melakukan tugas yang sangat efisien di mana kode fungsional diperlukan. Ini pada dasarnya adalah fungsi panggilan balik yang sangat bergantung pada operasi yang dilakukan di dalam

// Evaluation is performed element
// wise of the array 
let arr = []                      
arr.forEach((ele) => { 
    // Statements
})                              

untuk… dari Loop. Ini adalah versi baru untuk loop. Perulangan ini membutuhkan penetapan nama sementara untuk setiap elemen array. Ini berjalan sangat cepat dalam hal kumpulan data kecil. Ini jauh lebih mudah dibaca dibandingkan dengan for loop tradisional. Itu melakukan iterasi atas objek iterasi bawaan JavaScript seperti String, Map, Set, dan Array

JavaScript menyediakan beberapa metode dan teknik untuk mengulang array dan elemen dan melakukan sesuatu dengannya. Jadi… pendekatan mana yang harus Anda gunakan, dan mengapa?

Hari ini, kita akan melihat berbagai cara untuk mengulang berbagai hal dengan vanilla JS, dan kapan dan mengapa harus memilih salah satu dari yang lain

Mari kita menggali lebih dalam

Contoh larik

Untuk artikel hari ini, mari gunakan larik sandwiches sebagai contoh

let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];

Kami akan mengulanginya dan mencatat setiap item ke konsol, tetapi di situs atau aplikasi nyata, Anda mungkin ingin memanipulasi data dengan cara tertentu

Putaran for

Anda dapat menggunakan loop for untuk mengulang array, NodeLists, dan objek mirip array lainnya. Ini adalah cara jadul untuk mengulang hal-hal

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

• Di bagian pertama loop, sebelum titik koma pertama, kami menetapkan variabel penghitung (biasanya i, tetapi bisa apa saja) ke

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  0
• Bagian kedua, di antara dua titik koma, adalah pengujian yang kami periksa setelah setiap iterasi loop. Dalam hal ini, kami ingin memastikan nilai counter kurang dari jumlah item dalam array kami. Kami melakukan ini dengan memeriksa

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  _1 dari array kami
• Terakhir, setelah titik koma kedua, kami menentukan apa yang akan dijalankan setelah setiap loop. Dalam hal ini, kami menambahkan

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  _2 ke nilai i dengan

  // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
  for (let i = 0; i < sandwiches.length; i++) {
  	console.log(i); // index
  	console.log(sandwiches[i]); // value
  }
  

  4

Kami kemudian dapat menggunakan i_ untuk mengambil item saat ini di loop dari array kami

Ini demonya

Putaran // logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j" for (let i = 0; i < sandwiches.length; i++) { console.log(i); // index console.log(sandwiches[i]); // value } _6

Pendekatan yang lebih modern, Anda dapat menggunakan

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

Dalam

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Ini demo lainnya

Melewati dan mengakhiri loop

Anda dapat melompat ke item berikutnya dalam for atau

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

Ini demo

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Metode // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 7 dan // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 8

Metode

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Anda meneruskan fungsi panggilan balik ke metode

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
sandwiches.forEach(function (sandwich, index) {
	console.log(index);    // index
	console.log(sandwich); // value
});

Ini demo metode

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Berbeda dengan for dan

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') continue;

	console.log(sandwich);

}

// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {

	// Skip to the next item in the loop
	if (sandwich === 'ham') break;

	console.log(sandwich);

}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

// Skip "ham"
// logs "turkey", "tuna", "pb&j"
sandwiches.forEach(function (sandwich, index) {
	if (sandwich === 'ham') return;
	console.log(sandwich);
});

Berikut demo melewatkan item dalam

// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
	console.log(sandwich);
}

Metode mana yang harus Anda gunakan, dan mengapa?

Dalam kebanyakan kasus, sebagian besar waktu, saya menggunakan

// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
	console.log(i); // index
	console.log(sandwiches[i]); // value
}

Ada beberapa pengecualian situasional untuk itu, namun…

1. Jika saya memerlukan indeks item, saya akan menggunakan metode

   // logs "turkey", "tuna", "ham", "pb&j"
   for (let sandwich of sandwiches) {
   	console.log(sandwich);
   }
   

   7 atau

   // logs "turkey", "tuna", "ham", "pb&j"
   for (let sandwich of sandwiches) {
   	console.log(sandwich);
   }
   

   8
2. Jika saya memerlukan indeks dan ingin mengakhiri perulangan lebih awal setelah suatu kondisi terpenuhi, saya akan menggunakan perulangan for

Saya mencoba untuk menghindari for loop kecuali ada alasan kuat untuk menggunakannya. Mereka sulit dibaca. Mereka sulit untuk menulis. Mereka hanya berantakan

Loop mana yang tercepat di JavaScript 2022?

Jenis loop mana yang lebih cepat?

Jenis loop mana yang terbaik?

Mana yang lebih cepat forEach atau for loop JavaScript?