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à
filter[]
trả về một mảng chứa phần tử thỏa mãn điều kiện, nhưngfind[]
trả về chính phần tử thỏa mãn điều kiện- 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 trongfind[]
, 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ụngconst 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 22. ví dụ về trường hợp sử dụng find[]
Ví dụ về trường hợp sử dụngconst 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ảngCả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
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