Tutorial

Empat Metode untuk Mencari di Dalam Larik di JavaScript

Published on January 5, 2021
author

Stephen Hartfield

Bahasa Indonesia
Empat Metode untuk Mencari di Dalam Larik di JavaScript

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() atau findIndex() 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}]

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Stephen Hartfield

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more