Cara Menggunakan Loop di JavaScript

Looping memungkinkan Anda untuk mengulangi setiap item dalam array sehingga Anda dapat menyesuaikan dan menampilkan masing-masing item sesuka Anda. Seperti halnya setiap bahasa pemrograman, loop juga merupakan alat penting untuk merender array dalam JavaScript.

Dengan bantuan beberapa contoh praktis, mari selami lebih dalam berbagai cara Anda dapat menggunakan loop dalam JavaScript.

Incremental dan Decremental untuk Loop dalam JavaScript

Inkremental untuk loop adalah dasar dari iterasi dalam JavaScript.

Ini mengasumsikan nilai awal yang ditetapkan ke variabel dan menjalankan pemeriksaan panjang bersyarat sederhana. Kemudian menambah atau mengurangi nilai itu menggunakan ++ atau -- operator.

Begini tampilan sintaks umumnya:

for (var i = nilai awal; i < array.panjang; saya++) {
larik[i]}

Sekarang mari kita ulangi melalui array menggunakan sintaks dasar di atas:

anArray = [1, 3, 5, 6];
untuk (misalkan i = 0; i < anArray.length; saya++) {
console.log (anArray[i])
}
Keluaran:
1
3
5
6 

Sekarang kita akan mengoperasikan setiap item dalam array di atas menggunakan JavaScript untuk lingkaran:

anArray = [1, 3, 5, 6];
untuk (misalkan i = 0; i < anArray.length; saya++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Keluaran:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Loop iterasi melalui array secara bertahap dengan ++ operator, menghasilkan output yang dipesan.

Tetapi menggunakan negatif (--) operator, Anda dapat membalikkan output.

Sintaksnya sama, tetapi logikanya sedikit berbeda dari loop inkremental di atas.

Berikut cara kerja metode decremental:

anArray = [1, 3, 5, 6];
for (misalkan i = anArray.length-1; saya > = 0; Saya--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Keluaran:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logika di balik kode di atas tidak terlalu mengada-ada. Pengindeksan array dimulai dari nol. Jadi menelepon sebuahArray[i] biasanya beralih dari indeks nol ke tiga karena larik di atas berisi empat item.

Dengan demikian, menghapus satu dari panjang larik dan menyetel kondisinya ke lebih besar atau sama dengan nol seperti yang kita lakukan cukup berguna—terutama saat menggunakan larik sebagai dasar dari iterasi Anda.

Itu membuat indeks array kurang dari satu panjangnya. Kondisi saya >= 0 kemudian memaksa hitungan untuk berhenti pada item terakhir dalam array.

Terkait: Metode Array JavaScript yang Harus Anda Kuasai Hari Ini

JavaScript untuk Setiap

Meskipun Anda tidak dapat mengurangi menggunakan JavaScript untuk setiap, seringkali kurang bertele-tele daripada mentah untuk lingkaran. Ia bekerja dengan memilih satu item setelah yang lain tanpa menghafal yang sebelumnya.

Berikut sintaks umum JavaScript untuk setiap:

array.forEach (elemen => {
tindakan
})

Lihatlah cara kerjanya dalam praktik:

misalkan anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Keluaran:
1
3
5
6 

Sekarang gunakan ini untuk menjalankan operasi matematika sederhana pada setiap item seperti yang Anda lakukan di bagian sebelumnya:

misalkan anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log("5", "x", x, "=", x * 5)
});
Keluaran:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Cara Menggunakan for...in Loop JavaScript

NS untuk... di loop dalam JavaScript berulang melalui array dan mengembalikan indeksnya.

Anda akan merasa mudah menggunakannya untuk... di jika Anda akrab dengan Python untuk loop karena mereka serupa dalam hal kesederhanaan dan logika.

Lihatlah sintaks umumnya:

for (biarkan elemen dalam array){
tindakan 
}

Sehingga untuk... di loop menetapkan setiap item dalam array ke variabel (elemen) yang dideklarasikan dalam tanda kurung.

Jadi, mencatat elemen secara langsung di dalam loop mengembalikan indeks array dan bukan item itu sendiri:

misalkan anArray = [1, 3, 5, 6];
untuk (biarkan saya di anArray){
console.log (i)
}
Keluaran:
0
1
2
3 

Untuk menampilkan setiap item sebagai gantinya:

misalkan anArray = [1, 3, 5, 6];
untuk (biarkan saya di anArray){
console.log (anArray[i])
}
Keluaran:
1
3
5
6 

Seperti yang Anda lakukan saat menggunakan loop decremental, juga mudah untuk membalikkan output menggunakan untuk... di:

misalkan anArray = [1, 3, 5, 6];
// Hapus satu dari panjang array dan tetapkan ini ke variabel:
misalkan v = anArray.length - 1; 
// Gunakan variabel di atas sebagai basis indeks saat melakukan iterasi ke bawah array:
untuk (biarkan saya di anArray){
console.log (anArray[v])
v -=1;
}
Keluaran:
6
5
3
1 

Kode di atas secara logis mirip dengan apa yang Anda lakukan saat menggunakan loop decremental. Ini lebih mudah dibaca dan diuraikan secara eksplisit.

JavaScript untuk... dari Loop

NS untuk...dari lingkaran mirip dengan untuk... di lingkaran.

Namun, tidak seperti untuk... di, itu tidak beralih melalui indeks array tetapi item itu sendiri.

Sintaks umumnya terlihat seperti ini:

for (misalkan i dari array) {
tindakan 
}

Mari gunakan metode perulangan ini untuk beralih melalui array secara bertahap untuk melihat cara kerjanya:

misalkan anArray = [1, 3, 5, 6];
untuk (misalkan saya dari anArray) {
console.log (i)
}
Keluaran:
1
3
5
6 

Anda juga dapat menggunakan metode ini untuk mengulangi array dan membalikkan output. Ini mirip dengan cara Anda melakukannya menggunakan untuk... di:

misalkan anArray = [1, 3, 5, 6];
misalkan v = anArray.length - 1;
for (misalkan x dari anArray) {
console.log (anArray[v])
v -=1;
}
Keluaran:
6
5
3
1

Untuk beroperasi dalam loop:

misalkan anArray = [1, 3, 5, 6];
misalkan v = anArray.length - 1;
for (misalkan x dari anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Keluaran:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Loop Sementara

NS ketika loop berjalan terus menerus selama kondisi yang ditentukan tetap benar. Ini sering digunakan sebagai loop tak terbatas.

Misalnya, karena nol selalu kurang dari sepuluh, kode di bawah ini terus berjalan:

misalkan saya = 0;
sementara (i < 10) {
konsol.log (4)
}

Kode di atas mencatat "4" tanpa batas.

Mari kita ulangi melalui array menggunakan ketika lingkaran:

misalkan saya = 0;
while (i < anArray.length) {
console.log (anArray[i])
saya +=1
}
Keluaran:
1
3
5
6 

JavaScript lakukan... sementara Loop

NS lakukan... sementara loop menerima dan mengeksekusi serangkaian tindakan secara eksplisit di dalam a melakukan sintaksis. Ini kemudian menyatakan kondisi untuk tindakan ini di dalam ketika lingkaran.

Berikut tampilannya:

melakukan{
tindakan
}
ketika (
kondisi
)

Sekarang mari kita ulangi melalui array menggunakan metode perulangan ini:

melakukan{
console.log (anArray[i])
saya +=1
}
ketika (
i < anArray.length
)
Keluaran:
1
3
5
6 

Biasakan Diri Anda Dengan JavaScript Loop

Meskipun kami telah menyoroti berbagai metode perulangan JavaScript di sini, menguasai dasar-dasar iterasi dalam pemrograman memungkinkan Anda menggunakannya secara fleksibel dan percaya diri dalam program Anda. Yang mengatakan, sebagian besar loop JavaScript ini bekerja dengan cara yang sama, dengan hanya sedikit perbedaan dalam garis besar dan sintaksisnya.

Loop, bagaimanapun, adalah dasar dari kebanyakan rendering array sisi klien. Jadi jangan ragu untuk men-tweak metode perulangan ini sesuka Anda. Menggunakannya dengan array yang lebih kompleks, misalnya, memberi Anda pemahaman yang lebih baik tentang loop JavaScript.

Cara Menggunakan Pernyataan JavaScript if-else

Pernyataan if-else adalah langkah pertama Anda menuju logika pemrograman ke dalam aplikasi Anda.

Baca Selanjutnya

Tentang Penulis