Bisakah kita memanggil fungsi di dalam for loop di javascript?

Loop berguna, jika Anda ingin menjalankan kode yang sama berulang kali, setiap kali dengan nilai yang berbeda

Table of Contents Show

Alih-alih menulis
Kamu bisa menulis
Berbagai Jenis Loop
Lingkup Lingkaran
1. Kode aneh
2. Bedah misterinya
3. Bagaimana mengatasinya?
3. 1 Saya suka fungsi dan saya akan membuatnya dengan biaya berapa pun
3. 2 Apakah ayah bahagia?
4. Akhirnya
Bisakah saya memanggil fungsi di dalam for loop di JavaScript?
Bagaimana cara menggunakan fungsi dalam loop JavaScript?
Bisakah Anda memiliki loop for di dalam JavaScript for loop?
Bisakah Anda memanggil fungsi di dalam fungsi JavaScript?

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] + "
";
}

Cobalah sendiri "

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 + "
";
}

Cobalah sendiri "

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] + "
";
}

Cobalah sendiri "

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] + "
";
}

Cobalah sendiri "

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++;
}

Cobalah sendiri "

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

Apakah Anda tahu JSLint? . Siapa bapak JavaScript, dia pasti memiliki latar belakang yang cukup untuk menilai. . ) Dan JSLint sangat ketat, dan kadang-kadang Anda bisa menyebutnya kaku, tetapi dia selalu benar. Jika Anda pernah menggunakan alat ini sebelumnya, Anda mungkin melihat beberapa kesalahan, salah satunya mungkin terlihat seperti ini. “Jangan membuat fungsi dalam satu lingkaran”. Oke, mari kita perbaiki, tunggu, apa?

Ya, mungkin terdengar absurd pada awalnya, mari selami untuk mengetahui apa yang ingin dikatakan sang ayah xD

1. Kode aneh

Jika Anda telah mengikuti saya di sini dari artikel ini Apa itu penutupan dalam JavaScript dan mengapa itu salah. Anda mungkin masih penasaran dengan kode berikut. Dan jika Anda tidak tahu penutupan, Anda harus memeriksa artikel itu terlebih dahulu

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

Kode sederhana, buat loop terlebih dahulu, untuk setiap loop, tetapkan nilai saat ini

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 ke fungsi yang baru dibuat. Kemudian mulai loop baru, jalankan fungsi satu per satu, sesuatu akan ditampilkan ke konsol

Ini adalah hasil yang mungkin Anda harapkan

1
2
3

My value: 0
My value: 1
My value: 2

Tetapi sebaliknya, itu akan menghasilkan seperti ini

1
2
3

My value: 3
My value: 3
My value: 3

Dan sebelum Anda menjalankan kode ini, Tuan Douglas telah memperingatkan Anda, ""Jangan membuat fungsi dalam satu lingkaran"". Ya, dia benar, tetapi mengapa?

2. Bedah misterinya

Ini sederhana karena, dalam fungsi anonim yang dibuat dalam loop, Anda telah merujuk variabel yang termasuk dalam lingkup luar, jadi lain kali saat Anda menjalankan fungsi ini, variabel

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 adalah 3. Anda akan bertanya, apa?

var i = 0,
  j = 0;
var funcs = [];
for (i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

Anda tahu

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

6 dan

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

7 dalam JavaScript, bukan? . Jadi, inilah alasan mengapa

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

_4 muncul di blok pertama. Dan inilah yang terjadi selanjutnya

variabel

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

_4 dan

1
2
3

0 dideklarasikan terlebih dahulu

Saat loop pertama berjalan, fungsi anonim telah dibuat di dalam loop

Di dalam fungsi anonim yang baru dibuat, itu merujuk variabel

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 yang tidak termasuk dalam ruang lingkupnya

Setelah loop pertama, nilai variabel

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 terakumulasi menjadi 3 karena loop berjalan sebanyak 3 kali

Di loop kedua, setiap fungsi yang dibuat di loop pertama akan dipanggil

Ketika dipanggil, juru bahasa akan memeriksa nilai

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4, dan ternyata tidak ada

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 di dalamnya

Karena anonim ini telah menjadi penutup, penafsir akan melihat rantai cakupannya

Akhirnya, penafsir menemukan variabel

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

_4, dalam lingkup global, masih dalam lingkup leksikalnya, yang benar-benar sah untuk dirujuk oleh fungsi anonim ini

Dan nilai

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

_4 adalah

1
2
3

7. Kami menyelesaikannya di langkah 4

Jadi,
```
1
2
3
```
_7 akan menjadi output
Apa yang terjadi setelahnya untuk loop kedua dan ketiga benar-benar sama dari langkah 6~10

Kamu melihat? . Jadi, Tuan Douglas telah memberi kami nasihatnya dengan JSLint

3. Bagaimana mengatasinya?

Karena kita tahu penyebabnya, kita bisa mengatasinya sekarang, dengan menggunakan konsep yang sama

3. 1 Saya suka fungsi dan saya akan membuatnya dengan biaya berapa pun

Anda mungkin berpikir bahwa karena

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

_4 adalah nilai primitif, kita dapat dengan sederhana mendeklarasikan variabel baru di dalam fungsi itu dalam lingkaran dan menugaskan

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 ke dalamnya. Sesuatu seperti

for (i = 0; i < 3; i++) {
  funcs[i] = function() {
    var my_i = i;
    console.log("My value: " + my_i);
  };
}

Itu tidak akan berhasil, tetap memberimu tiga

My value: 0
My value: 1
My value: 2

Alasannya masih seperti sebelumnya

Ketika fungsi anonim dijalankan, ketika mencoba mengevaluasi my_i, itu perlu dibaca dari

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4, dan

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

4 sudah

1
2
3

Jadi, salah satu cara untuk mengatasi ini adalah dengan membuat penutupan lain untuk menyimpan nilai sementara tersebut. Jadi itu membawa kita ke kode berikut

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

var funcs = [];
for (var i = 0; i < 3; i++) {
  // let's create 3 functions
  funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](); // and now let's run each one to see
}

Kita mendapatkan apa yang kita inginkan

1
2
3

My value: 0
My value: 1
My value: 2

Apa yang telah kita lakukan?

3. 2 Apakah ayah bahagia?

OK, jika Anda menggunakan JSHint, sebagian besar bagus, tetapi jika Anda menggunakan JSLint, masih ada beberapa keluhan, saya katakan sebelumnya,

My value: 0
My value: 1
My value: 2

5, beberapa keluhan mungkin terlihat sangat aneh seperti

My value: 0
My value: 1
My value: 2

6, ya, maksudnya saat Anda membuatnya untuk loop . ?. ?. Ya, ayah berpikir Anda harus menggunakan

My value: 0
My value: 1
My value: 2

_8… Oke, lebih banyak dari ini di luar topik

4. Akhirnya

Sekarang Anda tahu mengapa tidak membuat fungsi dalam satu lingkaran

Karena konsep 'penutupan' dalam JavaScript akan menjadi rumit ketika berhadapan dengan fungsi yang dibuat di dalam sebuah loop. Anda harus selalu mencoba membuat fungsi terlebih dahulu atau menjalankannya segera setelah pembuatan

Bisakah saya memanggil fungsi di dalam for loop di JavaScript?

Fungsi hanyalah serangkaian instruksi, jadi Anda dapat, secara teoritis, mengambil instruksi fungsi apa pun dan menempatkannya langsung di dalam loop , .

Bagaimana cara menggunakan fungsi dalam loop JavaScript?

for/in - mengulangi properti objek . for/of - loop melalui nilai objek yang dapat diubah. while - loop melalui blok kode saat kondisi yang ditentukan benar. do/while - juga mengulang blok kode saat kondisi tertentu benar.

Bisakah Anda memiliki loop for di dalam JavaScript for loop?

JavaScript mendukung fitur loop bersarang, di mana sebuah loop hadir di dalam loop lain . Sebuah loop dapat memiliki satu atau nomor dan/atau n level loop bersarang yang ditentukan di dalam loop lain. Untuk setiap loop luar, loop dalam akan dieksekusi.

Bisakah Anda memanggil fungsi di dalam fungsi JavaScript?

Memanggil fungsi dari dalam dirinya sendiri disebut rekursi dan jawaban sederhananya adalah, ya.