Bagaimana cara menghentikan JavaScript for loop?

128

Saya menggunakan JavaScript ini untuk mengulang melalui sebuah array dan menemukan elemen array yang cocok:

var remSize = [], 
    szString, remData, remIndex, i;

for (i = 0; i < remSize.length; i++) {      
    // I'm looking for the index i, when the condition is true
    remSize[i].size == remData.size ? remIndex = i : remIndex = -1;     
}

Array berisi ini "ukuran": ["34", "36", "38"...].

remData.size adalah "ukuran" yang saya cari (mis. "36").

Saya perlu mengembalikan indeks ijika ukuran yang saya cari ada dalam indeks. Kalau tidak, saya harus kembali -1. Apakah ada cara yang lebih baik untuk melakukan ini?

sering
sumber

Jawaban:

194

Untuk menghentikan forloop di awal JavaScript, Anda menggunakan break:

var remSize = [], 
    szString,
    remData,
    remIndex,
    i;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // Set a default if we don't find it
for (i = 0; i < remSize.length; i++) {      
     // I'm looking for the index i, when the condition is true
     if (remSize[i].size === remData.size) {
          remIndex = i;
          break;       // <=== breaks out of the loop early
     }
}

Jika Anda berada di lingkungan ES2015 (alias ES6), untuk kasus penggunaan khusus ini, Anda dapat menggunakan Array#findIndex(untuk menemukan indeks entri) atau Array#find(untuk menemukan entri itu sendiri), keduanya dapat di-shim / polyfilled:

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = remSize.findIndex(function(entry) {
     return entry.size === remData.size;
});

Array#find:

var remSize = [], 
    szString,
    remData,
    remEntry;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remEntry = remSize.find(function(entry) {
     return entry.size === remData.size;
});

Array#findIndexberhenti pertama kali callback mengembalikan nilai yang sebenarnya, mengembalikan indeks untuk panggilan itu ke callback; itu kembali -1jika callback tidak pernah mengembalikan nilai yang sebenarnya. Array#findjuga berhenti ketika menemukan apa yang Anda cari, tetapi mengembalikan entri, bukan indeksnya (atau undefinedjika callback tidak pernah mengembalikan nilai yang sebenarnya).

Jika Anda menggunakan lingkungan yang kompatibel dengan ES5 (atau shim ES5), Anda dapat menggunakan somefungsi baru pada array, yang memanggil callback hingga callback mengembalikan nilai yang sebenarnya:

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // <== Set a default if we don't find it
remSize.some(function(entry, index) {
    if (entry.size === remData.size) {
        remIndex = index;
        return true; // <== Equivalent of break for `Array#some`
    }
});

Jika Anda menggunakan jQuery, Anda dapat menggunakan jQuery.eachuntuk melakukan loop melalui array; itu akan terlihat seperti ini:

var remSize = [], 
    szString,
    remData,
    remIndex;

/* ...I assume there's code here putting entries in `remSize` and assigning something to `remData`... */

remIndex = -1; // <== Set a default if we don't find it
jQuery.each(remSize, function(index, entry) {
    if (entry.size === remData.size) {
        remIndex = index;
        return false; // <== Equivalent of break for jQuery.each
    }
});
TJ Crowder
sumber
1
menggunakan pernyataan return adalah pendekatan yang baik. Terima kasih @TJ Crowder
techloris_109
@TJ Crowder pernyataan mana yang merupakan pendekatan yang baik: return false atau break?
Ilyas karim
3
@Ilyaskarim: Anda menggunakan yang sesuai dengan konstruksi yang Anda gunakan ( breakdalam satu forlingkaran, return falsedalam jQuery.each, return truedalam some, ...).
TJ Crowder
13

Gunakan for of loop sebagai gantinya yang merupakan bagian dari rilis ES2015. Tidak seperti forEach, kita dapat menggunakan return, break, dan lanjutkan. Lihat https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/

let arr = [1,2,3,4,5];
for (let ele of arr) {
  if (ele > 3) break;
  console.log(ele);
}
Srini Karthikeyan
sumber
penggunaan es6 yang baik, saya pikir ini adalah salah satu jawaban terbaik di sini
Emad Salah
Memang, saya akan mengatakan ini adalah jawaban terbaik di sini - cara paling rapi untuk melakukannya ("sintaks langsung yang paling ringkas untuk perulangan melalui elemen array", seperti yang dikatakan Mozilla Hacks dalam tautan di jawaban). Kita harus membayar kembali semua kerja keras yang dilakukan pada ES6 dengan memanfaatkan fitur-fitur barunya di mana pun kita bisa (dan menguntungkan diri kita sendiri dalam prosesnya).
Velojet
10

Logikanya salah. Itu akan selalu mengembalikan hasil elemen terakhir dalam array.

remIndex = -1;

for (i = 0; i < remSize.length; i++) {      
    if (remSize[i].size == remData.size) {
        remIndex = i
        break;
    }
}
amit_g
sumber
0

Saya tahu ini agak lama, tetapi alih-alih melakukan perulangan melalui array dengan for loop, akan jauh lebih mudah untuk menggunakan metode ini <array>.indexOf(<element>[, fromIndex])

Ini mengulang melalui array, menemukan dan mengembalikan indeks pertama dari sebuah nilai. Jika nilainya tidak ada dalam larik, ia mengembalikan -1.

<array>adalah larik untuk dilihat, <element>adalah nilai yang Anda cari, dan [fromIndex]merupakan indeks untuk memulai (defaultnya 0).

Saya harap ini membantu mengurangi ukuran kode Anda!

JMoore2007
sumber
1
Ini tidak menjawab pertanyaan judul: How to stop a JavaScript for loop?Ini tidak jawabannya Apakah ada cara yang lebih baik untuk kembali indeks pertandingan / -1 jika tidak ada .
greybeard