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
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 } _6 untuk mengulang melalui objek yang dapat diubah. Itu termasuk string, array, dan objek mirip array lainnya seperti NodeLists, HTMLCollections, dan HTMLFormControlsCollection, tetapi bukan objek biasa (// 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 } 8)
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 } _6 loop, Anda menentukan variabel untuk mewakili item saat ini // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 0 iterable yang Anda ulangi. Di dalam blok (hal-hal di antara kurung kurawal), Anda dapat menggunakan variabel itu untuk mereferensikan item saat ini
// 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 } 6 loop menggunakan // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 3, atau akhiri loop sama sekali dengan // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 4
// 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); } _3 dan // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 4
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); } _7 dan // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 8 menyediakan cara yang lebih sederhana untuk melakukan iterasi pada array dan NodeList sambil tetap memiliki akses ke indeks
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); } 1. Callback itu sendiri menerima tiga argumen. item saat ini dalam loop, indeks item saat ini dalam loop, dan array itu sendiri. Ketiganya opsional, dan Anda dapat memberi nama apa pun yang Anda inginkan
// 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); } 7
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 } 6 loop, Anda tidak dapat mengakhiri fungsi callback // 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); } 1 sebelum di-loop melalui semua item. Anda dapat // 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); } 6 untuk mengakhiri loop saat ini (seperti yang Anda lakukan dengan // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 3), tetapi tidak ada cara untuk // logs "turkey", "tuna", "ham", "pb&j" for (let sandwich of sandwiches) { console.log(sandwich); } 4 loop
// 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); } 7 loop
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 } 6 loop. Ini sederhana dan lugas, dan mudah untuk diketik
Ada beberapa pengecualian situasional untuk itu, namun…
- 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
- 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