Nội dung bài viết

Video học lập trình mỗi ngày

Filter javascript được sử dụng khi nào? Và cú pháp ra sao? Tất cả những câu hỏi này sẽ được tipjs khám phá trong bài post này. Việc tìm kiếm với những điều kiện trong Array() sẽ luôn là điều thú vị khi lập trình. Và việc sử dụng Filter() ES6 còn thú vị hơn nhiều.

Filter javascript là gì?

Array filter được giới thiệu từ khi ES6 ra đời và là một method tồn tại trong Array.prototype. Và quan trọng là hầu như tất cả những browser đã support method này.

Tips: Tìm hiểu Reduce javascript

Array filter cho phép chúng tôi return lại những elements được test trong điều kiện và thành một array mới. Điều đó có nghĩa là, nó sẽ loại bỏ những elements không phù hợp với điều kiện check. Nói một cách khác đó là Filter() method cho phép chúng ta có một array mới là chúng ta cần kiểm tra thoả mãn điều kiện chỉ trả về true và false.

Cú pháp Filter javascript

const returnValue = array.filter((value, index, array) => {...}, thisArg);

Trong đó: value element hiện tại index index element hiện tại array array looping thisArg argument cho phép sử dụng this.

Examples of using the filter method

Nếu trước đây chúng ta chưa có Filter() của ES6 thì chúng ta sẽ làm như thế nào với bài toán dưới đây. Cùng xem những ví dụ dưới đây...

- Tìm những học sinh có tuổi lớn hơn 18, trong các học sinh sau đây. const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14]

Before ES6

Tips: Có thể sử dụng map(), reduce ngoài filter để giải quyết

const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];

  let olderThan18 = [];

  for (let i = 0; i < ages.length; i++) {
      if(ages[i] > 18){
          olderThan18.push(ages[i])
      }
  }

console.log(olderThan18); // [34, 23, 51, 40]

Tuyệt vời và rất thú vị, nhưng thú vị hơn khi sử dụng Filter()

Alter ES6

const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];

let olderThan18 = ages.filter((age) => age > 18);

console.log(olderThan18); //[34, 23, 51, 40]

Notes: Chúng tôi đang sử dụng ví dụ với arrow function. Nếu bạn chưa quen với cú pháp arrow function thì nên xem qua bài post này.

Những chú ý khi sử dụng Filter javascript

Dưới đây là một số điều cần lưu ý về phương pháp sử dụng filter. Array.filter() return về một array mới. Filter() không thay đổi giá trị của array ban đầu.

Những ví dụ về filter javascript

#Example 1: Filtering an array of objects

const countries = [
        { name: 'Nigeria', continent: 'Africa'},
        { name: 'Nepal', continent: 'Asia'},
        { name: 'Angola', continent: 'Africa'},
        { name: 'Greece', continent: 'Europe'},
        { name: 'Kenya', continent: 'Africa'},
        { name: 'Greece', continent: 'Europe'}
    ]

    let asianCountries = countries.filter(country => {
        return country.continent === 'Asia';
    })

    console.log(asianCountries); // [{name: "Nepal", continent: "Asia"}]

# Example 2: Search for specific letters in an array

const names = ['Victoria', 'Pearl', 'Olivia', 'Annabel', 'Sandra', 'Sarah'];
    const filterItems = (letters) => {
        return names.filter(name => name.indexOf(letters) > -1);
    } 

    console.log(filterItems('ia')); // ["Victoria", "Olivia"]

Notes: Sử dụng indexOf() khác với findIndex() trong javascript

Sử dụng filter để sàng lọc những giá trị đúng trong một object

Với một Object đôi khi có thể chứa những giá trị như undefined... Như vậy chúng ta cũng có thể sử dụng array.filter() để lọc ra những values đúng như một ví dụ dưới đây:

const arr =  [ 
    { id :  15  } ,  { id :  - 1  } ,  { id :  0  } ,  { id :  3  } , 
    { id :  ' 12 '  } ,  { id :  null  } ,  { id : NaN } ,  { id :  ' undefined '  } 
]

const filtered = arr.filter ( obj = > 
    obj.id ! ==  undefined 
    &&  typeof( obj.id )  ===  'number' 
    && obj.id > =  0 
) ;

console.log( filtered ) ;

// [{id: 15}, {id: 0}, {id: 3}, {id: 12.2}]

Lời kết

Thêm một method cho mỗi ngày, chúng tôi đóng góp một chút kiến thức cho những bạn mới học javascript. Hy vọng filter() sẽ giúp ích cho bạn nhiều hơn trong việc lập trình. Hiện tại khi sử dụng Array thì có rất nhiều method mà mỗi lập trình viên javascript phải cần biết và tìm hiểu, chúng tôi có tóm tắt 10 method array cần biết trong javascript đối với bất kỳ developer javascript nào?

Resource: dev.to

Filter javascript