So sánh filter() và find() trong javascript

Như các bạn đã biết, có nhiều method làm việc với array trong javascript (map, filter, reduce...), và hôm nay chúng ta sẽ xét riêng 2 method dùng khá nhiều đó là  find()  và filter() 

Có thể nó quá quen thuộc với nhiều anh em rồi, nhưng khoan đã, chúng ta đã vững về nó và áp dụng đúng tình huống, đúng ngữ cảnh và công năng của nó chưa?

Biết đâu ở một đoạn code nào đó, đúng ra là dùng find sẽ gọn hơn filter và ngược lại mà bạn đã nhầm lẫn thì sao.

Cùng xem ví dụ cụ thể nhé 💟

Ví dụ 1: Tìm element trong mảng thỏa điều kiện

find() trong javascript

const bbmcode = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = bbmcode.find(element => element % 2 === 0);

console.log("result is: ", result);  // result is: 2

filter() trong javascript

const bbmcode = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = bbmcode.filter(element => element % 2 === 0);

console.log("result is: ", result);  // result is: [2, 4, 6, 8, 10]

Dựa vào ví dụ trên, có thể thấy:

- find() sẽ tìm và dừng ngay khi tìm thấy element đầu tiên thoả điều kiện

- filter() sẽ tìm và lấy tất cả element thoả điều kiện, kết quả trả về là một array.

Như vậy, nếu bối cảnh thực tế cần tìm phần tử đầu tiên trong mảng thỏa điều kiện, chúng ta chỉ cần dùng find(), sẽ nhanh hơn việc dùng filter() sau đó lấy phần tử đầu tiên của kết quả trả về đúng không nào.

🔯 Nhưng khoan đã, ví dụ tìm không thấy thì thế nào nhỉ? Sang ví dụ số 2 nha

Ví dụ 2: Không tìm thấy element trong mảng thỏa điều kiện

find() trong javascript

const bbmcode = [1, 3, 5, 7];

const result = bbmcode.find(element => element % 2 === 0);

console.log("result is: ", result);  // result is: undefined

filter() trong javascript

const bbmcode = [1, 3, 5, 7];

const result = bbmcode.filter(element => element % 2 === 0);

console.log("result is: ", result);  // result is: []

Ồ, như vậy là với find(), không tìm thấy sẽ return ra undefined, còn filter() luôn trả về array.

Đây cũng là một lưu ý, khi thực tế chúng ta hay dùng kết quả trả về của find() để làm gì đó, thì nhớ kiểm tra xem nó có phải là undefined không nha.

Đến đây thì cũng đã khá rõ công dụng và điểm khác biệt của 2 method find() và filter() rồi. 

Nhưng để thực tế và thao tác thử trên tập dữ liệu phức tạp hơn, nó sẽ thế nào nhé. Mình sẽ qua ví dụ thứ 3 với một array objects.

Ví dụ 3: find() và filter() với array objects

find() trong javascript

const bbmcode = [
    {
        name: "MOUSE",
        price: 100
    },
    {
        name: "CPU",
        price: 101
    },
    {
        name: "RAM",
        price: 102
    },
];

const result = bbmcode.find(el => el.price > 100);

console.log("result is: ", result);
// result is: {name: 'CPU', price: 101}

filter() trong javascript

const bbmcode = [
    {
        name: "MOUSE",
        price: 100
    },
    {
        name: "CPU",
        price: 101
    },
    {
        name: "RAM",
        price: 102
    },
];

const result = bbmcode.filter(el => el.price > 100);

console.log("result is: ", result);
// result is: [ {name: "CPU", price: 101},  {name: "RAM", price: 102} ]

Đến đây thì quá rõ ràng, với find() sẽ trả về element (object) đầu tiên thỏa điều kiện.

Còn filter() sẽ loop hết những elements trong const bbmcode và trả về một array chứa tất cả những elements thoả mãn điều kiện price > 100

💟 Kết luận: Chỉ với 3 ví dụ cụ thể, mong rằng bạn có thể hiểu rõ hơn công dụng cũng như so sánh được sự khác nhau filter() và find().

Kiến thức này không mới, nhưng dễ nhầm lẫn và ảnh hưởng đến code performance. Nên có thời gian chúng ta cứ xem lại để nắm vững kiến thức nha.

Cảm ơn bạn đã đọc!