Hướng dẫn filter 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
1. Xây dựng giao diện
2. Thêm CSS để định dạng các thành phần
3. Thêm xử lý Javascript
4. Lời 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.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.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

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

0 thì phần tử không được chọn. Còn

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

1 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.: 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.: 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.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.: 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é.

Filter list là một danh sách các kết quả tìm kiếm có thể được lọc lại mỗi khi người dùng nhập vào một kí tự. Chúng ta thường gặp một filter list trong ô tìm kiếm của các website bán hàng hoặc tin tức. Trong bài này mình sẽ hướng dẫn các bạn tạo một filter list đơn giản với Javascript.

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

1. Xây dựng giao diện

Việc đầu tiên là chúng ta cần tạo file chạy chính, các bạn tạo file

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

2 và tạo các thành phần của filter list bằng đoạn mã sau:

<div class="container">
  <h2>Freetuts.net hướng dẫn tạo Filter List</h2>

  <input type="text" id="myInput" placeholder="Search for City.." title="Type in a name of City">

  <ul id="myUL">
    <li><a href="#">Athens</a></li>
    <li><a href="#">Amsterdam</a></li>
    <li><a href="#">Atlanta</a></li>
    <li><a href="#">Alaska</a></li>
    <li><a href="#">Barcelona</a></li>
    <li><a href="#">Bologna</a></li>
    <li><a href="#">Berlin</a></li>
    <li><a href="#">Bordeaux</a></li>
    <li><a href="#">Copenhagen</a></li>
    <li><a href="#">Cardiff</a></li>
    <li><a href="#">Caen</a></li>
    <li><a href="#">Cannes</a></li>
  </ul>
</div>

Trong phần này, mình tạo ra hai thành phần chính của một filter list, đó là một ô input để nhập giá trị tìm kiếm và một phần ul để hiện thị các kết quả tìm được dựa vào giá trị nhập ở ô input và mình cũng đặt tất cả các thành phần trong thẻ div có

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

3 để dễ dạng định dạng cho toàn bộ các thành phần.

OK vậy là xong phần giao diện, chúng ta đến bước tiếp theo nhé.

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

2. Thêm CSS để định dạng các thành phần

Trong bước này chúng ta sẽ sử dụng CSS để định dạng cho các thành phần của trang, các bạn dán đoạn mã sau vào bên trong thẻ style:

* {
  box-sizing: border-box;
}
.container {
  width: 500px;
  margin: auto;
}

#myInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  display: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; 
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

Tất cả đều là các thuộc tính cơ bản trong CSS nên mình không giải thích nữa, các bạn chỉ cần lưu ý một điểm là chúng ta sẽ mặc định ẩn phần ul chứa kết quả đi với thuộc tính

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

4, sau khi người dùng tiến hành filter thì ta mới hiển thị các phần tử phù hợp. Nếu các bạn muốn hiển thị tất cá các kết quả ngay khi load xong trang thì bỏ dòng này đi nhé.

3. Thêm xử lý Javascript

Trong bước cuối cùng này, chúng ta sẽ sử dụng javascript để tìm kiếm các kết quả dựa vào giá trị người dùng nhập vào và hiển thị các kết quả phù hợp, các bạn thêm giúp mình đoạn mã script này vào sau thẻ body:

<script>
  // lấy thẻ input
  var input = document.getElementById("myInput");
  // định nghĩa hàm xử lý myFunction
  function myFunction() {
      var filter, ul, li, a, i;
      // lấy giá trị người dùng nhập
      filter = input.value.toUpperCase();
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName("li");
      // Nếu filter không có giá trị thị ẩn phần kết quare\
      if (!filter) {
        ul.style.display = "none";
      }else{
        // lặp qua tất cả các thẻ li chứa kết quả
        for (i = 0; i < li.length; i++) {
            // lấy thẻ a trong các thẻ li
            a = li[i].getElementsByTagName("a")[0];
            // kiểm tra giá trị nhập có tôn tại trong nội dung thẻ a
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
              //nếu có hiển thị phàn tử ul và các thẻ li đó
                ul.style.display = "block";
                li[i].style.display = "";
            } else {
              // nếu không ẩn các thẻ li
                li[i].style.display = "none";

            }
        }
      }
  }
  //gán sự kiện cho thẻ input
  input.addEventListener("keyup", myFunction);
</script>

Mình đã giải thích rất cụ thể, các bạn đọc ghi chú để hiểu rõ về các bước hoạt động của đoạn mã script này nhé. Có một điểm cần lưu ý là mình đều sử dụng phương thức

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

5 cho cả giá trị fillter và giá trị bên trong thẻ a khi kiểm tra để chúng cùng là chữ in hoa, vậy nên filter list của chúng ta sẽ không biệt chữ hoa chữ thường.

Giờ chạy file

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

2 để xem thành quả nhé!

4. Lời kết

Như vậy, qua bài viết này mình đã cùng các bạn xây dựng thành công một Filter list đơn giản, hi vọng rằng nó sẽ giúp đỡ các bạn phần nào trong quá trình xây dựng website của mình.

Nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com