One place for hosting & domains

      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}]
      



      Source link

      Memahami Cara Render Larik di React


      Pengantar

      Artikel ini akan mengajari Anda cara merender larik di React dan praktik terbaik yang digunakan saat merender elemen berbeda di dalam komponen.

      Salah satu keuntungan menggunakan bahasa web modern seperti JavaScript adalah Anda dapat mengotomatiskan pembuatan potongan HTML.

      Dengan menggunakan sesuatu seperti loop terhadap larik atau objek, berarti Anda hanya perlu menulis HTML per item satu kali. Apa lagi, semua editan berikutnya hanya perlu diterapkan sekali.

      Merender Beberapa Elemen Sekaligus

      Untuk merender beberapa elemen JSX sekaligus di React, Anda dapat memproses sebuah larik dengan metode .map() dan mengembalikan elemen tunggal.

      Di bawah ini, Anda memproses larik reptiles dan mengembalikan elemen li untuk setiap item di larik. Anda dapat menggunakan metode ini bila ingin menampilkan elemen tunggal untuk setiap item di larik:

      function ReptileListItems() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return reptiles.map((reptile) => <li>{reptile}</li>);
      }
      

      Keluarannya akan terlihat seperti ini:

      Output

      - alligator - snake - lizard

      Dalam contoh selanjutnya, Anda akan memeriksa alasan perlunya menambahkan key unik ke daftar elemen yang dirender oleh larik.

      Merender Kumpulan Elemen di Dalam Komponen

      Dalam contoh ini, Anda memproses larik dan membuat serangkaian komponen item daftar seperti contoh sebelumnya.

      Untuk memulai, perbarui kode agar menggunakan komponen <ol> untuk menyimpan item <li>. Komponen <ol> akan membuat daftar item yang telah diurutkan:

      function ReptileList() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return (
          <ol>
            {reptiles.map((reptile) => (
              <li>{reptile}</li>
            ))}
          </ol>
        );
      }
      

      Namun, jika mengamati konsol, Anda akan melihat peringatan bahwa setiap anak di suatu larik atau iterator harus memiliki kunci unik.

      Peringatan di konsol

      Peringatan tersebut muncul karena saat Anda mencoba merender suatu kumpulan di dalam komponen, Anda harus menambahkan sebuah key.

      Dalam React, key unik digunakan untuk menentukan komponen dalam suatu kumpulan yang harus dirender kembali. Menambahkan key unik akan mencegah React dari keharusan merender kembali keseluruhan komponen setiap kali ada pembaruan.

      Dalam langkah ini, Anda akan merender beberapa elemen sekaligus dalam komponen dan menambahkan key unik. Perbarui kode untuk menyertakan key di item daftar untuk menyelesaikan peringatan:

      function ReptileList() {
        const reptiles = ['alligator', 'snake', 'lizard'];
      
        return (
          <ol>
            {reptiles.map(reptile => (
              <li key={reptile}>{reptile}</li>
            ))}
          </ol>
        );
      }
      
      

      Karena Anda telah menambahkan key, peringatan tersebut tidak akan ada lagi di konsol.

      Dalam contoh selanjutnya, Anda akan melihat cara merender elemen yang berdekatan tanpa mengalami kesalahan sintaks umum.

      Merender Elemen yang Berdekatan

      Di JSX, untuk merender lebih dari satu elemen dalam suatu komponen, Anda harus menambahkan pembungkus di sekelilingnya.

      Dalam contoh ini, Anda pertama-tama akan mengembalikan daftar item tanpa memproses suatu larik:

      function ReptileListItems() {
        return (
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        );
      }
      

      Ini akan memberi Anda pesan kesalahan keras di konsol:

      Kesalahan keras dari React untuk elemen JSX yang Berdekatan

      Untuk memperbaiki kesalahan ini, Anda perlu membungkus blok elemen li dalam pembungkus. Untuk daftar yang dapat Anda gunakan membungkus elemen ol atau ul:

      function ReptileListItems() {
        return (
        <ol>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        </ol>
        );
      }
      

      Elemen <li> yang berdekatan kini dibungkus dalam tag pengurung <ol>, dan Anda tidak akan lagi melihat kesalahan.

      Di bagian selanjutnya, Anda akan merender daftar dalam pembungkus menggunakan komponen fragment.

      Merender Elemen yang Berdekatan dengan React.fragment

      Sebelum React v16.2, Anda dapat membungkus blok komponen dalam elemen <div>. Ini akan menghasilkan aplikasi yang penuh dengan divs, yang seringkali disebut “div soup”.

      Untuk memperbaiki masalah ini, React merilis komponen baru yang dikenal sebagai komponen fragment:

      Bila perlu merender daftar di dalam tag pengurung tetapi ingin menghindari keharusan menggunakan div, Anda dapat menggunakan React.Fragment sebagai gantinya:

      function ReptileListItems() {
        return (
        <React.Fragment>
           <li>alligator</li>
           <li>snake</li>
           <li>lizard</li>
        </React.Fragment>
        );
      }
      

      Kode yang dirender hanya akan menyertakan elemen li dan komponen React.Fragment tidak akan muncul dalam kode.

      Elemen JSX yang dirender di dalam pembungkus React.Fragment

      Juga, perhatikan bahwa dengan React.fragment kita tidak perlu menambahkan kunci.

      Anda mungkin merasa bahwa menulis React.fragment lebih membosankan daripada menambahkan <div>. Untungnya, tim React telah mengembangkan sintaks yang lebih pendek untuk mewakili komponen ini. Anda dapat menggunakan <> </> sebagai ganti <React.Fragment></React.Fragment>:

      function ReptileListItems() {
        return (
       <>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
       </>
        );
      }
      

      Kesimpulan

      Dalam artikel ini, Anda telah mendalami berbagai contoh cara merender larik dalam aplikasi React.

      Bila merender elemen di dalam komponen lain, Anda harus menggunakan key unik dan membungkus elemen di dalam elemen pembungkus.

      Tergantung kasus penggunaan, Anda dapat membuat daftar sederhana yang dibungkus dalam komponen fragment yang tidak membutuhkan kunci.

      Untuk mempelajari selengkapnya tentang praktik terbaik di React, ikuti seri lengkap Cara Menulis Kode di React.js di DigitalOcean.



      Source link

      Metode filter() Larik di JavaScript


      Pengantar

      Metode larik filter() membuat larik baru bersama elemen yang termasuk dalam kriteria yang ditentukan dari larik yang ada:

      var numbers = [1, 3, 6, 8, 11];
      
      var lucky = numbers.filter(function(number) {
        return number > 7;
      });
      
      // [ 8, 11 ]
      

      Contoh di atas mengambil larik numbers dan mengembalikan larik terfilter yang baru bersama nilai-nilai yang lebih besar dari tujuh saja.

      Sintaks filter

      var newArray = array.filter(function(item) {
        return condition;
      });
      

      Argumen item adalah referensi ke elemen saat ini di larik karena filter() memeriksanya terhadap condition. Ini berguna untuk mengakses properti, dalam hal objek.

      Jika item saat ini menyalurkan syarat, ia akan dikirim ke larik baru.

      Menyaring larik objek

      Kasus penggunaan umum .filter() adalah bersama larik objek melalui propertinya:

      var heroes = [
          {name: “Batman”, franchise: “DC”},
          {name: “Ironman”, franchise: “Marvel”},
          {name: “Thor”, franchise: “Marvel”},
          {name: “Superman”, franchise: “DC”}
      ];
      
      var marvelHeroes =  heroes.filter(function(hero) {
          return hero.franchise == “Marvel”;
      });
      
      // [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]
      

      Sumber Daya Tambahan

      Untuk detail selengkapnya tentang filter() lihat Referensi MDN.

      Filter hanya salah satu dari beberapa metode iterasi terhadap Larik di JavaScript, bacalah Cara Menggunakan Metode Iterasi Larik di JavaScript untuk mempelajari tentang metode lain seperti map() dan reduce().



      Source link