Hướng dẫn cách sử dụng Array filter trong JavaScript. Bạn sẽ học được cách dùng Array filter để lấy các phần tử thỏa mãn điều kiện chỉ định từ mảng ban đầu và ra tạo mảng mới trong JavaScript sau bài học này.

Array filter trong JavaScript

Array filter trong JavaScript là phương thức trong Array Object, có tác dụng lấy các phần tử thỏa mãn điều kiện chỉ định từ mảng ban đầu và ra tạo mảng mới trong JavaScript.

Phương thức Array filter hoạt động theo cơ chế:

1. Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
2. Chuyển chúng đến đối số của phương thức là một hàm callback chứa các biểu thức điều kiện dùng để kiểm tra
3. Sau đó kiểm tra phần tử đó có thỏa mãn các điều kiện không, và nếu thỏa mãn thì thêm phần tử đó như là một phần tử mới vào mảng kết quả.

Chúng ta sử dụng filter để lấy các phần tử thỏa mãn điều kiện chỉ định từ mảng ban đầu và ra tạo mảng mới với 3 kiểu cú pháp sau đây:

Trong đó:

• arr là mảng ban đầu
• callbackFN là hàm callback chứa các biểu thức điều kiện. Hàm callback sẽ nhận từng phần tử từ mảng arr để kiểm tra
• value là tên một biến dùng để gán giá trị của phần tử đang được lấy từ mảng để truyền vào callbackFN
• index là tên một biến dùng để gán index của phần tử đang được lấy từ mảng để truyền vào callbackFN
• array là tên một biến dùng để gán cả mảng ban đầu để truyền vào callbackFN

Phương thức Array filter() sẽ nhận từng phần tử từ mảng, truyền vào callback function, kiểm tra điều kiện trong đó. Và nếu phần tử đó thỏa mãn điều kiện, nó sẽ được thêm vào như là một phần tử mới trong mảng ban đầu.

Lấy phần tử thỏa mãn điều kiện và tạo mảng mới bằng filter

Chúng ta lấy phần tử thỏa mãn điều kiện và tạo mảng mới bằng Array filter như ví dụ sau đây:

let num = [75, 68, 92, 84, 90];

let result = num.filter(function(element){
  return element > 85;
});

console.log(result);
// [ 92, 90 ]

Trong ví dụ này, chúng ta sử dụng biến element để nhận lần lượt các phần tử từ trong mảng ban đầu, và kiểm tra phần tử đó có thỏa mãn điều kiện element > 85 hay không.

Khi đó các phần tử num[2] và num[4] có giá trị 92 và 90 thỏa mãn điều kiện nên được lấy ra và thêm vào như là phần tử trong mảng kết quả.

Và, một mảng mới gồm các phần tử được lấy ra từ mảng ban đầu thỏa mãn điều kiện đã được tạo ra.

Sử dụng phương thức Array filter nâng cao

Ngoài việc truyền giá trị của phần tử vào hàm như trên, chúng ta cũng có thể truyền cả index của phần tử đó vào hàm callback để kiểm tra, giống như ví dụ sau:

let num = [75, 68, 92, 84, 90];

let result = num.filter(function(element, index){
  return (element > 85 && index > 2);
});

console.log(result);
// [ 90 ]

Trong ví dụ này, chúng ta sử dụng cặp biến là element cùng index để nhận giá trị và index của phần tử đang xét vào hàm callback, và kiểm tra phần tử đó có thỏa mãn điều kiện element > 85 và index > 2 hay không.

Khi đó chỉ có phần tử num[4] có giá trị 90 thỏa mãn điều kiện nên được lấy ra và thêm vào như là phần tử trong mảng kết quả.

Và, một mảng mới gồm các phần tử được lấy ra từ mảng ban đầu thỏa mãn điều kiện đã được tạo ra.

Ngoài cách này, chúng ta cũng có thể truyền thêm toàn bộ cả mảng vào trong hàm callback để xét điều kiện nếu muốn. Ví dụ chúng ta có thể truyền cả giá trị, index của phần tử, cũng như cả mảng đó vào trong hàm callback để thực hiện xử lý như sau:

let num = [75, 68, 92, 84, 90];

let result = num.filter(function(element, index, num){
  return (element > 85 && index > 2 && num.length <10);
});

console.log(result);
// [ 90 ]

Với ví dụ này thì các điều kiện của giá trị và index của phần tử đang được xét, thì còn xét thêm một điều kiện nữa là số phần tử trong mảng phải nhỏ hơn 10. Và kết quả trả về như trên.

Sử dụng kết hợp phương thức Array filter với các hàm và phương thức khác

Ngoài việc xử lý các phép tính toán số học như trên, chúng ta cũng có thể sử dụng các hàm và phương thức khác bên trong hàm callback của phương thức Array filter, nhằm giúp việc xử lý các giá trị linh hoạt hơn.

Ví dụ, chúng ta có thể sử dụng phương thức Array filter kết hợp với phương thức isInteger để Lấy phần tử là số nguyên trong mảng JavaScript như sau:

let num = [1, 12.3, 2, 55, 9.0];

let result = num.filter(function(element){
  return Number.isInteger(element);;
});

console.log(result);
// [ 1, 2, 55, 9 ]

Lại nữa, chúng ta có thể dùng arrow function để rút gọn hàm callback khi sử dụng phương thức Array map, như ví dụ sau đây:

let num = [1, 12.3, 2, 55, 9.0];

let result = num.filter(element => Number.isInteger(element));

console.log(result);
// [ 1, 2, 55, 9 ]

• Xem thêm: Arrow function - hàm mũi tên trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách tìm kiếm trong mảng JavaScript theo điều kiện bằng cách sử dụng filter, find, some và every rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/array-filter-trong-javascript/