- vừa được xem lúc

Mẹo JavaScript: Sử dụng .every() và .some() để kiểm tra mảng gọn gàng hơn

0 0 3

Người đăng: Thái Thịnh

Theo Viblo Asia

Trong bài viết này, chúng ta sẽ cùng tìm hiểu chi tiết về .every() và .some(), hiểu rõ sự khác biệt, cách sử dụng và ứng dụng thực tế của chúng để nâng cao hiệu quả cho các dự án JavaScript.

Nắm vững cơ bản: .every() và .some()

Cả .every() và .some() đều là các phương thức lặp mảng, có nghĩa là chúng áp dụng một hàm nhất định (một hàm gọi lại) cho mỗi phần tử trong mảng. Các phương thức này được sử dụng để xác định xem các phần tử trong mảng có đáp ứng các điều kiện cụ thể hay không:

  • .every(): Phương thức này kiểm tra xem tất cả các phần tử trong mảng có thỏa mãn điều kiện do hàm gọi lại cung cấp hay không. Nếu có, nó trả về true; ngược lại, nó trả về false.
  • .some(): Phương thức này kiểm tra xem ít nhất một phần tử trong mảng có thỏa mãn điều kiện do hàm gọi lại cung cấp hay không. Nếu bất kỳ phần tử nào vượt qua bài kiểm tra, nó sẽ trả về true. Nếu không có phần tử nào vượt qua bài kiểm tra, nó sẽ trả về false.

Cả hai phương thức đều lặp lại trên mảng, nhưng chúng khác nhau ở cách chúng áp dụng logic của chúng. Hãy cùng phân tích chi tiết từng phương thức.

Phương thức .every() trong JavaScript

Phương thức .every() được sử dụng khi bạn cần kiểm tra xem tất cả các phần tử trong một mảng có đáp ứng một điều kiện nhất định hay không. Ngay cả khi một phần tử không đáp ứng điều kiện, .every() sẽ trả về false ngay lập tức và dừng thực thi thêm.

Cú pháp:

array.every(callback(element[, index[, array]])[, thisArg])

Trong đó:

  • callback: Một hàm kiểm tra từng phần tử. Nó sẽ trả về true nếu phần tử đáp ứng điều kiện và false nếu không.
  • element: Phần tử hiện tại đang được xử lý.
  • index (tùy chọn): Chỉ mục của phần tử hiện tại.
  • array (tùy chọn): Mảng mà .every() được gọi.
  • thisArg (tùy chọn): Một giá trị tùy chọn được sử dụng làm this bên trong hàm gọi lại.

VD1: Kiểm tra xem tất cả các số có phải là số dương hay không

Giả sử bạn có một mảng các số và bạn muốn kiểm tra xem tất cả chúng có phải là số dương hay không:

const numbers = [2, 4, 6, 8]; const allPositive = numbers.every(num => num > 0); console.log(allPositive); // Output: true

Vì tất cả các số trong mảng đều lớn hơn 0, .every() trả về true.

VD2: Kiểm tra kết quả hỗn hợp

Bây giờ chúng ta hãy sửa đổi mảng sao cho có một số âm:

const numbers = [2, -4, 6, 8]; const allPositive = numbers.every(num => num > 0); console.log(allPositive); // Output: false

Trong trường hợp này, phần tử thứ hai (-4) là số âm, vì vậy .every() trả về false ngay lập tức.

Các trường hợp sử dụng cho .every()

  • Xác thực biểu mẫu: Bạn có thể cần đảm bảo rằng mọi trường trong biểu mẫu đều được điền hoặc tất cả đầu vào đều hợp lệ. Ví dụ: kiểm tra xem mọi email trong danh sách có tuân theo định dạng email hợp lệ hay không.
  • Xác thực dữ liệu: Khi xử lý một loạt dữ liệu, bạn có thể muốn xác nhận rằng tất cả các mục đều đáp ứng các điều kiện nhất định trước khi tiếp tục. Ví dụ: kiểm tra xem tất cả các đơn đặt hàng trong danh sách đơn đặt hàng có cao hơn giá tối thiểu hay không.
  • Kiểm tra quyền: Trong một hệ thống có quyền dựa trên vai trò, bạn có thể cần xác minh rằng tất cả người dùng trong một nhóm đều có quyền cần thiết.

Phương thức .some() trong JavaScript

Trái ngược với .every(), phương thức .some() kiểm tra xem ít nhất một phần tử trong mảng có vượt qua điều kiện kiểm tra hay không. Ngay sau khi tìm thấy một phần tử thỏa mãn điều kiện, nó sẽ trả về true. Nếu không có phần tử nào đáp ứng điều kiện, nó sẽ trả về false.

Cú pháp:

array.some(callback(element[, index[, array]])[, thisArg])

Trong đó:

  • callback: Một hàm kiểm tra từng phần tử. Nó sẽ trả về true nếu phần tử đáp ứng điều kiện và false nếu không.
  • element: Phần tử hiện tại đang được xử lý.
  • index (tùy chọn): Chỉ mục của phần tử hiện tại.
  • array (tùy chọn): Mảng mà .some() được gọi.
  • thisArg (tùy chọn): Một giá trị tùy chọn được sử dụng làm this bên trong hàm gọi lại.

Ví dụ 1: Kiểm tra xem có số chẵn nào không

Dưới đây là một ví dụ, trong đó chúng ta kiểm tra xem có số chẵn nào trong một mảng các số hay không:

const numbers = [1, 3, 5, 7, 10]; const hasEvenNumber = numbers.some(num => num % 2 === 0); console.log(hasEvenNumber); // Output: true

Trong trường hợp này, số 10 là số chẵn, vì vậy .some() trả về true.

Ví dụ 2: Khi không có phần tử nào khớp

Bây giờ, hãy kiểm tra một mảng trong đó không có số nào là số chẵn:

const numbers = [1, 3, 5, 7, 9]; const hasEvenNumber = numbers.some(num => num % 2 === 0); console.log(hasEvenNumber); // Output: false

Vì không có số nào trong mảng này là số chẵn, .some() trả về false.

Các trường hợp sử dụng cho .some()

  • Xử lý lỗi: Bạn có thể cần xác định xem có ít nhất một lỗi trong một mảng kết quả hay không (ví dụ: kiểm tra xem có ít nhất một trường hợp thử nghiệm không thành công hay không).
  • Lọc: Xác định xem một tập dữ liệu có chứa ít nhất một phần tử đáp ứng các tiêu chí cụ thể hay không, chẳng hạn như tìm xem giỏ hàng có chứa bất kỳ mặt hàng nào đang bán hay không.
  • Tính khả dụng của tính năng: Khi xử lý một tập hợp các tính năng, bạn có thể muốn biết liệu có ít nhất một tính năng được bật cho một người dùng cụ thể hay không.

Sự khác biệt chính giữa .every() và .some()

Mặc dù cả hai phương thức đều hữu ích cho việc đánh giá mảng, nhưng sự khác biệt của chúng là đáng kể:

1. Giá trị trả về:

  • .every() chỉ trả về true nếu tất cả các phần tử đều đáp ứng điều kiện.
  • .some() trả về true nếu ít nhất một phần tử đáp ứng điều kiện.

2. Ngắt mạch:

  • .every() dừng lại ngay khi tìm thấy một phần tử không đáp ứng điều kiện.
  • .some() dừng lại ngay khi tìm thấy một phần tử đáp ứng điều kiện.

3. Trường hợp sử dụng:

  • Sử dụng .every() khi bạn cần đảm bảo tất cả các phần tử trong mảng đều vượt qua bài kiểm tra.
  • Sử dụng .some() khi bạn chỉ cần một phần tử vượt qua bài kiểm tra.

Cân nhắc về hiệu suất

Cả hai phương thức đều dừng thực thi ngay khi chúng có thể trả về true hoặc false một cách chắc chắn. Điều này có thể dẫn đến hiệu suất tốt hơn cho các mảng lớn. Ví dụ: trong .every(), nếu một phần tử gần đầu mảng không vượt qua bài kiểm tra, phương thức sẽ ngắt mạch và dừng kiểm tra thêm. Tương tự, .some() sẽ dừng lại ngay khi tìm thấy một phần tử phù hợp.

Tuy nhiên, nếu bạn có các điều kiện phức tạp trong hàm gọi lại, các phương thức này vẫn có thể trở nên tốn kém về mặt tính toán đối với các mảng rất lớn. Trong những trường hợp như vậy, có thể có lợi khi xem xét các thuật toán được tối ưu hóa hơn hoặc cấu trúc dữ liệu của bạn theo cách giảm nhu cầu kiểm tra như vậy.

Kết luận

.every() và .some() của JavaScript cung cấp các công cụ mạnh mẽ để đánh giá mảng dựa trên các điều kiện tùy chỉnh. Mặc dù chúng tương tự nhau về cách chúng xử lý các phần tử, nhưng các trường hợp sử dụng của chúng là khác biệt:

  • Sử dụng .every() khi tất cả các phần tử cần vượt qua một điều kiện.
  • Sử dụng .some() khi bạn chỉ cần một phần tử vượt qua một điều kiện.

Các phương thức này có thể giúp bạn viết mã ngắn gọn và dễ đọc hơn, đồng thời tránh các vòng lặp và điều kiện phức tạp. Bằng cách kết hợp .every() và .some() vào thực tiễn viết mã của mình, bạn có thể xử lý hiệu quả một loạt các logic dựa trên mảng trong các ứng dụng JavaScript của mình.

Cảm ơn các bạn đã theo dõi.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 522

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 432

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 153

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 141

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 110

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 244