Sự khác biệt giữa find() và find Index trong JavaScript

Trong bài đăng này, chúng tôi sẽ đề cập đến findIndex so với indexOf - JavaScript với ít thuật ngữ kỹ thuật nhất có thể để bạn có mọi thứ mình cần ngay tại đây mà không cần phải tìm kiếm thêm

Như bạn đã biết, có hai phương pháp hữu ích để tìm chỉ mục trong một mảng JavaScript, nhưng bạn nên sử dụng phương pháp nào?

Trong bài đăng này về find Index so với indexOf trong JavaScript, chúng ta sẽ xem xét sự khác biệt giữa Array. nguyên mẫu. phương thức findIndex và Array. nguyên mẫu. phương thức indexOf

Trước khi chúng ta đi sâu vào bài viết này, tôi có hai bài đăng, cách lấy chỉ mục của một mục trong một mảng trong JavaScript và cách lấy chỉ mục của một đối tượng trong một mảng trong JavaScript, đi sâu vào chi tiết về cách sử dụng cả hai

Bây giờ, hãy bắt đầu và xem sự khác biệt giữa findIndex và indexOf là gì

Sự khác biệt giữa findIndex so với indexOf trong JavaScript là gì?

Sự khác biệt chính giữa findIndex so với indexOf trong JavaScript là findIndex chấp nhận gọi lại làm đối số và indexOf chấp nhận giá trị làm đối số

Điều này có nghĩa là indexOf sẽ chỉ tìm kiếm một giá trị trong một mảng, trong khi findIndex sẽ cho phép bạn quyết định cách tìm kiếm chỉ mục

Dưới đây là một ví dụ trực quan về sự khác biệt giữa Array. nguyên mẫu. phương thức findIndex so với Array. nguyên mẫu. phương thức indexOf

const exampleArray = ["a", "b", "c"]

exampleArray.indexOf["b"] // 1
exampleArray.findIndex[arrayItem => arrayItem === "b"] // 1
exampleArray.indexOf["d"] // -1
exampleArray.findIndex[arrayItem => arrayItem === "d"] // -1

Như bạn có thể thấy cả hai đều rất giống nhau và cho bạn cùng một kết quả khi tìm kiếm cùng một giá trị

Hàm gọi lại mà chúng tôi cung cấp cho findIndex luôn cần trả về giá trị boolean. Nếu hàm gọi lại trả về true, phương thức findIndex sẽ xem xét mục mảng khớp với những gì chúng ta đang tìm kiếm và nó sẽ trả về chỉ mục đó

Nếu cuộc gọi lại trả về false, nó sẽ chuyển sang mục mảng tiếp theo

Cả hai phương thức sẽ trả về -1 nếu chúng không thể tìm thấy chỉ mục chính xác trước khi kết thúc mảng

Khi sử dụng indexOf, nó sẽ xem qua từng mục mảng và trả về chỉ mục đầu tiên mà nó tìm thấy khớp với giá trị mà chúng ta đã cung cấp cho nó, nếu không tìm thấy gì, nó sẽ trả về -1

Khi sử dụng findIndex, nó sẽ chuyển từng mục mảng vào hàm gọi lại mà chúng tôi cung cấp cho nó, khi hàm gọi lại của chúng tôi trả về true, nó sẽ biết rằng nó đã tìm thấy chỉ mục và nó sẽ trả về cho chúng tôi. Nếu nó không tìm thấy chỉ mục hoặc nếu kết quả từ mỗi lần gọi lại là sai thì nó sẽ trả về -1 giống như indexOf vì nó không thể tìm thấy chỉ mục

Bây giờ bạn có thể tự hỏi nhu cầu cần có chức năng gọi lại trong ví dụ này là gì và tại sao bạn không nên sử dụng phương thức indexOf?

Lý do là vì trong ví dụ này, chúng ta đang sử dụng các giá trị rất đơn giản trong mảng, đó là những gì Array. nguyên mẫu. indexOf hoạt động rất tốt, nhưng nếu chúng ta cần tìm kiếm chỉ mục của thứ gì đó phức tạp hơn như một đối tượng, thì đó là lúc mọi thứ trở nên phức tạp hơn một chút

Nếu bạn đang tìm kiếm một đối tượng, trừ khi bạn có thể cung cấp đẳng thức tham chiếu, bạn sẽ không thể sử dụng indexOf vì hai đối tượng giống hệt nhau sẽ không bằng nhau

Tôi đi vào chi tiết hơn về điều này trong bài viết của tôi về cách lấy chỉ mục của một đối tượng trong một mảng trong JavaScript

Nhưng để trình bày ngắn gọn ở đây, lần duy nhất một phép so sánh đối tượng sẽ trả về giá trị đúng là nếu bạn đang so sánh cùng một đối tượng

Đây là một ví dụ về điều này

{} === {} // false

const myObj = {}
myObj === myObj // true

Mặc dù các đối tượng giống hệt nhau, nhưng vì chúng không trỏ đến cùng một tham chiếu nên phép so sánh không thành công, nhưng khi chúng trỏ đến cùng một tham chiếu thì phép so sánh sẽ vượt qua

Với suy nghĩ này, đây là một ví dụ về cách tìm chỉ mục của một đối tượng trong một mảng trong JavaScript hoạt động khi xem findIndex so với indexOf

const exampleObj = { laptops: 5 }
const exampleArray = [{ laptops: 10 }, exampleObj, { laptops: 14 }]

exampleArray.indexOf[{ laptops: 5 }] // -1
exampleArray.indexOf[{ laptops: 10 }] // -1
exampleArray.findIndex[arrayItem => arrayItem.laptops === 5] // 1
exampleArray.indexOf[exampleObj] // 1

Như bạn có thể thấy với indexOf mặc dù chúng tôi đang cung cấp một đối tượng giống hệt nhau, nhưng nó không thể tìm thấy nó trong mảng

Việc sử dụng findIndex cho phép chúng tôi kiểm tra các thuộc tính, khóa và giá trị bên trong từng đối tượng trong một mảng và do đó, nó có thể tìm đúng mục trong mảng và trả về chỉ mục cho hai chúng tôi

Và cuối cùng, bởi vì chúng ta đang chuyển tham chiếu vào phương thức indexOf cuối cùng nên nó có thể tìm đúng mục trong mảng do đẳng thức tham chiếu

Bạn có nên sử dụng findIndex so với indexOf trong JavaScript không?

Nếu bạn đang tìm kiếm một giá trị đơn giản như một số hoặc một chuỗi, thì phần lớn bạn có thể sẽ muốn sử dụng Array. nguyên mẫu. indexOf vì nó thực hiện chính xác những gì bạn cần, dễ sử dụng và dễ hiểu

Nếu bạn đang tìm kiếm một giá trị phức tạp hơn như một đối tượng thì rất có thể bạn sẽ muốn sử dụng Array. nguyên mẫu. find Index để bạn có thể tìm đúng chỉ mục bằng cách tìm kiếm bằng các khóa, giá trị và thuộc tính của từng đối tượng

Có một edgecase nhỏ nơi bạn có thể sử dụng indexOf để tìm kiếm một đối tượng miễn là bạn có đẳng thức tham chiếu, nhưng điều này có thể gây nhầm lẫn và trong hầu hết các trường hợp sẽ không đặc biệt hữu ích, vì vậy ngay cả khi bạn làm vậy thì vẫn có thể đáng giá . nguyên mẫu. tìm Index

Hiệu suất của findIndex so với indexOf trong JavaScript

Nói chung, hiệu suất giữa findIndex và indexOf sẽ hoàn toàn không đáng kể và do đó bạn không nên lo lắng về điều đó

Như đã nói, nó phụ thuộc vào mảng bạn sử dụng cho cả hai và hàm gọi lại mà bạn cung cấp phương thức findIndex

Nếu bạn đang thực hiện nhiều tính toán phức tạp trong hàm gọi lại mà bạn cung cấp thì hiệu suất sẽ kém hơn indexOf, nhưng tại thời điểm đó, nó sẽ không phải là một so sánh công bằng vì dù sao thì indexOf cũng không thể được sử dụng

Nếu chúng tôi cho rằng hàm gọi lại mà bạn cung cấp là một xác nhận hoặc điều kiện đơn giản trả về một giá trị boolean, thì cả hai phương thức này sẽ chạy trong cùng một mức độ phức tạp về không gian thời gian [ký hiệu O lớn] là O[n] trong trường hợp xấu nhất

Nếu bạn quyết định muốn xem xét sự khác biệt về hiệu suất một cách chi tiết hơn, tôi khuyên bạn nên xem indexOf và findIndex tại đây để xem cả hai phương pháp này hoạt động như thế nào.

Nhưng hãy nhớ rằng, cả hai đều có cùng độ phức tạp về không gian và thời gian và sẽ cung cấp rất ít cải tiến về hiệu suất giữa hai phương pháp, do đó, gần như chắc chắn không đáng để tối ưu hóa hiệu suất giữa hai phương pháp này

Nếu bạn thấy rằng mình đang gặp sự cố về hiệu suất khi sử dụng phương thức findIndex, thì rất có thể là do hàm gọi lại mà bạn đang cung cấp có thể thực hiện quá nhiều công việc hoặc kích thước mảng quá lớn

Tóm lược

Ở đó chúng tôi có findIndex vs indexOf - JavaScript, nếu bạn muốn nhiều hơn như thế này, hãy nhớ xem một số bài đăng khác của tôi

Tôi hy vọng bài đăng này hữu ích, nhưng trước khi bạn tiếp tục, hãy đảm bảo rằng bạn đã thử bài kiểm tra tương tác thú vị của tôi để xem bạn là kỹ sư React mới vào nghề, trung cấp hay chuyên gia

Sẽ chỉ mất khoảng 1 - 3 phút, vì vậy bạn không có gì để mất, hãy kiểm tra khả năng của mình ngay bây giờ

làm bài kiểm tra

Bạn là kỹ sư phản ứng mới, trung cấp hay chuyên gia?

Tìm hiểu tại đây bằng cách làm bài kiểm tra nhanh, tương tác, vui nhộn của tôi, mất khoảng 1 - 3 phút. Bạn sẽ làm tốt đến mức nào?

Bài đăng này sẽ bao gồm mọi thứ bạn cần biết về React Fragment một cách rõ ràng và ngắn gọn và sẽ là nguồn tài nguyên cuối cùng cho bất kỳ truy vấn nào liên quan đến React Fragment

Will Mayger

Ngày 24 tháng 3 năm 2022

Bài báo

Bài đăng này sẽ đề cập đến cách đợi tất cả các lời hứa giải quyết trong JavaScript thay vì phải thực hiện từng lời hứa khi bạn có nhiều lời hứa cần giải quyết

Will Mayger

21 Tháng Ba, 2022

Bài báo

Trong hướng dẫn này, bạn sẽ khám phá mọi thứ bạn cần biết về React Keys để có thể sử dụng chúng đúng cách trong bất kỳ ứng dụng React nào cùng với thông tin chi tiết

Will Mayger

03 Tháng Ba, 2022

Bài báo

Trong bài đăng này, chúng tôi đề cập đến sự khác biệt giữa, React. Phân đoạn so với div, lợi ích của một phân đoạn và khi nào bạn nên sử dụng cái này hơn cái kia

Việc sử dụng find Index là gì?

Chỉ mục [] trong JavaScript là gì?

Làm cách nào để lấy chỉ mục của một phần tử trong JavaScript mảng?

Làm cách nào để lấy chỉ mục đối tượng trong JavaScript?