Setiap bahasa pemrograman mengandung loop. Loop melakukan operasi (yaitu suatu pekerjaan) beberapa kali, biasanya satu kali untuk setiap elemen dalam array atau daftar, atau sekadar mengulangi operasi hingga kondisi tertentu terpenuhi.
JavaScript khususnya memiliki banyak jenis loop yang berbeda. Saya bahkan belum menggunakan semuanya, jadi karena penasaran, saya pikir saya akan melakukan tinjauan tingkat tinggi tentang semuanya. Ternyata, ada alasan bagus mengapa saya tidak menggunakan setidaknya beberapa tipe yang berbeda.
Jadi, for Sekarang mari kita luangkan waktu while Jelajahi berbagai jenis episode, semampu kami do dengan each Yang mana, dan mengapa Anda menggunakan salah satunya, bukan yang lain. (Anda akan menganggap permainan kata sederhana ini pada akhirnya sangat lucu.)
-Advertisement-.
itu while Dan do...while Cincin
Yang pertama adalah while Episode. Ini adalah jenis perulangan yang paling dasar dan berpotensi menjadi yang paling mudah dibaca dan tercepat dalam banyak kasus. Biasanya digunakan untuk melakukan sesuatu sampai syarat tertentu terpenuhi. Ini juga merupakan cara termudah untuk membuat putaran tak terbatas atau putaran yang tidak pernah berhenti. Di sana juga do...while Faktanya, satu-satunya perbedaan adalah kondisi diperiksa pada akhir setiap iterasi dibandingkan dengan awal setiap iterasi.
// remove the first item from an array and log it until the array is empty
let queue1 = ["a", "b", "c"];
while (queue1.length) {
let item = queue1.shift();
console.log(item);
}
// same as above but also log when the array is empty
let queue2 = [];
do {
let item = queue2.shift() ?? "empty";
console.log(item);
} while (queue2.length);itu for episode
Berikutnya adalah for episode. Cara yang benar dalam melakukan sesuatu harus beberapa kali. Jika Anda perlu mengulangi suatu operasi, misalnya 10 kali, gunakan for Perulangan khusus ini mungkin mengintimidasi bagi mereka yang baru mengenal pemrograman, tetapi menulis ulang perulangan yang sama whilePerulangan -style dapat membantu memperjelas sintaksis, membuatnya lebih mudah untuk diingat.
// log the numbers 1 to 5
for (let i = 1; i <= 5; i++) {
console.log(i);
}
// same thing but as a while loop
let i = 1; // the first part of a for loop
// the second
while (i <= 5) {
console.log(i);
i++; // the third
}
("end");itu for...of Dan for await...of Cincin
A for...of Perulangan adalah cara termudah untuk menavigasi array.
let myList = ["a", "b", "c"];
for (let item of myList) {
console.log(item);
}Protokol-protokol ini tidak terbatas pada array. Secara teknis, ia dapat mengulangi apa pun yang mengimplementasikan apa yang disebut protokol yang dapat diulang. Ada beberapa tipe bawaan yang mengimplementasikan protokol: array, peta, set, dan string, dan lain-lain, tetapi Anda dapat mengimplementasikan protokol dalam kode Anda sendiri. Yang harus Anda lakukan adalah menambahkan [Symbol.iterator] Cara suatu objek dibuat harus mengembalikan sebuah iterator. Agak membingungkan, tetapi intinya adalah iterator adalah sesuatu yang memiliki metode khusus yang mengembalikan iterator; Metode pabrik untuk duplikat, jika Anda mau. Ada tipe fungsi khusus yang disebut generator yang merupakan fungsi yang mengembalikan objek yang dapat diubah dan objek yang dapat diubah.
let myList = {
*[Symbol.iterator]() {
yield "a";
yield "b";
yield "c";
},
};
for (let item of myList) {
console.log(item);
}di sana async Versi dari semua hal yang baru saja saya sebutkan: async item yang dapat diulang, async Repeater, dan async Generator. Anda dapat menggunakan async Dapat diulang dengan l await...of.
async function delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
// this time we're not making an iterable, but a generator
async function* aNumberAMinute() {
let i = 0;
while (true) {
// an infinite loop
yield i++;
// pause a minute
await delay(60_000);
}
}
// it's a generator, so we need to call it ourselves
for await (let i of aNumberAMinute()) {
console.log(i);
// stop after one hour
if (i >= 59) {
break;
}
}Ada satu hal yang tidak jelas await...of Pernyataannya adalah Anda dapat menggunakannya dengan iterable asinkron dan itu akan berfungsi dengan baik. Namun, hal sebaliknya tidak benar; Anda tidak dapat menggunakan async Item yang bisa diulangi for...of penyataan.
itu forEach Dan map Cincin
Meskipun secara teknis ini bukan perulangan, Anda dapat menggunakannya untuk mengulangi daftar.
Itulah masalahnya forEach metode. Secara historis, ini jauh lebih lambat dibandingkan menggunakan for Saya pikir dalam beberapa kasus hal ini mungkin tidak berlaku lagi, tetapi jika kinerja menjadi perhatian, saya akan menghindari menggunakannya. Sekarang kita memilikinya for...of Saya tidak yakin ada alasan bagus untuk menggunakannya. Saya pikir satu-satunya alasan ini mungkin muncul adalah jika Anda memiliki fungsi yang siap digunakan sebagai fungsi panggilan balik, tetapi Anda dapat dengan mudah memanggil fungsi yang sama dari dalam skrip for...of.
forEach Itu juga menerima indeks untuk setiap item, jadi ini mungkin sesuatu yang Anda perlukan juga. Pada akhirnya, keputusan untuk menggunakannya mungkin tergantung pada apakah kode lain yang sedang Anda kerjakan menggunakannya, tapi saya pribadi akan menghindari menggunakannya jika saya sedang menulis sesuatu yang baru.
let myList = ["a", "b", "c"];
for (let item of myList) {
console.log(item);
}
// but maybe if I need the index use forEach
["a", "b", "c"].forEach((item, index) => {
console.log(`${index}: ${item}`);
});Sementara itu, map Pada dasarnya mengubah satu kelompok ke kelompok lain. Ini masih memiliki efek yang sama terhadap kinerja forEach Namun lebih baik membacanya sedikit dibandingkan alternatifnya. Namun hal tersebut tentu bersifat subyektif, begitu pula halnya dengan satu sama lain forEach Anda harus melakukan apa yang dilakukan kode lainnya. Anda sering melihat ini di perpustakaan yang terinspirasi React dan React sebagai cara dasar untuk menavigasi array dan menampilkan daftar item dalam JSX.
function MyList({items}) {
return (
<ul>
{items.map((item) => {
return <li>{item}</li>;
})}
</ul>
);
}itu for...in episode
Daftar loop dalam JavaScript ini tidak akan lengkap tanpa menyebutkannya for...in pernyataan karena dapat melewati bidang objek. Ia juga mengunjungi bidang yang diwarisi oleh rantai prototipe objek, dan sejujurnya saya selalu menghindarinya karena alasan itu.
Namun, jika Anda memiliki objek literal, maka for...in Ini mungkin cara yang layak untuk menduplikasi kunci objek ini. Perlu juga dicatat bahwa jika Anda telah lama memprogram JavaScript, Anda mungkin ingat bahwa urutan kunci antar browser tidak konsisten, tetapi sekarang urutannya konsisten. Kunci apa pun yang dapat menjadi penunjuk ke array (yaitu bilangan bulat positif) pertama-tama akan berada dalam urutan menaik, kemudian semua kunci lainnya sesuai urutan penyusunannya.
let myObject = {
a: 1,
b: 2,
c: 3,
};
for (let k in myObject) {
console.log(myObject[k]);
}kesimpulan
Loop adalah sesuatu yang digunakan oleh banyak programmer setiap hari, meskipun kita mungkin menganggapnya remeh dan tidak terlalu memikirkannya.
Namun ketika Anda mundur dan melihat semua cara yang kami gunakan untuk mengulangi sesuatu dalam JavaScript, ternyata ada banyak cara untuk melakukannya. Tidak hanya itu, namun terdapat perbedaan signifikan – bahkan tidak kentara – di antara keduanya yang dapat memengaruhi pendekatan Anda terhadap skrip.
Semua Tentang JavaScript Loops awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
