Làm cách nào để dừng JavaScript cho vòng lặp?


127

Tôi đang sử dụng JavaScript này để lặp qua một mảng và tìm một phần tử mảng phù hợp:

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

Mảng chứa các "kích cỡ" này : ["34", "36", "38"...].

remData.size là "kích thước" tôi đang tìm kiếm (ví dụ "36").

Tôi cần trả về chỉ mục inếu kích thước tôi đang tìm kiếm nằm trong chỉ mục. Nếu không tôi cần phải trở về -1. Có cách nào tốt hơn để làm điều này?

Câu trả lời:


193

Để dừng forvòng lặp sớm trong JavaScript, bạn sử dụng 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
     }
}

Nếu bạn đang ở trong môi trường ES2015 (còn gọi là ES6), trong trường hợp sử dụng cụ thể này, bạn có thể sử dụng Array#findIndex(để tìm chỉ mục của mục nhập) hoặc Array#find(để tìm chính mục đó), cả hai đều có thể được shimmed / polyfilt:

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#findIndexdừng lần đầu tiên cuộc gọi lại trả về giá trị trung thực, trả lại chỉ mục cho cuộc gọi đó cho cuộc gọi lại; nó trả về -1nếu cuộc gọi lại không bao giờ trả về giá trị trung thực. Array#findcũng dừng lại khi tìm thấy những gì bạn đang tìm kiếm, nhưng nó trả về mục nhập, không phải chỉ mục của nó (hoặc undefinednếu cuộc gọi lại không bao giờ trả về giá trị trung thực).

Nếu bạn đang sử dụng môi trường tương thích ES5 (hoặc shim ES5), bạn có thể sử dụng somechức năng mới trên mảng, gọi lại cuộc gọi cho đến khi cuộc gọi lại trả về giá trị trung thực:

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`
    }
});

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng jQuery.eachđể lặp qua một mảng; nó sẽ trông như thế này:

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

1
sử dụng tuyên bố trở lại là một cách tiếp cận tốt. Cảm ơn @TJ Crowder
techloris_109

@TJ Crowder tuyên bố nào là một cách tiếp cận tốt: trả lại sai hoặc phá vỡ?
Ilyas karim

3
@Ilyaskarim: Bạn sử dụng một cấu trúc phù hợp với cấu trúc bạn đang sử dụng ( breaktrong một forvòng lặp, return falsetrong jQuery.each, return truetrong some, ...).
TJ Crowder

13

Sử dụng cho vòng lặp thay vì là một phần của phiên bản ES2015. Không giống như forEach, chúng ta có thể sử dụng return, break và tiếp tục. Xem 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);
}

sử dụng tốt es6, tôi nghĩ đây là một trong những câu trả lời hay nhất ở đây
Emad Salah

Thật vậy, tôi muốn nói đó là câu trả lời hay nhất ở đây - cách làm việc gọn gàng nhất ("cú pháp trực tiếp, ngắn gọn nhất để lặp qua các phần tử mảng", như Mozilla Hacks nói trong liên kết trong câu trả lời). Chúng ta nên hoàn trả tất cả các công việc khó khăn đã có trong ES6 bằng cách sử dụng các tính năng mới của nó bất cứ nơi nào chúng ta có thể (và có lợi cho bản thân trong quá trình này).
Velojet

10

Logic không chính xác. Nó sẽ luôn trả về kết quả của phần tử cuối cùng trong mảng.

remIndex = -1;

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

0

Tôi biết điều này hơi cũ, nhưng thay vì lặp qua mảng bằng vòng lặp for, việc sử dụng phương thức sẽ dễ dàng hơn nhiều <array>.indexOf(<element>[, fromIndex])

Nó lặp qua một mảng, tìm và trả về chỉ mục đầu tiên của một giá trị. Nếu giá trị không được chứa trong mảng, nó trả về -1.

<array>là mảng để xem qua, <element>là giá trị bạn đang tìm kiếm và [fromIndex]là chỉ mục để bắt đầu (mặc định là 0).

Tôi hy vọng điều này sẽ giúp giảm kích thước mã của bạn!


1
Điều này không trả lời câu hỏi tiêu đề: How to stop a JavaScript for loop?không trả lời Có cách nào tốt hơn để trả lại chỉ số của một trận đấu / -1 nếu không có .
greybeard
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.