Hướng dẫn break out of foreach loop javascript - thoát ra khỏi javascript vòng lặp foreach

Ngày 5 tháng 10 năm 2020

Hàm forEach() của JavaScript thực thi một hàm trên mọi phần tử trong một mảng. Tuy nhiên, vì forEach() là một hàm chứ không phải là một vòng lặp, sử dụng câu lệnh break là lỗi cú pháp:

[1, 2, 3, 4, 5].forEach(v => {
  if (v > 3) {
    // SyntaxError: Illegal break statement
    break;
  }
});

Chúng tôi khuyên bạn nên sử dụng các vòng lặp for/of để lặp lại thông qua một mảng trừ khi bạn có lý do chính đáng. Tuy nhiên, nếu bạn thấy mình bị mắc kẹt với forEach() cần dừng lại sau một điểm nhất định và tái cấu trúc để sử dụng for/of không phải là một lựa chọn, đây là 4 cách giải quyết:

1. Sử dụng // Prints "1, 2, 3" [1, 2, 3, 4, 5].every(v => { if (v > 3) { return false; } console.log(v); // Make sure you return true. If you don't return a value, `every()` will stop. return true; });1 thay vì forEach()

Hàm

// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
1 hoạt động chính xác giống như forEach(), ngoại trừ nó dừng lặp qua mảng bất cứ khi nào hàm gọi lại trả về giá trị giả.

// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});

Với

// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
1,
// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
6 tương đương với break
// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
8 tương đương với
// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
9.

Một cách khác là sử dụng hàm

// Prints "1, 2, 3"
const arr = [1, 2, 3, 4, 5];

// Instead of trying to `break`, slice out the part of the array that `break`
// would ignore.
arr.slice(0, arr.findIndex(v => v > 3)).forEach(v => {
  console.log(v);
});
0, tương tự nhưng chỉ lật các giá trị boolean. Với
// Prints "1, 2, 3"
const arr = [1, 2, 3, 4, 5];

// Instead of trying to `break`, slice out the part of the array that `break`
// would ignore.
arr.slice(0, arr.findIndex(v => v > 3)).forEach(v => {
  console.log(v);
});
0,
// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
8 tương đương với break
// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
6 tương đương với
// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
9.

2. Lọc ra các giá trị bạn muốn bỏ qua

Thay vì suy nghĩ về cách break ra khỏi forEach(), hãy thử suy nghĩ về cách lọc tất cả các giá trị bạn không muốn forEach() lặp lại. Cách tiếp cận này phù hợp hơn với các nguyên tắc lập trình chức năng.

Hàm

// Prints "1, 2, 3"
const arr = [1, 2, 3, 4, 5];

// Instead of trying to `break`, slice out the part of the array that `break`
// would ignore.
arr.slice(0, arr.findIndex(v => v > 3)).forEach(v => {
  console.log(v);
});
9 lấy một cuộc gọi lại và trả về chỉ mục đầu tiên của mảng có giá trị mà cuộc gọi lại trả về sự thật. Sau đó, hàm
// Prints "1, 2, 3"
let shouldSkip = false;
[1, 2, 3, 4, 5].forEach(v => {
  if (shouldSkip) {
    return;
  }
  if (v > 3) {
    shouldSkip = true;
    return;
  }

  console.log(v);
});
0 sao chép một phần của mảng.

// Prints "1, 2, 3"
const arr = [1, 2, 3, 4, 5];

// Instead of trying to `break`, slice out the part of the array that `break`
// would ignore.
arr.slice(0, arr.findIndex(v => v > 3)).forEach(v => {
  console.log(v);
});

3. Sử dụng biến cục bộ // Prints "1, 2, 3" let shouldSkip = false; [1, 2, 3, 4, 5].forEach(v => { if (shouldSkip) { return; } if (v > 3) { shouldSkip = true; return; } console.log(v); });1

Nếu bạn không thể sử dụng

// Prints "1, 2, 3"
[1, 2, 3, 4, 5].every(v => {
  if (v > 3) {
    return false;
  }

  console.log(v);
  // Make sure you return true. If you don't return a value, `every()` will stop.
  return true;
});
1 hoặc
// Prints "1, 2, 3"
let shouldSkip = false;
[1, 2, 3, 4, 5].forEach(v => {
  if (shouldSkip) {
    return;
  }
  if (v > 3) {
    shouldSkip = true;
    return;
  }

  console.log(v);
});
0, bạn có thể kiểm tra cờ
// Prints "1, 2, 3"
let shouldSkip = false;
[1, 2, 3, 4, 5].forEach(v => {
  if (shouldSkip) {
    return;
  }
  if (v > 3) {
    shouldSkip = true;
    return;
  }

  console.log(v);
});
1 khi bắt đầu cuộc gọi lại forEach() của bạn. Nếu bạn đặt
// Prints "1, 2, 3"
let shouldSkip = false;
[1, 2, 3, 4, 5].forEach(v => {
  if (shouldSkip) {
    return;
  }
  if (v > 3) {
    shouldSkip = true;
    return;
  }

  console.log(v);
});
1 thành
// Prints "1, 2, 3"
let shouldSkip = false;
[1, 2, 3, 4, 5].forEach(v => {
  if (shouldSkip) {
    return;
  }
  if (v > 3) {
    shouldSkip = true;
    return;
  }

  console.log(v);
});
7, cuộc gọi lại forEach() sẽ trả về ngay lập tức.

// Prints "1, 2, 3"
let shouldSkip = false;
[1, 2, 3, 4, 5].forEach(v => {
  if (shouldSkip) {
    return;
  }
  if (v > 3) {
    shouldSkip = true;
    return;
  }

  console.log(v);
});

Cách tiếp cận này là cồng kềnh và không phù hợp, nhưng nó hoạt động với chi phí tinh thần tối thiểu. Bạn có thể sử dụng phương pháp này nếu các phương pháp trước đó có vẻ quá thông minh.

4. Sửa đổi độ dài mảng

Hàm forEach() tôn trọng các thay đổi đối với thuộc tính

const myNums = [1, 2, 3, 4, 5];
myNums.forEach((v, index, arr) => {
  console.log(v);
  if (val > 3) {
    arr.length = index + 1; // Behaves like `break`
  }
}
0 của mảng. Vì vậy, bạn có thể buộc forEach() phải thoát ra khỏi vòng lặp sớm bằng cách ghi đè thuộc tính
const myNums = [1, 2, 3, 4, 5];
myNums.forEach((v, index, arr) => {
  console.log(v);
  if (val > 3) {
    arr.length = index + 1; // Behaves like `break`
  }
}
0 của mảng như được hiển thị bên dưới.

const myNums = [1, 2, 3, 4, 5];
myNums.forEach((v, index, arr) => {
  console.log(v);
  if (val > 3) {
    arr.length = index + 1; // Behaves like `break`
  }
}

Trong khi phương pháp này hoạt động, nó cũng làm biến đổi mảng! Nếu bạn thay đổi độ dài của mảng, bạn có hiệu quả cắt ngắn mảng: các hoạt động tiếp theo, như for/of hoặc

const myNums = [1, 2, 3, 4, 5];
myNums.forEach((v, index, arr) => {
  console.log(v);
  if (val > 3) {
    arr.length = index + 1; // Behaves like `break`
  }
}
4 sẽ chỉ đi qua phiên bản rút ngắn của mảng. Sử dụng phương pháp này để thoát ra khỏi vòng lặp forEach() không được khuyến khích.not recommended.


Hướng dẫn cơ bản hơn

  • Xác thực email bằng Regex trong JavaScript
  • Sao chép JavaScript vào Clipboard
  • Tính trung bình của một mảng trong JavaScript
  • Hàm encodeuricomponent () trong javascript
  • Cách kiểm tra xem một ngày nằm giữa hai ngày trong JavaScript
  • Kiểm tra chuỗi cho các số trong JavaScript
  • Đổi tên các biến khi sử dụng phá hủy đối tượng trong JavaScript

Bạn có thể thoát ra khỏi một JavaScript không?

Dừng lại hoặc thoát ra khỏi một vòng lặp forray#trong JavaScript chỉ có thể bằng cách ném một ngoại lệ.only possible by throwing an exception.

Làm thế nào để bạn thoát một vòng lặp trong JavaScript?

Tuyên bố phá vỡ thoát ra khỏi một công tắc hoặc một vòng lặp.Trong một công tắc, nó thoát ra khỏi khối chuyển đổi.Điều này dừng việc thực thi nhiều mã hơn bên trong công tắc.Trong một vòng lặp, nó thoát ra khỏi vòng lặp và tiếp tục thực thi mã sau vòng lặp (nếu có). breaks out of a switch or a loop. In a switch, it breaks out of the switch block. This stops the execution of more code inside the switch. In in a loop, it breaks out of the loop and continues executing the code after the loop (if any).

Làm thế nào để bạn thoát một vòng lặp foreach trong TypeScript?

Để phá vỡ vòng lặp foreach () trong TypeScript, ném và bắt lỗi bằng cách kết thúc phương thức gọi cho foreach () trong một khối thử/bắt.Khi lỗi được ném, phương thức foreach () sẽ dừng lặp lại trong bộ sưu tập.Đã sao chép!throw and catch an error by wrapping the call to the forEach() method in a try/catch block. When the error is thrown, the forEach() method will stop iterating over the collection. Copied!

Trở lại có thoát ra khỏi foreach không?

'return' không dừng lặp lại lý do là chúng ta đang chuyển chức năng gọi lại trong hàm foreach của mình, hoạt động giống như một hàm bình thường và được áp dụng cho mỗi phần tử cho dù chúng ta có trở lại từ một phần tử là 2 trongtrường hợp. The reason is that we are passing a callback function in our forEach function, which behaves just like a normal function and is applied to each element no matter if we return from one i.e. when element is 2 in our case.