Lọc và tìm hiệu suất javascript

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 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

Phương pháp filter() là gì?

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 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]

ví dụ về bộ lọc()

Các bạn kiểm tra kết quả của ví dụ trên thì giá trị của y là mảng có 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

Phương pháp find() là gì?

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 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

ví dụ về find()

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ề

Các 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 phương thức filter(). 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 find() 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. bộ lọc () ví dụ về trường hợp sử dụng

Ví dụ về trường hợp sử dụng

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

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

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

filter()

Trong ví dụ trên,

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

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

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

2 có ý nghĩa hơn vì 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()

Ví dụ về trường hợp sử dụng

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}

find()

Trong ví dụ trên,

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

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

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

3 có ý nghĩa hơn vì chỉ có 1 nhân viên có

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

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

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

4 là

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

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

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

5, vì vậy, 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

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Aman Kalra

Kỹ sư giao diện người dùng

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Mảng là một trong những cấu trúc dữ liệu được sử dụng nhiều nhất trong thế giới Javascript để thực hiện bất kỳ thứ tự hoạt động nào. Gần đây, chúng tôi đã làm việc với các câu lệnh tìm kiếm khác nhau, duyệt/tìm thuật toán và tìm ra những cách tốt nhất để sử dụng các phương thức mảng dựng sẵn có sẵn để giảm nỗ lực với hiệu suất tốt hơn

Ở đây chúng ta sẽ thảo luận về nguyên tắc hoạt động của năm phương thức mảng JS 'find', 'filter', 'findIndex', 'some' và 'every'.
Hãy có một mảng các loại trái cây và giá của chúng mà chúng ta muốn thực hiện một số thao tác tìm kiếm cơ bản.

const trái cây = [{item. “quả táo”, giá cả. “50”},,{mục. "màu cam", giá. “30”}, {mục. “nho”, giá. “40”}, {mục. "màu cam", giá. “80”}]

Trường hợp sử dụng 1. Tìm thấy.
Sử dụng phương thức 'tìm' mảng để duyệt qua mảng để lấy kết quả của một thực thể duy nhất khi điều kiện khớp lần đầu tiên nếu không sẽ trả về 'không xác định'.
Vòng lặp chỉ thực hiện cho đến trận đấu đầu tiên. CallbackFn được chạy ngay cả đối với các chỉ mục có giá trị chưa được gán.

Trường hợp sử dụng 2. Lọc.
Sử dụng phương thức 'bộ lọc' mảng để duyệt qua mảng để lấy kết quả của tất cả các thực thể thỏa mãn điều kiện khác trả về mảng trống '[]'.
Vòng lặp thực thi cho tất cả các thực thể. CallbackFn không chạy cho các chỉ mục có giá trị chưa được gán.

Trường hợp sử dụng 3. Tìm Index.
Sử dụng phương thức mảng ‘findIndex’ để duyệt qua mảng để lấy kết quả số nguyên là ‘số chỉ mục’ khi điều kiện khớp với bất kỳ thực thể nào lần đầu tiên nếu không thì trả về ‘-1’.
Vòng lặp chỉ thực hiện cho đến trận đấu đầu tiên. CallbackFn được chạy ngay cả đối với các chỉ mục có giá trị chưa được gán.

Trường hợp sử dụng 4. Một số.
Sử dụng phương thức mảng ‘some’ để duyệt qua mảng để nhận kết quả boolean true nếu điều kiện khớp với bất kỳ thực thể nào khác trả về false.
Vòng lặp chỉ thực hiện cho đến trận đấu đầu tiên. CallbackFn không chạy cho các chỉ mục có giá trị chưa được gán.

Trường hợp sử dụng 5. Mọi.
Sử dụng phương thức mảng ‘mọi’ để duyệt qua mảng để có kết quả boolean true nếu điều kiện phù hợp với tất cả các thực thể khác trả về false.
Vòng lặp thực hiện cho đến lần khớp sai đầu tiên. CallbackFn không chạy cho các chỉ mục có giá trị chưa được gán.

Bản tóm tắt. Tất cả các đầu ra trên cũng có thể đạt được với forEach, Map hoặc các phương thức mảng khác. Nhưng chúng ta cần đủ thông minh để hiểu tác động đến hiệu suất thời gian và không gian và đảm bảo chọn đúng bộ phương pháp cho các yêu cầu nhất định

Cái nào tìm hoặc lọc nhanh hơn trong JavaScript?

Tìm hay lọc tốt hơn?

Tìm JavaScript có nhanh hơn vòng lặp for không?

Cái gì nhanh hơn cho hoặc bộ lọc?