Loop berguna, jika Anda ingin menjalankan kode yang sama berulang kali, setiap kali dengan nilai yang berbeda
Seringkali ini terjadi ketika bekerja dengan array
Alih-alih menulis
teks += mobil[0] + "
";
teks += mobil[1] + "
";
teks += mobil[2] + "
";
teks += mobil[3] + "
";
teks += mobil[4] + "
";
teks += mobil[5] + "
";
Kamu bisa menulis
untuk (misalkan i = 0; i < mobil. panjangnya;
teks += mobil[i] + "
";
}
Berbagai Jenis Loop
JavaScript mendukung berbagai jenis loop
- for - loop melalui blok kode beberapa kali
- for/in_ - loop melalui properti objek
- for/of_ - mengulang melalui nilai-nilai objek yang dapat diubah
- while - loop melalui blok kode saat kondisi tertentu benar
- do/while_ - juga mengulang blok kode saat kondisi tertentu benar
Untuk Loop
Pernyataan for_ membuat loop dengan 3 ekspresi opsional
for (ekspresi 1; ekspresi 2; ekspresi 3) {
// blok kode yang akan dieksekusi
}
Ekspresi 1 dieksekusi (satu kali) sebelum eksekusi blok kode
Ekspresi 2 mendefinisikan kondisi untuk mengeksekusi blok kode
Ekspresi 3 dijalankan (setiap kali) setelah blok kode dieksekusi
Contoh
for (biarkan i = 0; i < 5; i++) {
teks += "Nomornya adalah " + i + "
";
}
Dari contoh di atas, Anda bisa membaca
Ekspresi 1 menyetel variabel sebelum perulangan dimulai (misalkan i = 0)
Ekspresi 2 mendefinisikan kondisi untuk menjalankan loop (saya harus kurang dari 5)
Ekspresi 3 meningkatkan nilai (i++) setiap kali blok kode dalam loop telah dieksekusi
Ekspresi 1
Biasanya Anda akan menggunakan ekspresi 1 untuk menginisialisasi variabel yang digunakan dalam loop (misalkan i = 0)
Ini tidak selalu terjadi. JavaScript tidak peduli. Ekspresi 1 adalah opsional
Anda dapat memulai banyak nilai dalam ekspresi 1 (dipisahkan dengan koma)
Contoh
untuk (misalkan i = 0, len = mobil. panjang, teks = "";
teks += mobil[i] + "
";
}
Dan Anda dapat menghilangkan ekspresi 1 (seperti saat nilai Anda ditetapkan sebelum loop dimulai)
Contoh
misalkan i = 2;
biarkan len = mobil. panjangnya;
biarkan teks = "";
untuk (; i < len; i++) {
teks += mobil[i] + "
";
}
Ekspresi 2
Seringkali ekspresi 2 digunakan untuk mengevaluasi kondisi variabel awal
Ini tidak selalu terjadi. JavaScript tidak peduli. Ekspresi 2 juga opsional
Jika ekspresi 2 mengembalikan true, pengulangan akan dimulai lagi. Jika mengembalikan false, loop akan berakhir
Jika Anda menghilangkan ekspresi 2, Anda harus memberikan jeda di dalam loop. Jika tidak, loop tidak akan pernah berakhir. Ini akan merusak browser Anda. Baca tentang istirahat di bab selanjutnya dari tutorial ini
Ekspresi 3
Seringkali ekspresi 3 menambah nilai variabel awal
Ini tidak selalu terjadi. JavaScript tidak peduli. Ekspresi 3 adalah opsional
Ekspresi 3 dapat melakukan apa saja seperti kenaikan negatif (i--), kenaikan positif (i = i + 15), atau yang lainnya
Ekspresi 3 juga dapat dihilangkan (seperti saat Anda menaikkan nilai di dalam loop)
Contoh
biarkan saya = 0;
biarkan len = mobil. panjangnya;
biarkan teks = "";
untuk (; i < len; ) {
teks += mobil[i] + "
";
saya++;
}
Lingkup Lingkaran
Menggunakan var dalam satu lingkaran
Contoh
var i = 5;
untuk (var i = 0; i < 10; i++) {
// beberapa kode
}
// Ini aku 10
Cobalah sendiri "Menggunakan let dalam satu lingkaran
Contoh
misalkan i = 5;
for (biarkan i = 0; i < 10; i++) {
// beberapa kode
}
// Ini aku 5
Cobalah sendiri "Pada contoh pertama, menggunakan var, variabel yang dideklarasikan dalam loop mendeklarasikan ulang variabel di luar loop
Dalam contoh kedua, menggunakan let_, variabel yang dideklarasikan dalam loop tidak mendeklarasikan ulang variabel di luar loop
Ketika let_ digunakan untuk mendeklarasikan variabel i dalam sebuah loop, variabel i hanya akan terlihat di dalam loop
Loops memungkinkan kita untuk menggilir item dalam array atau objek dan melakukan hal-hal seperti mencetaknya, memodifikasinya, atau melakukan jenis tugas atau tindakan lainnya. Ada berbagai jenis perulangan, dan perulangan for dalam JavaScript memungkinkan kita melakukan iterasi melalui kumpulan (seperti larik)
Dalam artikel ini, kita akan mempelajari tentang for loop yang disediakan JavaScript. Kita akan melihat bagaimana const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 pernyataan loop digunakan dalam JavaScript, sintaks, contoh cara kerjanya, kapan harus menggunakan atau menghindarinya, dan jenis loop lain apa yang dapat kita gunakan sebagai gantinya
Mengapa Menggunakan For Loops dalam Kode JavaScript
Dalam JavaScript, seperti bahasa pemrograman lainnya, kami menggunakan perulangan untuk membaca atau mengakses item koleksi. Koleksi bisa berupa array atau objek. Setiap kali pernyataan loop menggilir item dalam koleksi, kami menyebutnya iterasi
Ada dua cara untuk mengakses item dalam koleksi. Cara pertama adalah melalui kuncinya dalam koleksi, yang merupakan indeks dalam array atau properti dalam suatu objek. Cara kedua adalah melalui item itu sendiri, tanpa perlu kunci
Definisi dari for…in Loop
Loop JavaScript for melewati atau mengulangi kunci koleksi. Dengan menggunakan kunci ini, Anda kemudian dapat mengakses item yang diwakilinya dalam koleksi
Kumpulan item dapat berupa array, objek, atau bahkan string
Sintaks for…in Loop
Loop for memiliki sintaks atau struktur berikut
for (let key in value) { //do something here }_Dalam blok kode ini, const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"_3 adalah kumpulan item yang kita iterasi. Itu bisa berupa objek, array, string, dan sebagainya. const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"4 akan menjadi kunci dari setiap item di const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"3, berubah pada setiap iterasi ke kunci berikutnya dalam daftar
Perhatikan bahwa kami menggunakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"6 atau const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"7 untuk menyatakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"4
Menggunakan for Loop dengan Objek
Saat menggunakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop untuk mengulangi objek dalam JavaScript, kunci atau properti yang diulang — yang, dalam cuplikan di atas, diwakili oleh variabel const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"4 — adalah properti objek itu sendiri
Karena objek mungkin mewarisi item melalui rantai prototipe, yang mencakup metode default dan properti Objek serta prototipe Objek yang mungkin kita definisikan, maka kita harus menggunakan hasOwnProperty
Untuk contoh loop di atas objek yang dapat diubah
Dalam contoh berikut, kami mengulangi variabel const arr = ["JavaScript", "PHP", "Python", "Java"]; for (let key in arr) { console.log(key + ": " + arr[key]) } // Output: // "0: JavaScript" // "1: PHP" // "2: Python" // "3: Java"1 dan mencatat setiap properti dan nilai
const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"Perhatikan bahwa urutan iterasi menaik untuk kunci (yaitu, dimulai dengan angka dalam urutan numerik dan kemudian huruf dalam urutan abjad). Namun, urutan keluaran ini berbeda dari urutan indeks item yang dibuat saat menginisialisasi objek
Lihat Pena Looping Objects oleh SitePoint (@SitePoint) di CodePen
Menggunakan for…in Loop dengan Array
Saat menggunakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop untuk mengulangi array dalam JavaScript, const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"4 dalam hal ini akan menjadi indeks elemen. Namun, indeks mungkin diulang dalam urutan acak
Jadi, jika variabel const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"3 dalam struktur sintaks loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 yang kami tunjukkan di atas adalah array dari lima item, const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"4 tidak akan dijamin menjadi 0 sampai 4. Beberapa indeks mungkin mendahului yang lain. Detail tentang kapan hal ini mungkin terjadi dijelaskan nanti di artikel ini
Untuk… dalam contoh array loop
Dalam contoh di bawah ini, kami mengulangi variabel berikut const arr = ["JavaScript", "PHP", "Python", "Java"]; for (let key in arr) { console.log(key + ": " + arr[key]) } // Output: // "0: JavaScript" // "1: PHP" // "2: Python" // "3: Java"7
const arr = ["JavaScript", "PHP", "Python", "Java"]; for (let key in arr) { console.log(key + ": " + arr[key]) } // Output: // "0: JavaScript" // "1: PHP" // "2: Python" // "3: Java"Dan dalam loop, kami merender indeks dan nilai setiap elemen larik
Lihat Pen Looping Arrays oleh SitePoint (@SitePoint) di CodePen
Menggunakan for…in Loop dengan String
Anda dapat mengulang string dengan loop JavaScript const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0. Namun, tidak disarankan untuk melakukannya, karena Anda akan mengulang indeks karakter daripada karakter itu sendiri.
Contoh string for…in loop
Dalam contoh di bawah ini, kami mengulangi variabel berikut const arr = ["JavaScript", "PHP", "Python", "Java"]; for (let key in arr) { console.log(key + ": " + arr[key]) } // Output: // "0: JavaScript" // "1: PHP" // "2: Python" // "3: Java"9
const str = "Hello!"; for (let key in str) { console.log(key + ": " + str.charAt(key)); } //Output // "0: H" // "1: e" // "2: l" // "3: l" // "4: o" // "5: !"Di dalam loop, kami merender kunci, atau indeks dari setiap karakter, dan karakter pada indeks tersebut
Lihat Pen Strings Loop oleh SitePoint (@SitePoint) di CodePen
Mari kita lihat situasi yang paling cocok untuk pengulangan JavaScript const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0
Iterasi objek dengan JavaScript for…in loop
Karena loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 hanya mengulangi properti enumerable dari suatu objek — yang merupakan properti objek itu sendiri daripada properti seperti const str = "Hello!"; for (let key in str) { console.log(key + ": " + str.charAt(key)); } //Output // "0: H" // "1: e" // "2: l" // "3: l" // "4: o" // "5: !"2 yang merupakan bagian dari prototipe objek — ada baiknya menggunakan loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 untuk mengulang objek. Loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 menyediakan cara mudah untuk beralih ke properti objek dan akhirnya nilainya
Debugging dengan for…in loop
Kasus penggunaan lain yang baik untuk loop JavaScript const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 adalah debugging. Misalnya, Anda mungkin ingin mencetak ke konsol atau elemen HTML properti objek dan nilainya. Dalam hal ini, const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop adalah pilihan yang baik
Saat menggunakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop untuk men-debug objek dan nilainya, Anda harus selalu ingat bahwa iterasi tidak teratur, artinya urutan item yang diulangi loop bisa acak. Jadi, urutan properti yang diakses mungkin tidak seperti yang diharapkan
Kapan Tidak Menggunakan JavaScript untuk… dalam Loop
Sekarang mari kita lihat situasi di mana loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 bukanlah pilihan terbaik
Pengulangan array secara teratur
Karena urutan indeks dalam iterasi tidak dijamin saat menggunakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop, disarankan untuk tidak mengulang array jika mempertahankan urutan diperlukan
Ini sangat penting jika Anda ingin mendukung browser seperti IE, yang mengulangi urutan pembuatan item, bukan urutan indeks. Ini berbeda dari cara kerja browser modern saat ini, yang mengulang array berdasarkan indeks dalam urutan menaik
Jadi, misalnya, jika Anda memiliki array berisi empat item dan Anda memasukkan item ke posisi tiga, di browser modern loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 akan tetap mengulang array dalam urutan dari 0 hingga 4. Di IE, saat menggunakan const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"_0 loop, itu akan mengulangi empat item yang awalnya ada di array di awal dan kemudian mencapai item yang ditambahkan di posisi tiga
Membuat perubahan saat iterasi
Penambahan, penghapusan, atau modifikasi apa pun pada properti tidak menjamin iterasi terurut. Membuat perubahan pada properti dalam const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop harus dihindari. Ini sebagian besar karena sifatnya yang tidak teratur
Jadi, jika Anda menghapus item sebelum Anda mencapainya dalam iterasi, item tersebut tidak akan dikunjungi sama sekali di seluruh loop
Demikian pula, jika Anda membuat perubahan pada properti, itu tidak menjamin bahwa item tersebut tidak akan ditinjau kembali. Jadi, jika sebuah properti diubah mungkin akan dikunjungi dua kali dalam loop daripada sekali
Selain itu, jika properti ditambahkan selama iterasi, properti tersebut mungkin atau mungkin tidak dikunjungi sama sekali selama iterasi
Karena situasi ini, sebaiknya hindari membuat perubahan, penghapusan, atau penambahan apa pun pada objek dalam const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop
Berikut adalah contoh menambahkan elemen dalam loop const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0. Kita bisa melihat hasil dari loop pertama kemudian yang kedua setelah melakukan penambahan pada loop pertama
Lihat Penambahan Pena di Object Loop oleh SitePoint (@SitePoint) di CodePen
Seperti yang Anda lihat pada contoh di atas, elemen yang ditambahkan tidak diulang
Alternatif untuk For Loops di JavaScript
Jadi dalam situasi di mana const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0 loop bukanlah pilihan terbaik, apa yang sebaiknya Anda gunakan?
Menggunakan for loop dengan array
Tidak pernah salah untuk menggunakan for loop. Loop JavaScript for adalah salah satu alat paling dasar untuk mengulang elemen array. Loop for memungkinkan Anda untuk mengambil kendali penuh atas indeks saat Anda mengulang array
Ini berarti bahwa saat menggunakan for loop, Anda dapat bergerak maju dan mundur, mengubah item dalam array, menambahkan item, dan lainnya, sambil tetap mempertahankan urutan array
Pernyataan berikut membuat loop yang berulang pada array dan mencetak nilainya ke konsol
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }metode forEach untuk array dan objek
forEach dalam JavaScript adalah metode pada prototipe larik yang memungkinkan kita untuk mengulangi elemen larik dan indeksnya dalam fungsi panggilan balik
Fungsi panggilan balik adalah fungsi yang Anda berikan ke metode atau fungsi lain untuk dieksekusi sebagai bagian dari eksekusi metode atau fungsi tersebut. Ketika datang ke arr.forEach((value) => console.log(value)); _0 dalam JavaScript, itu berarti bahwa fungsi panggilan balik akan dieksekusi untuk setiap iterasi yang menerima item saat ini dalam iterasi sebagai parameter
Misalnya, pernyataan berikut mengulangi variabel const arr = ["JavaScript", "PHP", "Python", "Java"]; for (let key in arr) { console.log(key + ": " + arr[key]) } // Output: // "0: JavaScript" // "1: PHP" // "2: Python" // "3: Java"7 dan mencetak nilainya di konsol menggunakan arr.forEach((value) => console.log(value)); 0
arr.forEach((value) => console.log(value));Anda juga dapat mengakses indeks array
arr.forEach((value, index) => console.log(value, index));Loop JavaScript arr.forEach((value) => console.log(value)); _0 juga dapat digunakan untuk mengulangi objek dengan menggunakan Object. keys(), meneruskannya ke objek yang ingin Anda iterasi, yang mengembalikan larik properti objek itu sendiri
Object.keys(obj).forEach((key) => console.log(obj[key]));Sebagai alternatif, Anda dapat arr.forEach((value) => console.log(value)); _0 mengulang nilai properti secara langsung jika Anda tidak memerlukan akses ke properti menggunakan Object. nilai()
Object.values(obj).forEach((value) => console.log(value));Perhatikan bahwa arr.forEach((value) => console.log(value)); 5 mengembalikan item dalam urutan yang sama seperti const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"0
Kesimpulan
Dengan menggunakan loop JavaScript const obj = { "a": "JavaScript", 1: "PHP", "b": "Python", 2: "Java" }; for (let key in obj) { console.log(key + ": " + obj[key] ) } // Output: // "1: PHP" // "2: Java" // "a: JavaScript" // "b: Python"_0, kita dapat mengulang kunci atau properti objek. Ini bisa berguna saat mengulang properti objek atau untuk debugging, tetapi harus dihindari saat mengulang array atau membuat perubahan pada objek. Saya harap Anda telah menemukan contoh dan penjelasan di atas berguna
Bagikan Artikel Ini
Shahed Nasser
Saya adalah full-stack developer yang bersemangat mempelajari sesuatu yang baru setiap hari, kemudian membagikan pengetahuan saya dengan komunitas