Hướng dẫn filter trong 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 đó.  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 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, 500Như 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ỗngKế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, 500Kết quả là phần tử có giá trị 300 đã biến mất. 2. Ví dụ hàm filter trong javascriptTa 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ếtNhư 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é. Bộ công cụ hoàn hảo cho bước khởi đầu với Functional Programming Bài viết này nhắm tới những người mới bắt đầu với Javascript hoặc những người mới bắt đầu làm việc với Javascript nhưng chưa hiểu về map, filter và reduce. Functional programming là gì ? Functional programming là một mô hình lập trình trong đó giá trị đầu ra của hàm chỉ phụ thuộc vào các đối số được truyền cho hàm đó , vì vậy việc gọi một hàm định nghĩa số lần sẽ luôn tạo ra cùng một kết quả , bất kể số lần bạn gọi là bao nhiêu . Điều này có vẻ trái ngược với lập trình thông thường , khi mà có rất nhiều hàm hoạt động với trạng thái là local hoặc global , có thể kết thúc trả về các kết quả khác nhau ở các lần thực thi khác nhau . Khi có sự thay đổi trong trạng thái đó có thể sẽ xuất hiện vấn đề và loại trừ những điều đó có thể giúp bạn hiểu và đoán hành vi code của mình dễ dàng hơn . Tại sao lại sử dụng map, filter, reduce ? Một trong những nền tảng chính của functional programming là việc sử dụng list và cách hoạt động của list . Trong Javascript chúng ta có map, filter và reduce , tất cả các chức năng khi đưa ra một danh sách ban đầu sau biến nó thành cái gì đó khác , nhưng vẫn giữ nguyên list gốc của nó . Map Đôi khi chúng ta có một mảng các object muốn sửa đổi / thêm các thuộc tính của từng đối tượng , cụ thể giả sử chúng ta có thể có một mảng các string mà ta sẽ biến tất cả chúng thành chữ thường . Trên thực tế có thể có vô số tình huống ở đó Map sẽ giúp chúng ta xử lý 1 cách dễ dàng . Sử dụng nó như thế nào ? Đây là cách cơ bản nhất để gọi map Như bạn có thể thấy , map nhận một callback là đối số , Callback sau đó được đưa ra giá trị hiện tại của phép lặp , index của vòng lặp và mảng ban đầu mà từ đó map được gọi . Ngoài ra còn có 1 đối số thứ 2 tuỳ chọn cho map ( sau khi gọi lại ) đó là giá trị để sử dụng "this" bên trong callback Ví dụ : Mảng các object trong javascript : Chuyển đổi đơn gian mảng các object sang mảng các strings Áp dụng một phép biến đổi thông qua một hàm util Chuyển đổi mảng đã cho và thêm sửa , xoá properties cho mỗi oject Filter Tôi tin rằng trong quá trình bạn code bạn đã gặp tình huống phải lọc 1 số item ra khỏi mảg ban đầu , vì nó là 1 trong những bài thực hành phổ biến nhất, để làm được điều đó chúng ta phải xử lí khá rắc rối , nhưng với filter thì bạn có thể sử dụng nó 1 cách dễ dàng Sử dụng nó như thế nào ? Khá giống với map , nếu bạn đã biết về map chắc hẳn bạn cũng biết filter ! Filter nhận các đối số giống như map và hoạt động rất giống nhau . Sự khác biệt duy nhất là callback cần trả về true hoặc false , nếu nó là true mảng không thay đổi nếu là false phần tử đó sẽ được lọc ra khỏi mảng ban đầu . Ví dụ : Lọc số chẵn : Tìm kiếm chuỗi đơn giản Lọc mảng các ọbject Reduce Cuối cùng cũng không kém phần quan trọng, reduce nhận vào 1 mảng và tính toán thành một giá trị duy nhất. Ví dụ, với một dãy số bạn có thể dễ dàng tính được trung bình của tất cả các giá trị. Sử dụng nó như thế nào ? Nó cũng khá giống với map và filter nhưng hơi khác ở đối số callback . Callback bây giờ nhận bộ tích luỹ ( nó tích luỹ tất cả các giá trị trả về . Giá trị của nó là sự tích luỹ của các tích luỹ trả về trước đó ) giá trị hiện tại , index hiện tại và cuối cùng là toàn bộ mảng . Ví dụ Tính toán tổng 1 mảng số nguyên Xây dựng 1 object từ 1 array Biến 1 mảng các mảng thành một mảng duy nhất Tại sai lại sử dụng map, filter và reduce?
Kết luận Tôi hy vọng rằng bạn sẽ thích và học được điều gì đó với bài viết này và có một ý chí để khám phá thêm về lập trình functional trong Javascript. Bài viết tham khảo : https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4 |
