ความแตกต่างระหว่างฟังก์ชัน indexOf และ findIndex ของอาร์เรย์

ฉันสับสนระหว่างความแตกต่างระหว่างสองฟังก์ชัน indexOf และค้นหา Index ในอาร์เรย์

เอกสารระบุว่า

findIndex - ส่งกลับดัชนีขององค์ประกอบแรกในอาร์เรย์โดยที่เพรดิเคตเป็นจริงและ -1 มิฉะนั้น

และ

indexOf - ส่งกลับดัชนีของการเกิดขึ้นครั้งแรกของค่าในอาร์เรย์

ความแตกต่างที่สำคัญคือพารามิเตอร์ของฟังก์ชันเหล่านี้:

• Array.prototype.indexOf()คาดว่าค่าเป็นพารามิเตอร์แรก สิ่งนี้ทำให้เป็นทางเลือกที่ดีในการค้นหาดัชนีในอาร์เรย์ของประเภทดั้งเดิม (เช่นสตริงตัวเลขหรือบูลีน)

• Array.prototype.findIndex()คาดว่าจะมีการเรียกกลับเป็นพารามิเตอร์แรก ใช้สิ่งนี้หากคุณต้องการดัชนีในอาร์เรย์ที่มีชนิดที่ไม่ใช่ดั้งเดิม (เช่นวัตถุ) หรือเงื่อนไขการค้นหาของคุณซับซ้อนกว่าเพียงค่า

ดูลิงก์สำหรับตัวอย่างของทั้งสองกรณี

FindIndex มีประโยชน์หากคุณต้องการค้นหาองค์ประกอบแรกที่ตรงกับเพรดิเคตของคุณ: ในตัวอย่างของ W3C จะมีตัวเลขที่ตรงกันหากอายุของลูกค้าสูงกว่าหรือเท่ากับ 18

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

console.log(ages.findIndex(checkAdult));

คอนโซล:

2

คุณสามารถค้นหาดัชนีองค์ประกอบที่แน่นอนได้ด้วยฟังก์ชัน indexOf ของ Array แต่คุณไม่สามารถส่งผ่านเพรดิเคตได้ จะเร็วกว่าหากคุณต้องการค้นหาองค์ประกอบเฉพาะ:

var ages = [3, 10, 18, 20];
console.log(ages.indexOf(10));

ผลตอบแทน:

1

การนับดัชนีเริ่มต้นที่ 0 ดังนั้นดัชนีองค์ประกอบแรกจึงเป็น 0

ความแตกต่างที่สำคัญคือพารามิเตอร์ของฟังก์ชันเหล่านี้:

-> Array.prototype.indexOf () :

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   var a = fruits.indexOf("Apple");
   The result of a will be: 2

-> Array.prototype.findIndex () :

       var ages = [3, 10, 18, 20];

       function checkAdult(age) {
        return age >= 18;
       }

       function myFunction() {
         document.getElementById("demo").innerHTML = 
         ages.findIndex(checkAdult);
       }

       The result will be: 2

คุณยังสามารถใช้includes:

[1, 2, 3].includes(2);      // true
[1, 2, 3].includes(4);      // false
[1, 2, 3].includes(3, 3);   // false

แต่ฉันชอบindexOfวิธีการ:

var vals = [ "foo", "bar", 42, "baz" ];
if (~vals.indexOf( 42 )) {
  // found it!
}

ความแตกต่างอีกประการหนึ่งคือด้วยfindIndex ()ผู้ใช้สามารถใช้ฟังก์ชันบางอย่างได้และค้นหาองค์ประกอบในอาร์เรย์ที่ผ่านการทดสอบ

แต่สิ่งเดียวกันนี้ไม่เป็นความจริงกับตัวดำเนินการindexOf () ผู้ใช้สามารถตรวจสอบได้ว่าองค์ประกอบนั้นมีอยู่ในอาร์เรย์หรือไม่

แบบง่าย - คุณใช้โครงสร้างอาร์เรย์แบบไหน?

• ถ้าอาร์เรย์ของวัตถุ findIndex() ;
• indexOf()อื่น

"ฉันต้องการค้นหาดัชนีในอาร์เรย์ของวัตถุโดยใช้คีย์" Orange "

let fruits = [
   { type: "Apple", quantity: 9 },
   { type: "Banana", quantity: 2},
   { type: "Orange", quantity: 8},
   { type: "Pear", quantity: 777}
];

let myIndex = fruits.findIndex(fruit => fruit.type === "Orange"); // Returns 2.

"ฉันต้องการค้นหาดัชนีในอาร์เรย์ธรรมดา "

let fruits = [ "Apple", "Banana", "Pear", "Orange"];

let index = fruits.indexOf("Orange"); // Returns 3.

คุณสามารถลองใช้รหัสด้านล่าง: -

let city = ['Delhi', 'mumbai']
const a = city.findIndex((item) => 
item.toLowerCase()==='delhi')
console.log(a) // returns 0

let c = city.indexOf('mumbai') // returns 1
console.log(c)