Perbezaan antara fungsi indexOf dan findIndex

JavaScript ialah bahasa pengaturcaraan dinamik yang boleh digunakan pada kedua-dua sisi klien dan pelayan. JavaScript digunakan untuk membuat halaman web interaktif. Ia mempunyai banyak rangka kerja seperti React JS, Angular JS, Node JS, dll. JavaScript menyediakan beberapa kaedah untuk mendapatkan indeks elemen tertentu. indexOf dan findIndex ialah kaedah ini.

fungsi indeks dalam JavaScript

Fungsi indexOf dalam JavaScript membolehkan kami mencari elemen dalam tatasusunan dan mengembalikan indeks pertama ditemui dalam tatasusunan itu. Jika elemen tidak dijumpai, -1 dikembalikan. Sintaks kaedah ini adalah seperti berikut:

array.indexOf(element, index)

Di sini, tatasusunan ialah senarai elemen untuk melaksanakan kaedah indexOf. Elemen mewakili elemen yang hendak dicari, dan indeks ialah kedudukan permulaan elemen yang hendak dicari.

Contoh

Mari kita pertimbangkan pelbagai nama bulan. Kami akan menggunakan kaedah indexOf untuk mencari indeks bulan "Mar"

const months = ['Jan', 'Feb', 'Mar', 'April', 'May']
console.log (months.indexOf('Mar'))

Output

2

Indeks output yang diberikan ialah "2". Jika elemen carian tidak wujud dalam tatasusunan, "-1" dikembalikan sebagai output.

Console.log (months.indexOf('Aug'))

Memandangkan elemen tidak wujud dalam tatasusunan bulan, fungsi indexOf mengembalikan "-1".

fungsi findIndex JavaScript

Fungsi array.findIndex() JavaScript digunakan untuk mengembalikan indeks elemen pertama yang terdapat dalam tatasusunan apabila syarat yang dinyatakan dalam fungsi dipenuhi. Elemen ini diluluskan oleh pengguna semasa panggilan fungsi. Jika elemen tidak wujud dalam tatasusunan, -1 dikembalikan.

findIndex adalah seperti berikut:

arr.findIndex (func(element, index, arr), thisArg)

Di sini, "arr" mewakili tatasusunan yang mana fungsi findIndex sedang dilaksanakan.

findIndex mempunyai parameter berikut:

• func - Ini ialah fungsi panggil balik yang menentukan syarat. Ia mengambil parameter berikut:

  • o elemen - ia ialah elemen semasa dalam tatasusunan

  • o indeks - indeks unsur semasa, pilihan

  • o arr - Menunjukkan bahawa tatasusunan di mana kaedah ini dilaksanakan juga adalah pilihan

• thisArg - Ini adalah nilai pilihan

Kaedah findIndex boleh digunakan dalam dua cara iaitu menggunakan kata kunci "return" dan menggunakan fungsi "inline". Di sini, apabila kita menghantar satu fungsi ke fungsi lain, ia dipanggil "fungsi panggil balik".

Gunakan kata kunci "kembali"

Andaikan kita ada set warna seperti merah, hijau, biru, kuning, oren. Kami mahu indeks kuning.

Contoh

const colors = ['red', 'green', 'blue', 'yellow', 'orange']

function is_yellow (element) {
   return element === 'yellow'
}
result = colors.findIndex(is_yellow)
console.log ("The index of 'yellow' is: " + result)                        

Output

Ia akan menghasilkan output berikut:

The index of 'yellow' is: 3

Di sini, kita mendapat output "3" kerana elemen "kuning" muncul pada kedudukan indeks "3".

Gunakan fungsi sebaris

Program yang sama yang dinyatakan di atas juga boleh ditulis seperti berikut:

Contoh

let colors = ['red', 'green', 'blue', 'yellow', 'orange']

let index = colors.findIndex(color => color === 'blue')
console.log("The index of color 'blue' is: " + index)

Output

Ia akan menghasilkan output berikut:

The index of color 'blue' is: 2

Kami mendapat output "2" kerana elemen "biru" muncul pada kedudukan kedua dalam tatasusunan yang diberikan.

Perbezaan antara fungsi indexOf dan findIndex

Terdapat dua perbezaan utama antara kaedah indexOf dan findIndex:

Perbezaan pertama

"Kaedah indexOf mengambil elemen sebagai parameter; manakala dalam kaedah findIndex, fungsi panggil balik diluluskan sebagai parameter

Contoh

Contoh di bawah menerangkan perkara ini:

const fruits = ['apple', 'banana', 'mango', 'grapes']

console.log("The index of 'banana' is: " + fruits.indexOf('banana'))
console.log ("Index: " + fruits.findIndex(index => index === 'banana'))

Output

Ia akan menghasilkan output berikut:

The index of 'banana' is: 1
Index: 1

Dalam kedua-dua kes, output diberikan sebagai "1" kerana elemen "pisang" muncul pada indeks pertama. Dalam kaedah indexOf, elemen yang ingin kita cari diluluskan sebagai parameter dan fungsi membandingkan setiap elemen tatasusunan dan mengembalikan kedudukan pertama di mana unsur itu ditemui.

Dalam findIndex, kaedah ini menghantar setiap elemen dalam tatasusunan ke fungsi yang akan menyemak tatasusunan untuk elemen yang ditentukan. Jika elemen ditemui, nilai Boolean dikembalikan, iaitu "Benar", dan kaedah findIndex mengembalikan indeks khusus tersebut.

Dalam kedua-dua kes, jika nilai atau elemen tidak wujud dalam tatasusunan, kedua-dua kaedah mengembalikan "-1" sebagai output.

Perbezaan kedua

kaedah indexOf bagus untuk mendapatkan indeks elemen mudah. Walau bagaimanapun, kaedah ini tidak berfungsi dengan betul apabila kita mencari indeks sesuatu yang lebih kompleks, seperti objek. Ini kerana "kesamaan rujukan".

Mengikut kesamaan rujukan, perbandingan akan kembali benar hanya jika kedua-dua objek yang dibandingkan merujuk kepada objek yang sama. Dalam JavaScript, dua objek yang sama tidak sama melainkan ia merujuk kepada objek yang sama.

Contoh

Mari kita memahami perkara ini melalui contoh berikut:

const obj = {banana:3}
const array = [{mango:7}, obj, {orange:5}]

console.log ("Index: " + array.indexOf({banana:3}))  
console.log ("Index: " + array.findIndex(index => index.banana === 3))
console.log ("Index: " + array.indexOf(obj))

Output

Ia akan menghasilkan output berikut:

Index: -1
Index: 1
Index: 1

Dalam fungsi indexOf pertama, walaupun objek adalah sama, ia tidak dapat mencarinya dalam tatasusunan yang diberikan, jadi ia mengembalikan "-1".

Dalam kaedah indexOf yang terakhir digunakan, apabila kita lulus rujukan sebenar, ia mengembalikan indeks objek. Kaedah findIndex menyemak semua pasangan kunci dan nilai dalam tatasusunan yang diberikan untuk mencari dan mengembalikan indeks yang betul untuk objek tertentu itu.

Kesimpulan

indexOf dan findIndex mengembalikan indeks pertama elemen yang ditentukan. Kaedah indexOf mengambil elemen yang indeksnya akan dikembalikan sebagai parameter, manakala kaedah findIndex mengambil fungsi sebagai parameter. Tetapi kedua-dua fungsi mengembalikan "-1" sebagai output.

Atas ialah kandungan terperinci Perbezaan antara fungsi indexOf dan findIndex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!