find() so với filter() trong JavaScript – Sự khác biệt được giải thích bằng các ví dụ

Một câu hỏi phỏng vấn phổ biến mà các nhà phát triển JavaScript thường được hỏi là giải thích sự khác biệt giữa các phương thức find() và filter().

Trong hướng dẫn ngày hôm nay, tôi sẽ hướng dẫn bạn những phương pháp này là gì và khi nào bạn nên sử dụng chúng.

cái gì filter() phương pháp?

Phương thức này trả về tất cả các phần tử của mảng thỏa mãn điều kiện được chỉ định trong hàm gọi lại.

Hãy xem một ví dụ về cách nó thực sự hoạt động:

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el*2 === 2);

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

Nếu bạn kiểm tra đầu ra của ví dụ trên, giá trị của y là mảng 1 phần tử thỏa mãn điều kiện. Điều này là do phương thức filter() lặp lại trên tất cả các phần tử của mảng và sau đó trả về một mảng đã lọc thỏa mãn điều kiện đã chỉ định.

cái gì find() phương pháp?

Phương thức này trả về phần tử đầu tiên của mảng thỏa mãn điều kiện được chỉ định trong hàm gọi lại.

Hãy xem một ví dụ về cách nó thực sự hoạt động:

const x = [1, 2, 3, 4, 5];

const y = x.find(el => el*2 === 2);

console.log("y is: ", y); // y is: 1

Bây giờ, nếu bạn thấy đầu ra của ví dụ trên, giá trị của y là 1. Điều này là do phương thức find() tìm kiếm phần tử đầu tiên trong mảng thỏa mãn điều kiện đã chỉ định.

Sự khác biệt chính giữa các ví dụ trên là:

1. filter() trả về một mảng chứa phần tử thỏa mãn điều kiện, nhưng find() trả về chính phần tử thỏa mãn điều kiện.
2. Trong filter(), toàn bộ mảng được lặp lại mặc dù thực tế là phần tử được tìm kiếm đã xuất hiện ngay từ đầu. Nhưng trong find()ngay khi phần tử thỏa mãn điều kiện được tìm thấy, nó sẽ được trả về.

Trường hợp sử dụng cho find() và filter()

Khi bạn gặp trường hợp sử dụng trong đó dự kiến ​​sẽ trả về nhiều hơn 1 phần tử và bạn muốn thực hiện thao tác trên tất cả các phần tử, thì bạn có thể sử dụng lọc() phương pháp. Nhưng nếu bạn muốn chỉ một phần tử duy nhất được trả về từ mảng, thì bạn có thể sử dụng tìm thấy() và tránh lặp lại thêm.

Hãy xem xét các ví dụ về cả hai trường hợp sử dụng:

1. ví dụ về trường hợp sử dụng filter()

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el%2 === 0);

console.log("y is: ", y); // y is: [2, 4]

Trong ví dụ trên, filter() có ý nghĩa hơn khi bạn muốn lặp lại tất cả các phần tử của mảng để tìm các phần tử chia hết cho 2.

2. ví dụ về trường hợp sử dụng find()

const emp = [
    {
        name: "Ram",
        empID: 101
    },
    {
        name: "Sham",
        empID: 102
    },
    {
        name: "Mohan",
        empID: 103
    }
];

const res = emp.find(el => el.empID === 102);

console.log("res is: ", res); // res is: {name: 'Sham', empID: 102}

Trong ví dụ trên, find() có ý nghĩa hơn vì chỉ có 1 nhân viên có 102 như empID Vì thế, find() giúp tránh lặp lại đối tượng thứ 3 trong mảng.

Cảm ơn vì đã đọc!

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè và đồng nghiệp của bạn.