Bạn biết về Javascript Filter Function?

Rate this post

Javascript Filter là một phương thức được nhắc đến ngày càng nhiều, đặc biệt là khi kết hợp cùng tiêu chuẩn ES6.

Cú pháp sử dụng Javascript Filter Function

let filteredList = list.filter(callback)

(Ta sử dụng let theo ES6, các bạn nào chưa quen thì cố đọc nhé)

Giải thích các thành phần:

  • filteredList: Vì filter sẽ làm việc với Array và trả về là 1 tập hợp Array, ta cần định nghĩa nó như kết quả (return).
  • list: chính là array ban đầu khi chưa cho qua Filter()
  • callback: là function sẽ sử dụng để kiểm tra từng item trong list và trả về true hay false

Nói thêm chút về callback, nó có thể nhận 3 giá trị như thế này. Thông thường ta chỉ tìm element thôi.

function validateArray(element, index, arr) => {}

So sánh Filter và For Loop

Tất nhiên, nhìn thì bạn sẽ nhận ra điểm nào đó giống nhau trong cách sử dụng Filter và vòng lặp For Loop. Hãy cùng xem ví dụ.

Dưới đây là một vòng lặp for loop thường thấy trong Javascript:

let arr = [1, 2, 3, 4, 5, 6]
let even = []
for(var i = 0; i < arr.length; i++) {
 if (arr[i] % 2 === 0) even.push(arr[i])
}
// even = [2,4,6]

Đoạn code trên sẽ kiểm tra tất cả giá trị trong arr. Chỉ các giá trị là số chẵn mới được chấp nhận và thêm vào even.

Tất nhiên, đoạn code trên không có gì sau, nhưng cũng giống như bạn đi xe máy và đi ô tô, dù kết quả đều giống nhau thì cách thức thực hiện sẽ khác nhau.

Và dưới đây là cách filter làm việc cho ra kết quả tương tự

let arr = [1,2,3,4,5,6]
let even = arr.filter(item => {
 return item % 2 === 0
});
// even = [2,4,6]

Ngạc nhiên chưa? Không cần trong vòng lặp, và cũng chẳng cần bạn phải thêm từng giá trị vào một vòng lặp nữa. Khi làm việc với filter() function, những gì bạn cần làm là xác định cái gì muốn giữ lại và trả về return true cho những giá trị đó.

Một điểm tuyệt vời nữa khi sử dụng là benchmark cho thấy filter làm việc rất tốt với các phiên bản trình duyệt web mới nhất hiện nay.

filter() benchmark với For Loop

Javascript Filter Function và ES6

Giờ sau khi ta nắm được filter(), hãy cùng tìm hiểu sự kết hợp của Javascript function này với ES6.

Hãy xem ví dụ ta vừa làm. Dù ta đã dùng arrow function, tuy nhiên vẫn có thể rút gọn hơn nữa. Đó là bởi vì khi trả về giá trị từ arrow function, bạn có thể bỏ qua cặp dấu {} trong function.

Đoạn code ta vừa làm ở trên có thể rút gọn hơn như sau:

let event = arr.filter(item => item % 2 === 0)

Đừng lo, item vẫn biết nó là từng item trong arr nên bạn có thể sử dụng như vậy được.

Kết luận

Như vậy, bạn đã nắm được cách viết code rút gọn khi sử dụng Javascript Filter Function kết hợp với ES6. Hãy nhớ sử dụng nó thành thạo kết hợp thêm với đọc trên MDN để áp dụng. Nó là cách giúp bạn viết code ngắn hơn, logic dễ nhớ hơn và tất nhiên,… code tốt hơn.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...