Perbedaan Antara fungsi indexOf dan findIndex dari array

125

Saya bingung antara perbedaan antara dua fungsi indexOf dan menemukan Indeks dalam sebuah array.

Dokumentasinya mengatakan

findIndex - Mengembalikan indeks elemen pertama dalam larik di mana predikatnya benar, dan -1 jika tidak.

dan

indexOf - Mengembalikan indeks kemunculan pertama dari nilai dalam array.

Rahul Singh
sumber
4
Saya pikir perbedaannya adalah, seseorang mengambil fungsi sebagai argumen (memungkinkan penemuan yang lebih canggih, seperti katakanlah Anda sedang mencari kemunculan pertama dari suatu nilai dengan substring tertentu, bukan hanya seluruh nilai), seseorang hanya mengambil nilai Anda ' sedang mencari. Ini sebenarnya bukan pertanyaan yang buruk. Suara negatif tanpa penjelasan harus memiliki suara negatif.
Tim Consolazio
Terkadang yang terbaik adalah memulai dengan spesifikasi bahasa (yaitu ECMA-262) dan mengisi kekosongan dengan materi lain: Array.prototype.indexOf (searchElement [, fromIndex]) vs Array.prototype.findIndex (predicate [, thisArg]) .
RobG
Terima kasih Tim dan RobG
Rahul Singh

Jawaban:

195

Perbedaan utamanya adalah parameter dari fungsi-fungsi ini:

  • Array.prototype.indexOf()mengharapkan nilai sebagai parameter pertama. Ini menjadikannya pilihan yang baik untuk menemukan indeks dalam array tipe primitif (seperti string, angka, atau boolean).

  • Array.prototype.findIndex()mengharapkan callback sebagai parameter pertama. Gunakan ini jika Anda memerlukan indeks dalam array dengan tipe non-primitif (misalnya objek) atau kondisi pencarian Anda lebih kompleks dari sekedar nilai.

Lihat tautan untuk contoh kedua kasus.

str
sumber
4
Jika ada yang bertanya-tanya tipe primitif apa itu js, itu adalah hal-hal seperti string, number, boolean.
John Lee
3
Harap dicatat bahwa indexOfakan bekerja untuk menemukan objek. Penting untuk mendapatkan perbedaan bahwa ia menerima satu Objek, bukan hanya nilai, dan membandingkannya dengan persamaan bukan nilai. Per dokumen Mozilla: indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator). Harap ubah findIndexpenjelasan untuk hanya menyertakan "atau kondisi temuan Anda lebih kompleks daripada hanya satu nilai atau referensi" untuk memperbaikinya karena awalnya menyesatkan saya. Terima kasih!
brokenalarms
2
@brokenalarms Itu benar, tetapi hanya jika Anda memiliki referensi ke objek sebenarnya dalam array. Misalnya, [{a:1}].indexOf({a:1})mengembalikan -1meskipun objeknya tampak sama (tetapi sebenarnya tidak). Tidak yakin apakah informasi ini membantu dalam jawaban karena mungkin membingungkan. Jika Anda perlu mengetahui lebih banyak tentang perilaku bahasa yang tepat, Anda harus membaca spesifikasinya.
str
Lebih lanjut, indexOf () membandingkan searchElement dengan elemen Array menggunakan kesetaraan ketat (metode yang sama digunakan oleh operator === atau triple-equal).
immirza
Perlu dicatat bagaimanapun itu .indexOf(NaN)akan selalu kembali -1karena NaN==NaNselalu false. NaN adalah tipe primitif karena typeof NaNada numberdan begitu juga nulldan undefined, jadi saya akan mengubah ini untuk menghindari mengatakan indexOfkarya pada tipe primitif
Matius
13

FindIndex berguna jika Anda ingin menemukan elemen pertama yang sesuai dengan predikat Anda: Dalam contoh W3C, terdapat angka dan kecocokan jika usia pelanggan di atas atau sama dengan 18.

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

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

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

menghibur:

2

Anda dapat menemukan indeks elemen yang tepat dengan fungsi indexOf dari Array, tetapi Anda tidak dapat memberikan predikat. Lebih cepat jika Anda ingin menemukan elemen tertentu:

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

kembali:

1

Penghitungan indeks dimulai dari 0, jadi indeks elemen pertama adalah 0.

Dániel Kis
sumber
4

Perbedaan utamanya adalah parameter dari fungsi-fungsi ini:

-> 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
ashishdudhat
sumber
4

Anda juga bisa menggunakan includes:

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

tapi saya lebih suka indexOfmetode:

var vals = [ "foo", "bar", 42, "baz" ];
if (~vals.indexOf( 42 )) {
  // found it!
}
zloctb
sumber
1
juga termasuk mensyaratkan polyfill untuk IE
MJB
indexOfjauh lebih cepat juga.
eozzy
4

Perbedaan lainnya adalah dengan findIndex () pengguna dapat menerapkan beberapa fungsi dan menemukan elemen dalam larik yang lolos pengujian.

Tetapi hal yang sama tidak berlaku dengan operator indexOf () . Seorang pengguna dapat memeriksa apakah elemen tertentu ada dalam array atau tidak.

Alok Ranjan
sumber
4

Sederhana - Jenis struktur array apa yang Anda gunakan?

  • Jika larik objek findIndex(),;
  • Lain indexOf(),.

"Saya ingin mencari indeks dalam array objek , dengan kunci" Oranye ".

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.

"Saya ingin mencari indeks dalam array sederhana ".

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

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

Anda dapat mencoba kode di bawah ini: -

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)
Gulsan Borbhuiya
sumber
Saya rasa kode ini tidak memerlukan penjelasan apapun karena kode ini terlihat sangat sederhana & mudah dipahami oleh seorang 'pemula'. Juga, orang yang masih pemula menghadapi kesulitan untuk memahami kode yang kompleks jadi saya membuatnya sederhana. Jadi tolong jangan mengatakannya dengan kualitas rendah tanpa memahami niat saya.
Gulsan Borbhuiya
Saya tidak menemukan sesuatu yang berkualitas rendah yang ditandai oleh sistem.
Gulsan Borbhuiya