Dalam JavasScript, ada banyak cara yang berguna untuk menemukan item di Larik (Array). Anda selalu dapat kembali menggunakan perulangan for dasar, tetapi dengan ES6+, ada banyak metode untuk mengulang data larik dan menemukan apa yang Anda perlukan dengan mudah.
Dengan begitu banyak metode berbeda, manakah yang Anda gunakan dan dalam kasus apa? Misalnya, saat mencari di dalam larik, apakah Anda ingin tahu jika elemennya ada di dalam larik? Apakah Anda memerlukan indeks dari elemen atau elemennya itu sendiri?
Dengan setiap metode berbeda yang akan kita bahas, penting untuk memahami bahwa semua itu adalah metode bawaan pada Array.prototype. Itu berarti Anda hanya perlu menambatkannya ke larik apa pun dengan notasi titik. Itu juga berarti metode ini tidak tersedia pada objek atau hal lainnya selain Larik (meskipun ada tumpang tindih dengan String).
Kita akan membahas metode-metode Larik berikut:
includes
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
alligator.includes("thick scales"); // returns true
Metode .includes() menghasilkan nilai boolean dan sempurna untuk memberi tahu Anda jika suatu elemen ada di dalam larik atau tidak. Ini memberikan jawaban true atau false yang sederhana. Ini adalah sintaks dasarnya:
arr.includes(valueToFind, [fromIndex]);
Kini, seperti yang Anda lihat dalam contoh, kita hanya memiliki satu parameter – valueToFind. Ini adalah nilai untuk dicocokkan dalam larik. fromIndex opsional adalah angka, yang mengindikasikan dari indeks apa Anda ingin untuk memulai pencarian (asali adalah 0, yang berarti keseluruhan larik akan dicari). Jadi, karena dalam contoh kita item ‘thick scales’ berada di indeks 0, yang berikut ini akan menjadi salah: alligator.includes('thick scales', 1); karena pencarian dimulai dari indeks 1 dan seterusnya.
Sekarang, ada beberapa hal penting yang harus diperhatikan. Metode .includes() ini menggunakan perbandingan yang ketat. Itu berarti, dari contoh di atas, yang berikut ini akan menghasilkan false: alligator.includes('80'); Itu karena meskipun 80 == '80' adalah benar, 80 === '80' adalah salah – jenis berbeda tidak akan berhasil melewati perbandingan yang ketat.
find
Bagaimana .find() berbeda dari metode includes()? Jika dalam contoh kita hanya mengubah teks “includes” menjadi “find”, kita akan mendapat pesan kesalahan ini:
Uncaught TypeError: thick scales is not a function
Itu karena metode pencarian ini membutuhkan fungsi yang harus dimasukkan. Itu karena metode pencarian tidak hanya akan menggunakan operator perbandingan sederhana seperti yang dilakukan “includes()”. Alih-alih, ini akan memasukkan setiap elemen ke dalam fungsi dan melihat apakah itu menghasilkan true atau false. Jadi, meskipun ini berfungsi: alligator.find(() => 'thick scales');, Anda mungkin ingin menempatkan operator perbandingan Anda di dalam fungsi agar mendapatkan hasil yang relevan.
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
alligator.find(el => el.length < 12); // returns '4 foot tail'
Fungsi sederhana dalam metode pencarian kita ini mencari setiap elemen dari larik, dengan alias dari ‘el’ yang kita berikan, dan berhenti ketika menemukan elemen pertama yang benar. Dalam kasus kita, true (benar) berarti memiliki properti panjang kurang dari 12 (angka tidak memiliki properti panjang). Anda tentu dapat membuat fungsi ini serumit mungkin sesuai keperluan, yang membuat kondisi benar memenuhi kebutuhan Anda.
Perhatikan juga, ini tidak menghasilkan true. Metode pencarian tidak menghasilkan boolean, tetapi menghasilkan elemen yang cocok pertama. Jika tidak ada elemen yang cocok – yang berarti tidak ada elemen yang memenuhi kriteria yang didefinisikan dalam fungsi – maka hasilnya adalah undefined.. Juga perhatikan bahwa yang dihasilkan adalah elemen yang pertama, jadi jika ada lebih dari satu elemen di dalam larik yang memenuhi kriteria, metode ini hanya akan mengambil instans pertama. Dalam contoh kita, jika ada string lainnya dengan panjang kurang dari 12 setelah ‘4 feet tall’, ini tidak akan mengubah hasil kita.
Dalam contoh ini, kita hanya menggunakan pemanggilan kembali dengan satu parameter. Anda juga dapat menambahkan parameter untuk merujuk ke indeks elemen saat ini. Parameter lain dapat menjadi keseluruhan larik itu sendiri, tetapi saya menemukan hal ini jarang digunakan. Berikut adalah contoh penggunaan indeks:
alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'
Kita tahu dalam larik kita ada 3 elemen berbeda yang memenuhi kondisi pertama (typeof el === ‘string’). Jika ini adalah satu-satunya kondisi kita, hasil yang muncul adalah yang pertama, ‘thick scales’. Namun, perbedaannya adalah hanya satu yang memiliki indeks 2 dan itu adalah ‘4 foot tall’.
Berbicara tentang indeks, metode larik yang mirip adalah .findIndex(). Metode ini juga menerima fungsi, tetapi seperti yang Anda duga, metode ini menghasilkan indeks elemen alih-alih elemen itu sendiri.
indexOf
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
alligator.indexOf("rounded snout"); // returns 3
Seperti metode .includes(), .indexOf() menggunakan perbandingan ketat, bukan fungsi seperti yang kita lihat pada metode .find(). Namun, tidak seperti includes(), metode ini menghasilkan indeks dari elemen, alih-alih boolean. Anda juga dapat mengindikasikan pencarian akan dimulai di indeks yang berada dalam larik.
Saya merasa indexOf() sangat berguna. Ini cepat dan mudah, dapat memberi tahu Anda lokasi elemen di dalam larik, dan dapat memberi tahu Anda jika elemen ada di dalam larik. Bagaimana metode ini memberi tahu Anda ketika elemen itu ada? Pada dasarnya, kita dapat mengetahui bahwa elemen ada jika hasil yang diberikan adalah angka positif, dan jika hasilnya adalah -1, kita tahu bahwa elemen itu tidak ada.
alligator.indexOf("soft and fluffy"); // returns -1
alligator.indexOf(80); // returns 1
alligator.indexOf(80, 2); // returns -1
Seperti yang Anda dapat lihat, meskipun kita dapat menemukan metode find() atau findIndex() untuk memberikan informasi yang sama, metode ini memerlukan penulisan yang jauh lebih sedikit. Kita tidak perlu menulis fungsi untuk perbandingan, karena itu sudah ada dalam metode indexOf.
Sekarang, seperti yang lain, indexOf() juga mengembalikan indeks dari elemen cocok pertama yang ditemukan. JavaScript memberi kita metode larik alternatif .lastIndexOf(). Seperti yang Anda tebak, ini melakukan hal yang sama seperti indexOf() tetapi dimulai dari indeks larik terakhir dan bekerja ke arah belakang. Anda juga dapat menentukan parameter kedua, tetapi ingat bahwa indeks tidak berubah hanya karena Anda menggunakan metode yang berbeda.
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
alligator.indexOf(80); // returns 1
alligator.lastIndexOf(80); // returns 4
alligator.indexOf(80, 2); // returns 4
alligator.lastIndexOf(80, 4); // returns 4
alligator.lastIndexOf(80, 3); // returns 1
Bonus: filter
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
alligator.filter(el => el === 80); //returns [80, 80]
Metode filter() mirip seperti metode find(), dalam hal mengharuskan fungsi dimasukkan dan kondisi yang dihasilkan. Perbedaan utamanya adalah, filter() selalu menghasilkan suatu larik, bahkan jika hanya ada satu elemen yang cocok. Namun, metode ini akan menghasilkan semua elemen yang cocok, sedangkan find() hanya mengembalikan yang cocok.
Hal penting tentang filter adalah metode ini menghasilkan semua elemen yang cocok dengan kriteria Anda. Mungkin ini pendapat saya saja, tetapi saya dapat bingung, memikirkan “ini adalah elemen yang saya inginkan untuk filter out”, padahal sebenarnya Anda mengindikasikan elemen yang Anda inginkan untuk filter in.
Kesimpulan
Menurut saya, metode termudah untuk digunakan ketika mencari sesuatu adalah metode find(), tetapi seperti yang Anda lihat bahwa ini tergantung kasus Anda.
- Apakah Anda hanya perlu mengetahui jika elemennya ada? Gunakan
.includes(). - Apakah Anda perlu mendapatkan elemen itu sendiri? Gunakan
.find(), atau.filter()untuk beberapa item. - Apakah Anda perlu mencari indeks dari elemen? Gunakan
.indexof()ataufindIndex()untuk pencarian yang lebih kompleks.
Larik dalam contoh di sini sangatlah sederhana. Anda mungkin menemukan larik dari banyak objek. Berikut adalah beberapa contoh sederhana di bawah ini untuk bernavigasi di hutan dari begitu banyak objek yang disangkarkan:
const jungle = [
{ name: "frog", threat: 0 },
{ name: "monkey", threat: 5 },
{ name: "gorilla", threat: 8 },
{ name: "lion", threat: 10 }
];
// break the object down in order to use .includes() or .indexOf()
const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion']
console.log(names.includes("gorilla")); // returns true
console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done
// methods we can do on the array of objects
console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5}
console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}]