Nắm vững cách vận dụng hàm ‘filter’ trong Javascript

Javascript là một ngôn ngữ lập trình phổ biến và được sử dụng rộng rãi trong việc phát triển các ứng dụng web và di động. Với khả năng linh hoạt và tính năng đa dạng, Javascript đã trở thành một trong những ngôn ngữ lập trình hàng đầu hiện nay. Trong bài viết này, hãy cùng TopDev tìm hiểu về hàm ‘filter’ trong Javascript và cách sử dụng nó để lọc dữ liệu trong các mảng.

Bộ lọc loại bỏ các phần tử trùng lặp trong JavaScript

Trước khi đi vào chi tiết về hàm ‘filter’, chúng ta cần hiểu rõ về khái niệm lọc dữ liệu trong Javascript. Lọc dữ liệu là quá trình loại bỏ các phần tử không cần thiết hoặc trùng lặp trong một mảng. Điều này giúp cho việc xử lý dữ liệu trở nên dễ dàng và hiệu quả hơn.

Trong Javascript, chúng ta có thể sử dụng hàm ‘filter’ để loại bỏ các phần tử trùng lặp trong một mảng. Hàm này sẽ trả về một mảng mới chỉ chứa các phần tử duy nhất, không có phần tử nào bị trùng lặp. Để hiểu rõ hơn, bạn có thể xem ví dụ sau:

let numbers = [1, 2, 3, 4, 5, 5, 6, 7, 8, 8, 9];
let uniqueNumbers = numbers.filter((item, index) => {
    return numbers.indexOf(item) === index;
});
console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Trong đoạn code trên, chúng ta có một mảng gồm các số từ 1 đến 9, trong đó có hai số 5 và hai số 8 bị trùng lặp. Bằng cách sử dụng hàm ‘filter’ và phương thức indexOf(), chúng ta có thể loại bỏ các phần tử trùng lặp và chỉ lấy các phần tử duy nhất. Kết quả trả về là một mảng mới chỉ chứa các số từ 1 đến 9 mà không có phần tử nào bị trùng lặp.

Xem ngay những tin đăng tuyển lập trình viên Javascript mới nhất

Sử dụng hàm filter để trích xuất các phần tử thỏa mãn điều kiện

Hàm ‘filter’ trong Javascript còn có thể được sử dụng để trích xuất các phần tử thỏa mãn một điều kiện nào đó. Điều này giúp cho việc lọc dữ liệu trở nên linh hoạt hơn và có thể được tùy chỉnh theo nhu cầu của người lập trình.

Ví dụ, chúng ta có một mảng gồm các số từ 1 đến 10 và chúng ta muốn lọc ra các số lẻ trong mảng đó. Để làm điều này, chúng ta có thể sử dụng hàm ‘filter’ như sau:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let oddNumbers = numbers.filter((item) => {
    return item % 2 !== 0;
});
console.log(oddNumbers); // [1, 3, 5, 7, 9]

Như vậy, chúng ta đã sử dụng hàm ‘filter’ để lọc ra các số lẻ trong mảng numbers. Hàm callback được truyền vào hàm ‘filter’ sẽ kiểm tra xem mỗi phần tử trong mảng có chia hết cho 2 hay không. Nếu phần tử đó không chia hết cho 2 (số lẻ), nó sẽ được trả về và được đưa vào mảng mới oddNumbers.

Tùy chỉnh thuật toán lọc bằng hàm callback

Hàm callback được truyền vào hàm ‘filter’ có thể được tùy chỉnh để thực hiện các thuật toán lọc khác nhau. Điều này giúp cho việc sử dụng hàm ‘filter’ trở nên linh hoạt và có thể áp dụng được vào nhiều tình huống khác nhau.

Ví dụ, chúng ta có một mảng gồm các chuỗi và muốn lọc ra các chuỗi có độ dài lớn hơn 5 ký tự. Để làm điều này, chúng ta có thể sử dụng hàm ‘filter’ như sau:

let strings = ['Javascript', 'HTML', 'CSS', 'React', 'Angular', 'Vue'];
let longStrings = strings.filter((item) => {
    return item.length > 5;
});
console.log(longStrings); // ['Javascript', 'Angular']

Ví dụ trên đã được sử dụng hàm ‘filter’ để lọc ra các chuỗi có độ dài lớn hơn 5 ký tự trong mảng strings. Hàm callback được truyền vào sẽ kiểm tra xem độ dài của mỗi chuỗi có lớn hơn 5 hay không. Nếu đúng, chuỗi đó sẽ được trả về và đưa vào mảng mới longStrings.

Bộ lọc mảng lồng nhau để xử lý dữ liệu phân cấp

Một trong những tính năng đặc biệt của hàm ‘filter’ trong Javascript là khả năng lồng nó vào bên trong nhau để xử lý dữ liệu phân cấp. Điều này giúp cho việc lọc dữ liệu trở nên linh hoạt và có thể được áp dụng vào nhiều tình huống khác nhau.

Ví dụ, bạn có một mảng gồm các đối tượng sinh viên với thông tin về tên, tuổi và điểm số. Chúng ta muốn lọc ra các sinh viên có điểm số lớn hơn 8 và tuổi lớn hơn 20. Để làm điều này, chúng ta có thể sử dụng bộ lọc mảng lồng nhau như sau:

let students = [
    ,
    ,
    ,
    
];
let filteredStudents = students.filter((student) => {
    return student.score > 8 && student.age > 20;
});
console.log(filteredStudents); // []

Trong ví dụ trên, chúng ta đã sử dụng bộ lọc mảng lồng nhau để lọc ra các sinh viên có điểm số lớn hơn 8 và tuổi lớn hơn 20. Đầu tiên, chúng ta sử dụng hàm ‘filter’ để lọc ra các sinh viên có điểm số lớn hơn 8. Sau đó, chúng ta sử dụng hàm ‘filter’ lần nữa để lọc ra các sinh viên có tuổi lớn hơn 20 từ kết quả trả về của hàm ‘filter’ đầu tiên.

Kết hợp hàm map và filter để chuyển đổi và lọc dữ liệu

Một trong những cách sử dụng hiệu quả của hàm ‘filter’ trong Javascript là kết hợp nó với hàm map để thực hiện việc chuyển đổi và lọc dữ liệu một cách đồng thời. Điều này giúp cho việc xử lý dữ liệu trở nên đơn giản và hiệu quả hơn.

Ví dụ, chúng ta có một mảng gồm các số và muốn lấy ra các số chẵn và nhân chúng với 2. Để làm điều này, chúng ta có thể sử dụng hàm ‘map’ để nhân các số với 2 và sau đó sử dụng hàm ‘filter’ để lọc ra các số chẵn như sau:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.map((item) => {
    return item * 2;
}).filter((item) => {
    return item % 2 === 0;
});
console.log(evenNumbers); // [4, 8, 12, 16, 20]

Hàm ‘map’ đã được sử dụng nhân các số trong mảng với 2 và sau đó sử dụng hàm ‘filter’ để lọc ra các số chẵn từ kết quả trả về của hàm ‘map’. Kết quả trả về là một mảng mới chỉ chứa các số chẵn được nhân với 2.

Sử dụng filter với Rest Parameter để xử lý danh sách tham số không xác định

Một tính năng khác của hàm ‘filter’ trong Javascript là khả năng sử dụng nó với Rest Parameter để xử lý danh sách tham số không xác định. Điều này giúp cho việc lọc dữ liệu trở nên linh hoạt hơn và có thể áp dụng được vào nhiều tình huống khác nhau.

Ví dụ, chúng ta có một danh sách các sản phẩm và muốn lọc ra các sản phẩm có giá lớn hơn 100.000 đồng. Tuy nhiên, số lượng sản phẩm trong danh sách có thể thay đổi và chúng ta không biết trước được. Để làm điều này, chúng ta có thể sử dụng Rest Parameter để xử lý danh sách tham số không xác định và sau đó sử dụng hàm ‘filter’ để lọc ra các sản phẩm có giá lớn hơn 100.000 đồng như sau:

function filterProducts(...products) {
    return products.filter((product) => {
        return product.price > 100000;
    });
}
console.log(filterProducts(]

Trong ví dụ trên, chúng ta đã sử dụng Rest Parameter để xử lý danh sách các sản phẩm và sau đó sử dụng hàm ‘filter’ để lọc ra các sản phẩm có giá lớn hơn 100.000 đồng. Kết quả trả về là một mảng mới chỉ chứa các sản phẩm thỏa mãn điều kiện.

Xem ngay việc làm intern IT mới nhất trên TopDev

Cải thiện hiệu suất lọc bằng toán tử nullish coalescing

Một tính năng mới được giới thiệu trong phiên bản ES2020 của Javascript là toán tử nullish coalescing (??). Toán tử này cho phép chúng ta cải thiện hiệu suất lọc dữ liệu khi sử dụng hàm ‘filter’.

Ví dụ, chúng ta có một mảng gồm các đối tượng sinh viên với thông tin về tên, tuổi và điểm số. Chúng ta muốn lọc ra các sinh viên có điểm số lớn hơn 8 và tuổi lớn hơn 20. Để làm điều này, chúng ta có thể sử dụng toán tử nullish coalescing để cải thiện hiệu suất của hàm ‘filter’ như sau:

let students = [
    ,
    ,
    ,
    
];
let filteredStudents = students.filter((student) => {
    return student.score > 8 && student.age > 20;
});
console.log(filteredStudents); // []

Trong ví dụ trên, chúng ta đã sử dụng toán tử nullish coalescing để kiểm tra xem giá trị của thuộc tính score và age có tồn tại hay không trước khi thực hiện lọc dữ liệu. Điều này giúp cho việc lọc dữ liệu trở nên hiệu quả hơn và giảm thiểu các lỗi có thể xảy ra.

Sử dụng hàm find để tìm phần tử đầu tiên thỏa mãn điều kiện

Ngoài việc sử dụng hàm ‘filter’ để lọc dữ liệu, chúng ta còn có thể sử dụng hàm find để tìm phần tử đầu tiên trong mảng thỏa mãn điều kiện nào đó. Điều này giúp cho việc tìm kiếm và lọc dữ liệu trở nên linh hoạt hơn.

Ví dụ, bạn có một mảng gồm các số và muốn tìm phần tử đầu tiên có giá trị lớn hơn 5. Để làm điều này, chúng ta có thể sử dụng hàm find như sau:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let firstNumberGreaterThan5 = numbers.find((item) => {
    return item > 5;
});
console.log(firstNumberGreaterThan5); // 6

Ví dụ trên đã sử dụng hàm find để tìm phần tử đầu tiên trong mảng có giá trị lớn hơn 5. Kết quả trả về là số 6, phần tử đầu tiên thỏa mãn điều kiện.

Tối ưu hóa bộ lọc bằng cách sử dụng chỉ mục mảng

Một cách tối ưu hóa hiệu suất của hàm ‘filter’ trong Javascript là sử dụng chỉ mục mảng (index) khi thực hiện lọc dữ liệu. Điều này giúp cho việc truy cập vào các phần tử trong mảng trở nên nhanh hơn và giảm thiểu thời gian xử lý.

Ví dụ, chúng ta có một mảng gồm các số và muốn lọc ra các số chia hết cho 3. Để làm điều này, chúng ta có thể sử dụng chỉ mục mảng để tối ưu hiệu suất của hàm ‘filter’ như sau:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let divisibleBy3 = numbers.filter((item, index) => {
    return item % 3 === 0;
});
console.log(divisibleBy3); // [3, 6, 9]

Trong ví dụ trên, chúng ta đã sử dụng chỉ mục mảng khi thực hiện lọc dữ liệu. Khi đó, hàm ‘filter’ sẽ chỉ duyệt qua các phần tử có chỉ mục chia hết cho 3, giúp cho việc lọc dữ liệu trở nên nhanh hơn.

Đi sâu vào cách triển khai bên trong hàm filter của JavaScript

Để hiểu rõ hơn về cách hoạt động của hàm ‘filter’ trong Javascript, chúng ta có thể đi sâu vào cách triển khai bên trong của nó. Hàm ‘filter’ được triển khai bằng cách duyệt qua từng phần tử trong mảng và kiểm tra xem phần tử đó có thỏa mãn điều kiện hay không. Nếu phần tử đó thỏa mãn điều kiện, nó sẽ được thêm vào một mảng mới, ngược lại sẽ bị loại bỏ.

Ví dụ, bạn có một mảng gồm các số và muốn lọc ra các số chẵn và để làm điều này, chúng ta có thể triển khai hàm ‘filter’ như sau:

function filter(array, callback) {
    let result = [];
    for (let i = 0; i  {
    return item % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]

Trong ví dụ trên, chúng ta đã triển khai lại hàm ‘filter’ bằng cách duyệt qua từng phần tử trong mảng và kiểm tra xem phần tử đó có chia hết cho 2 hay không. Nếu có, nó sẽ được thêm vào mảng kết quả. Kết quả trả về là một mảng mới chỉ chứa các số chẵn.

Kết luận

Như vậy, TopDev đã cùng bạn tìm hiểu về cách sử dụng hàm ‘filter’ trong Javascript để lọc dữ liệu, cách sử dụng hàm filter để trích xuất các phần tử thỏa mãn điều kiện, tùy chỉnh thuật toán lọc bằng hàm callback, sử dụng bộ lọc mảng lồng nhau để xử lý dữ liệu phân cấp,… Với những chia sẻ trên, TopDev hy vọng đã mang đến cho bạn những thông tin hữu ích và có thể ứng dụng hiệu quả vào học tập và công việc của mình.

Truy cập ngay vào Blog Topdev để tiếp tục cập nhật những kiến thức mới nhất về Lập trình! 

Bài viết mang tính chất tham khảo

Nội dung được tổng hợp bởi công cụ AI và điều chỉnh bởi Ban Biên tập TopDev

Xem ngay tin đăng tuyển lập trình viên đãi ngộ tốt trên TopDev