Làm thế nào để bạn dừng một vòng lặp foreach?

Làm cách nào bạn có thể ngắt và quay lại vòng lặp forEach trong JavaScript? . bạn không thể. Không thể thoát khỏi các vòng lặp forEach trong JavaScript. Tuy nhiên, có một số cách giải quyết và cũng có những lựa chọn thay thế

Mặc dù chúng tôi không thể ngắt và trả về từ một forEach trong JavaScript, nhưng chúng tôi vẫn có thể trả về các giá trị bằng một biến bên ngoài theo cách sau

let productDetails

products.forEach(product => {
    if (product.id === 123) {
        productDetails = product 
    }
})

forEach. js Giải pháp trả về giá trị từ forEach

Đã sao chép vào khay nhớ tạm. Sao chép

Về cơ bản, ở đây chúng tôi đặt một biến bên ngoài vòng lặp forEach thành một trong các mục, dựa trên ID. Với điều kiện phù hợp bên trong câu lệnh

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

0, chúng ta có thể lấy và "trả lại" giá trị đúng. Tuy nhiên, điều này có thể được viết lại theo những cách tốt hơn. Dưới đây là năm lựa chọn thay thế khác nhau mà bạn có thể sử dụng khi cần thoát khỏi forEach

Tìm cách để cải thiện kỹ năng của bạn?

---

Sử dụng mảng. tìm thấy

Ví dụ trên cũng có thể được viết lại bằng phương thức

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

2. Đúng như tên gọi, phương thức

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

2 được sử dụng để tìm một phần tử cụ thể trong một mảng. Nó trả về một mục đầu tiên vượt qua bài kiểm tra trong chức năng gọi lại. Ví dụ

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

tìm. js Trả về mục được cung cấp một vị ngữ

Đã sao chép vào khay nhớ tạm. Sao chép

Đối với ví dụ đầu tiên, chúng tôi có một đối tượng được trả về vì mỗi ID là duy nhất. Nhưng trong trường hợp thứ hai, chúng tôi có thể có nhiều sản phẩm đang được giảm giá, nhưng chúng tôi vẫn chỉ nhận lại sản phẩm đầu tiên vượt qua bài kiểm tra. Nếu không có kết quả khớp, phương thức

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

2 chỉ cần trả về 

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

5

---

Sử dụng mảng. tìm Index

Một giải pháp tương tự nhưng hơi khác đối với

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

2 là sử dụng phương pháp

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

7. Trong trường hợp cần trả về chỉ số của phần tử bên trong mảng, bạn có thể sử dụng phương thức

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

7. Điều này sẽ trả về chỉ mục của phần tử nếu tìm thấy. Nếu không tìm thấy phần tử nào với vị từ, nó sẽ trả về -1

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

findIndex. js Trả về chỉ mục của mục hoặc -1 nếu không tìm thấy mục nào

Đã sao chép vào khay nhớ tạm. Sao chép

Tìm cách để cải thiện kỹ năng của bạn?

---

Sử dụng mảng. một số để trả về Đúng hoặc Sai

Trong trường hợp bạn cần thoát khỏi một vòng lặp và trả về một giá trị boolean, chúng ta có thể sử dụng phương thức

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

9. Không giống như 

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

2 nơi chúng tôi mong đợi một mục được trả về từ mảng, 

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

9 trả về một 

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

2 hoặc 

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

3. Nếu ít nhất một mục trong mảng phù hợp với tiêu chí, phương thức này sẽ ngay lập tức trả về 

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

2. Lấy ví dụ sau

// We do have some products which are on sale so we get back true
products.some(product => product.onSale)

// None of the items are less than 0, so we get back false
[1, 2, 3].some(item => item < 0)

một số. js Trả về đúng hoặc sai nếu có ít nhất một mục vượt qua vị ngữ

Đã sao chép vào khay nhớ tạm. Sao chép

Trong ví dụ đầu tiên, chúng tôi quay lại _______10_______2 vì chúng tôi chỉ quan tâm đến việc liệu có ít nhất một mặt hàng được giảm giá hay không. Tương tự như vậy, trong ví dụ thứ hai, chúng tôi chỉ quan tâm đến việc có ít nhất một mục dưới 0 hay không. Vì không có giá trị nào dưới 0 nên phương thức trả về

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

3

---

Sử dụng mảng. every để kiểm tra mọi phần tử

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

7 rất giống với 

// This will return the product with the ID of 1
products.find(product => product.id === 1)

// Even though we might have multiple products which are on sale
// this will only return the first match
products.find(product => product.onSale)

// This will return undefined
products.find(product => product.id === 'invalid')

9 về giá trị được trả về. hoặc trả lại một 

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

2 hoặc 

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

3. Nhưng thay vì kiểm tra xem một mục có vượt qua vị ngữ hay không, nó sẽ chỉ trả về

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

2 nếu tất cả các mục đều vượt qua bài kiểm tra. Hãy xem một ví dụ

// This produces false
products.every(product => product.onSale)

// This produces true
products.every(product => product.name)

mọi. js Trả về true nếu tất cả các phần tử vượt qua vị ngữ. Ngược lại trả về false

Đã sao chép vào khay nhớ tạm. Sao chép

Trong ví dụ đầu tiên, chúng tôi lấy lại

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

3 vì có thể không phải mọi sản phẩm đều được giảm giá. Tuy nhiên, chúng tôi có thể kiểm tra xem mọi sản phẩm đều có tên hay không, trong trường hợp đó,

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

7 sẽ

// We do have some products which are on sale so we get back true
products.some(product => product.onSale)

// None of the items are less than 0, so we get back false
[1, 2, 3].some(item => item < 0)

4 một giá trị

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

2

Tìm cách để cải thiện kỹ năng của bạn?

---

Sử dụng vòng lặp thông thường

Cuối cùng nhưng không kém phần quan trọng, chúng ta cũng có thể sử dụng các vòng lặp thông thường hỗ trợ các câu lệnh

// We do have some products which are on sale so we get back true
products.some(product => product.onSale)

// None of the items are less than 0, so we get back false
[1, 2, 3].some(item => item < 0)

6 và

// We do have some products which are on sale so we get back true
products.some(product => product.onSale)

// None of the items are less than 0, so we get back false
[1, 2, 3].some(item => item < 0)

7. Trong ví dụ dưới đây, chúng tôi sử dụng vòng lặp

// We do have some products which are on sale so we get back true
products.some(product => product.onSale)

// None of the items are less than 0, so we get back false
[1, 2, 3].some(item => item < 0)

8,

// We do have some products which are on sale so we get back true
products.some(product => product.onSale)

// None of the items are less than 0, so we get back false
[1, 2, 3].some(item => item < 0)

9 và

// This produces false
products.every(product => product.onSale)

// This produces true
products.every(product => product.name)

0 thông thường để minh họa cách ngắt khi một câu lệnh là

// This will return 2
[1, 2, 3].findIndex(number => number === 3)

// This will return -1
[1, 2, 3].findIndex(number => number === 4)

2

const array = [1, 2, 3]

// Using a for loop
for (let i = 0; i < array.length; i++) {
    if (array[i] === 2) {
        break
    }

    console.log(array[i])
}

// Using a for...of loop
for (const item of array) {
    if (item === 2) {
        break
    }

    console.log(item)
}

// Using a while loop
let i = 0

while (i < array.length) {
    if (array[i] === 3) {
        break
    }

    console.log(i)
    i++
}

Sử dụng for, for. vòng lặp of và while để ngắt

Đã sao chép vào khay nhớ tạm. Sao chép

Nếu bạn cũng muốn tìm hiểu thêm về các phương thức mảng khác, chẳng hạn như

// This produces false
products.every(product => product.onSale)

// This produces true
products.every(product => product.name)

2,

// This produces false
products.every(product => product.onSale)

// This produces true
products.every(product => product.name)

3 hoặc

// This produces false
products.every(product => product.onSale)

// This produces true
products.every(product => product.name)

4, hãy đảm bảo bạn xem bài viết của chúng tôi bên dưới

Sức mạnh của các hàm mảng bậc cao

tìm, một số, lập bản đồ, giảm, mọi, lọc

Tìm hiểu mọi thứ bạn cần biết về các phương thức mảng bậc cao và cách bạn có thể sử dụng chúng với toàn bộ tiềm năng của chúng

Break có dừng forEach không?

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

Làm cách nào để ngắt vòng lặp forEach trong JavaScript?

Làm cách nào để ngăn chặn forEach?