Rate this post

Hàm filter trong JavaScript là một phương thức mạnh mẽ của mảng, được thiết kế để tạo một mảng mới chứa các phần tử từ mảng ban đầu mà thỏa mãn một điều kiện cụ thể. Mục đích chính của việc sử dụng filter là để lọc ra một tập hợp con các phần tử dựa trên một tiêu chí xác định, giúp cho việc xử lý và phân tích dữ liệu trở nên dễ dàng và hiệu quả hơn.

Cách filter hoạt động bao gồm việc duyệt qua từng phần tử của mảng gốc và áp dụng một hàm callback lên mỗi phần tử này. Hàm callback này sẽ trả về một giá trị Boolean, cho biết phần tử có đáp ứng điều kiện được đặt ra hay không. Nếu kết quả là true, phần tử sẽ được thêm vào mảng kết quả; ngược lại, nếu là false, phần tử sẽ bị loại bỏ. Qua quá trình này, filter tạo ra một mảng mới mà không làm thay đổi mảng ban đầu, đảm bảo tính bất biến của dữ liệu và hỗ trợ lập trình theo phong cách hàm (functional programming) trong JavaScript.

Ví dụ, nếu bạn muốn lọc ra tất cả các số lớn hơn 10 từ một mảng số, bạn có thể sử dụng filter như sau:

const numbers = [4, 11, 42, 14, 39, 5];
const filteredNumbers = numbers.filter(number => number > 10);
// Kết quả của filteredNumbers sẽ là [11, 42, 14, 39]

Trong ví dụ này, filter kiểm tra mỗi số trong mảng numbers với điều kiện number > 10, và chỉ những số thỏa mãn điều kiện này mới được thêm vào mảng filteredNumbers. Sự linh hoạt và tính năng dễ sử dụng của filter làm cho nó trở thành một công cụ quan trọng trong việc xử lý và chuyển đổi dữ liệu mảng trong JavaScript.

Tóm tắt nội dung

Vì sao nên sử dụng Filter ?

Sử dụng filter trong javascript có rất nhiều lợi ích. Một trong những lợi ích chính là giúp cho việc lọc dữ liệu mảng trở nên dễ dàng và nhanh chóng hơn. Bằng cách sử dụng filter, bạn có thể chỉ lấy ra các phần tử mà bạn quan tâm, và bỏ qua các phần tử không cần thiết, giúp cho mã lệnh trở nên ngắn gọn và dễ đọc hơn.

Filter cũng giúp cho việc tách biệt và xử lý các phần tử cần thiết trong mảng, giúp cho việc quản lý dữ liệu trở nên dễ dàng hơn. Filter cũng rất hữu ích khi bạn muốn lọc dữ liệu trước khi sử dụng các hàm khác, như tính tổng của một mảng, tìm phần tử lớn nhất, v.v.

Cú pháp cơ bản của hàm `filter` trong JavaScript

Cú pháp cơ bản của hàm filter trong JavaScript được thể hiện thông qua việc gọi phương thức này trên một mảng và truyền vào đó một hàm callback. Hàm callback này sẽ được thực thi cho mỗi phần tử của mảng, và dựa vào giá trị Boolean mà hàm trả về để quyết định xem phần tử đó có được bao gồm trong mảng kết quả hay không. Cú pháp cơ bản có thể được mô tả như sau:

const newArray = array.filter(function(element, index, arr) {
  // Điều kiện để kiểm tra mỗi phần tử
});

Trong đó:

array là mảng gốc mà bạn muốn lọc.
newArray là mảng mới chứa các phần tử từ array mà thỏa mãn điều kiện được đặt ra trong hàm callback.
function(element, index, arr) là hàm callback được gọi cho mỗi phần tử trong mảng. Hàm này có thể nhận tối đa ba tham số:
element là phần tử hiện tại đang được xử lý trong mảng.
index (tùy chọn) là chỉ số của phần tử hiện tại đang được xử lý.
arr (tùy chọn) là mảng mà phương thức filter được gọi.

Giá trị trả về của filter là một mảng mới, chứa tất cả các phần tử mà hàm callback trả về true cho điều kiện kiểm tra. Quan trọng là mảng ban đầu không bị thay đổi, tuân theo nguyên tắc lập trình không thay đổi dữ liệu (immutability) trong lập trình hàm.

Ví dụ, để lọc các số chẵn từ một mảng số, bạn có thể sử dụng filter như sau:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
// Kết quả của evenNumbers sẽ là [2, 4, 6]

Trong ví dụ này, hàm callback trả về true cho các số chẵn, do đó chỉ các số chẵn trong mảng numbers mới được thêm vào mảng evenNumbers. Cú pháp này minh họa cách filter được sử dụng để dễ dàng tạo ra một mảng mới dựa trên các tiêu chí lọc cụ thể.

Sử dụng Filter trong javascript như thế nào ?

Sử dụng hàm filter trong JavaScript đòi hỏi việc truyền vào một hàm callback, hàm này sẽ được áp dụng lên từng phần tử của mảng để kiểm tra xem phần tử đó có thỏa mãn một điều kiện nhất định hay không. Dựa trên kết quả trả về từ hàm callback (true hoặc false), filter sẽ quyết định xem có nên bao gồm phần tử hiện tại vào trong mảng mới hay không. Mảng mới tạo ra sẽ chỉ chứa những phần tử mà hàm callback trả về giá trị true.

Ví dụ 1: Lọc các số chẵn

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0; // Kiểm tra xem số có phải là số chẵn không
});
console.log(evenNumbers); // In ra [2, 4, 6]

Trong ví dụ này, hàm callback kiểm tra điều kiện number % 2 === 0 để xác định xem một số có phải là số chẵn hay không. Nếu số đó là số chẵn, hàm callback trả về true và số đó sẽ được thêm vào mảng evenNumbers.

Ví dụ 2: Lọc các phần tử thỏa mãn điều kiện

const words = ['apple', 'banana', 'grapes', 'mango', 'orange'];
const longWords = words.filter(function(word) {
  return word.length > 5; // Kiểm tra độ dài của từ
});
console.log(longWords); // In ra ['banana', 'grapes', 'orange']

Ở ví dụ này, filter được sử dụng để lọc ra các từ có độ dài lớn hơn 5 ký tự. Hàm callback trả về true cho các từ thỏa mãn điều kiện đó, và do đó, chỉ những từ đó mới được thêm vào mảng longWords.

Ví dụ 3: Sử dụng hàm mũi tên (Arrow Functions) để viết gọn hơn

const numbers = [1, 2, 3, 4, 5, 6];
const oddNumbers = numbers.filter(number => number % 2 !== 0);
console.log(oddNumbers); // In ra [1, 3, 5]

Trong ví dụ này, hàm mũi tên number => number % 2 !== 0 được sử dụng làm hàm callback cho filter để lọc ra các số lẻ. Sử dụng hàm mũi tên giúp mã nguồn trở nên ngắn gọn và rõ ràng hơn.

Qua các ví dụ trên, có thể thấy filter là một công cụ mạnh mẽ cho việc lọc dữ liệu trong mảng. Kỹ thuật này giúp giảm bớt đáng kể lượng mã cần viết và làm cho mã nguồn dễ đọc, dễ bảo trì hơn.

Filter với các hàm mũi tên (Arrow Functions)

Hàm mũi tên (Arrow Functions) trong JavaScript cung cấp một cú pháp ngắn gọn hơn cho việc viết hàm, và khi kết hợp với filter, chúng giúp code trở nên rõ ràng và dễ đọc hơn. Cú pháp của hàm mũi tên loại bỏ nhu cầu sử dụng từ khóa function, ngoặc đơn cho tham số khi chỉ có một tham số, và return trong trường hợp hàm chỉ có một biểu thức.

Ví dụ 1: Lọc các số lớn hơn một giá trị nhất định

const numbers = [3, 56, 2, 48, 5];
const largeNumbers = numbers.filter(number => number > 10);
console.log(largeNumbers); // In ra [56, 48]

Trong ví dụ này, hàm mũi tên number => number > 10 được truyền vào filter để tạo một mảng mới chứa chỉ những số lớn hơn 10 từ mảng numbers. Cú pháp ngắn gọn của hàm mũi tên giúp rõ ràng hóa điều kiện lọc mà không cần phải viết một hàm đầy đủ với return.

Ví dụ 2: Lọc các phần tử có độ dài nhất định

const words = ['spring', 'fall', 'winter', 'summer'];
const shortWords = words.filter(word => word.length < 6);
console.log(shortWords); // In ra ['fall', 'winter']

Ở đây, filter kết hợp với một hàm mũi tên để lọc ra những từ có độ dài dưới 6 ký tự. Hàm mũi tên word => word.length < 6 trực tiếp trả về kết quả của biểu thức so sánh, làm cho đoạn mã dễ hiểu và quản lý.

Ví dụ 3: Lọc các đối tượng dựa trên thuộc tính

const people = [
  { name: 'John', age: 23 },
  { name: 'Jane', age: 18 },
  { name: 'Jim', age: 30 }
];
const adults = people.filter(person => person.age >= 18);
console.log(adults);
// In ra [{ name: 'John', age: 23 }, { name: 'Jane', age: 18 }, { name: 'Jim', age: 30 }]

Trong ví dụ này, mảng people chứa các đối tượng, và filter được sử dụng với một hàm mũi tên để lọc ra những người có tuổi từ 18 trở lên. Hàm mũi tên person => person.age >= 18 ngắn gọn và trực quan, làm cho việc kiểm tra điều kiện trở nên rõ ràng.

Như vậy, việc sử dụng hàm mũi tên với filter không chỉ làm cho code trở nên ngắn gọn hơn mà còn giúp cải thiện độ rõ ràng và dễ đọc của code, là một kỹ thuật lập trình hiệu quả trong JavaScript hiện đại.

Nâng cao hơn vào việc sử dụng `filter`

Khi đi sâu hơn vào việc sử dụng filter, chúng ta có thể thấy rằng nó không chỉ giới hạn ở việc lọc các phần tử đơn giản trong mảng. Filter có thể được áp dụng trong các tình huống phức tạp hơn, như lọc các đối tượng dựa trên một hoặc nhiều thuộc tính, hoặc thậm chí kết hợp với các phương thức khác như map và reduce để thực hiện các phép biến đổi và tích lũy dữ liệu một cách mạnh mẽ.

Lọc các đối tượng dựa trên thuộc tính

Trong trường hợp làm việc với mảng các đối tượng, filter có thể được sử dụng để tìm kiếm các đối tượng thỏa mãn một hoặc nhiều điều kiện liên quan đến thuộc tính của chúng.

const employees = [
  { name: 'Alice', role: 'Developer', yearsAtCompany: 3 },
  { name: 'Bob', role: 'Designer', yearsAtCompany: 5 },
  { name: 'Charlie', role: 'Developer', yearsAtCompany: 1 },
  { name: 'Dana', role: 'Manager', yearsAtCompany: 2 }
];

const experiencedDevelopers = employees.filter(employee =>
  employee.role === 'Developer' && employee.yearsAtCompany > 2
);

Ở đây, filter được sử dụng để lọc ra các nhân viên có vai trò là ‘Developer’ và đã làm việc tại công ty hơn 2 năm.

Kết hợp Filter với Map hoặc Reduce

Kết hợp filter với map hoặc reduce cho phép thực hiện các thao tác xử lý dữ liệu một cách linh hoạt và mạnh mẽ, từ việc biến đổi dữ liệu lọc được đến việc tích lũy giá trị từ dữ liệu đó.

// Sử dụng filter và map để lấy tên của các nhân viên có kinh nghiệm trên 2 năm
const namesOfExperiencedEmployees = employees
  .filter(employee => employee.yearsAtCompany > 2)
  .map(employee => employee.name);

// Sử dụng filter và reduce để tính tổng số năm làm việc của các Developer
const totalYearsDevelopers = employees
  .filter(employee => employee.role === 'Developer')
  .reduce((total, developer) => total + developer.yearsAtCompany, 0);

Trong ví dụ đầu tiên, filter được sử dụng để lọc ra các nhân viên có kinh nghiệm trên 2 năm, sau đó map được áp dụng để tạo một mảng mới chứa chỉ tên của những nhân viên đó. Trong ví dụ thứ hai, filter lọc ra các nhân viên với vai trò ‘Developer’, và reduce tính tổng số năm làm việc của họ.

Qua việc sử dụng filter trong các tình huống phức tạp và kết hợp nó với các phương thức khác, chúng ta có thể thực hiện các phép xử lý dữ liệu mảng một cách linh hoạt và hiệu quả, mở ra vô số khả năng cho việc biến đổi và phân tích dữ liệu.

Kết luận

Filter là một trong những hàm cần thiết và thường xuyên sử dụng trong javascript. Nó cho phép lọc các phần tử của một mảng theo điều kiện mà bạn chỉ định, trả về một mảng mới chứa các phần tử đã được lọc. Điều này giúp cho việc quản lý dữ liệu trong javascript trở nên dễ dàng hơn và tăng hiệu suất cho ứng dụng của bạn.

JavaScript

Filter trong javascript – những điều cần biết