Hướng dẫn filter array javascript

Trong bài này chúng ta sẽ tìm hiểu hàm filter trong javascript, đây là hàm dùng để lặp qua các phần tử trong mảng, dùng để lọc các phần tử trong mảng theo một điều kiện nào đó.

Nội dung chính Show

1. Filter trong javascript là gì?
2. Ví dụ hàm filter trong javascript
3. Lời kết
Array filter trong JavaScript
Lấy phần tử thỏa mãn điều kiện và tạo mảng mới bằng filter
Sử dụng phương thức Array filter nâng cao
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
Tổng kết

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Hàm filter được tích hơp sẵn trong đối tượng mảng giống như hàm map trong javascript. Về cách thức hoạt động thì nó giống hàm map, nghĩa là nó sẽ có một tham số dạng function và function này sẽ xử lý cho mỗi lần lặp. Nếu function return true thì phần tử lần lặp đó được chấp nhận, ngược lại sẽ không được chấp nhận.

1. Filter trong javascript là gì?

Filter trong Javascript là một phương thức thuộc đối tượng mảng. Nó có công dụng đúng ý nghĩa với tên gọi của nó, tức là sẽ lặp qua qua các phần tử, sau đó tùy vào từng bài toán mà sẽ quyết định chọn phần tử đó hay không. Cuối cùng hàm này sẽ trả về một mảng các phần tử đã chọn.

Cú pháp của filter trong js như sau:

Bài viết này được đăng tại [free tuts .net]

objectArray.filter(function(value){
    return true / false;
});

Nếu return true thì phẩn tử được chọn, ngược lại return false thì phần tử không được chọn. Còn value chính là giá trị của mỗi phần tử trong mỗi lần lặp.

Ví dụ 1: Dùng dụng hàm filter với lệnh return true.

var numbers = [100, 200, 300, 400, 500];

var selected_number = numbers.filter(function(value){
    return true;
});

console.log(selected_number);// 100, 200, 300, 400, 500

Như bạn thấy, mảng mới có tổng số phần tử và giá trị của chúng không khác gì mảng cũ.

Ví dụ 2: Dùng hàm filter với lệnh return false.

var numbers = [100, 200, 300, 400, 500];

var selected_number = numbers.filter(function(value){
    return false;
});

console.log(selected_number); // Rỗng

Kết quả trả về một mảng không có phần tử nào, lý do là ta đã return false cho mọi tường hợp.

Ví dụ 3: Tạo mảng mới từ mnagr numbers và bỏ đi phần tử 300.

var numbers = [100, 200, 300, 400, 500];

var selected_number = numbers.filter(function(value){
    if (value == 300){
        return false;
    }
    return true;
});

console.log(selected_number); // 100, 200, 400, 500

Kết quả là phần tử có giá trị 300 đã biến mất.

2. Ví dụ hàm filter trong javascript

Ta sẽ làm thêm một ví dụ nữa để giúp các bạn dễ hình dung hơn nhé.

Ví dụ: Lấy các phần tử chẵn trong mảng cho trước.

Với bài này thì ta có hai cách, thứ nhất là sử dụng hàm filter, và thứ hai là sử dụng vòng lặp for.

Cách 1: Sử dụng hàm filter

var numbers = [5, 10, 20, 22, 60, 75, 90];

var new_numbers = numbers.filter(function(item){
    return (item % 2 == 0);
});

console.log(new_numbers);
// Kết quả: [10, 20, 22, 60, 90]

Cách 2: Sử dụng vòng lặp for

Một cách giải khác sử dụng vòng lặp for.

var numbers = [5, 10, 20, 22, 60, 75, 90];
var new_numbers = [];
for (var i = 0; i < numbers.length; i++){
    if (numbers[i] % 2 == 0){
        new_numbers.push(numbers[i]);
    }
}
console.log(new_numbers);
// Kết quả: [10, 20, 22, 60, 90]

3. Lời kết

Như vậy là mình đã hướng dẫn xong cách sử dụng vòng lặp foreach trong Javascript. Lưu ý là hàm này ta chỉ có thể sử dụng với mảng thôi nhé. Nếu bạn muốn sử dụng với đối tượng object thì tham khảo vòng lặp forEach nhé.

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ế:

Lấy từng phần tử trong mảng theo thứ tự từ đầu mảng
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
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:

arr.filter(callbackFn(value));
arr.filter(callbackFn(value, index));
arr.filter(callbackFn(value, index, array));

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);

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);

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);

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);

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);

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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> học javascript - lập trình javascript cơ bản>>04. mảng trong javascript

Hướng dẫn filter array javascript

1. Filter trong javascript là gì?

2. Ví dụ hàm filter trong javascript

3. Lời kết

Array filter trong JavaScript

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

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

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

Tổng kết

Bài viết liên quan

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội