JavaScript Array Temukan: Cara Menemukan Elemen Dalam JavaScript – Codewithaden

Fungsi array find () dalam JavaScript mengembalikan nilai elemen pertama dalam array yang melewati uji fungsi yang disediakan. Mari kita menyelami metode array find ().

JavaScript Array Temukan

JavaScript Array Find () adalah bawaan fungsi Digunakan untuk mendapatkan nilai elemen pertama dalam array yang memenuhi kondisi yang disediakan. Fungsi Find () menerima a fungsi, Nilai ini, elemen, indeks, dan Himpunan dan Periksa semua elemen array, dan mana pun yang memenuhi elemen pertama, kondisi akan dicetak.

Jika lebih dari satu item memenuhi kondisi tersebut, item pertama yang memenuhi persyaratan dikembalikan.

Jika Anda memerlukan indeks item yang ditemukan di array, gunakan findIndex () .

Jika Anda perlu menemukan indeks nilai, gunakan array Array.prototype.indexof () . Jika Anda perlu menemukan jika nilainya ada dalam array, gunakan Array.prototype.includes ()

Misalkan Anda ingin menemukan nomor ganjil pertama dalam array. Fungsi argumen memeriksa apakah suatu argumen yang diteruskan ke sana adalah angka ganjil atau tidak.

Itu Temukan() Fungsi memanggil fungsi argumen untuk setiap item array. Angka ganjil pertama yang fungsi argumennya dapat kembali dilaporkan sebagai jawaban oleh Temukan() fungsi.

Sintaksis

Sintaks dari metode array find () adalah sebagai berikut.

array.find(function(element, index, array),thisValue) 

Parameter

Fungsi mengambil tiga argumen berikut:

elemen:

Ini adalah item saat ini yang diproses oleh fungsi.

indeks

Ini adalah indeks item saat ini yang diproses oleh fungsi.

Himpunan:

Ini adalah array di mana Himpunan Saring() fungsi dipanggil.

Argumen lain adalah Nilai ini. Ini memberi tahu fungsi untuk menggunakan nilai array saat menjalankan fungsi argumen.

Contoh

Kami akan menggunakan Node.js Dalam contoh ini untuk menjalankan kode JavaScript.

Jadi mari kita buat file yang disebut app.js dan tambahkan kode berikut.

// app.js

var data = [20, 18, 15, 10, 9];

var found = data.find(function(element) {
  return element < 12;
});

console.log(found); 

Jadi, kami telah menulis satu syarat. Jika ada item array yang memenuhi kondisi ini, itu akan mengembalikan nilai Elemen itu, dan pemeriksaan lebih lanjut dari elemen di dalam array akan dihentikan.

Di sini, keduanya nilainya 10 dan 9 kurang dari 12, Tapi tetap saja, kami mendapat 10 karena 10 nilai item pertama di dalam Himpunan .

Jadi hanya 10 yang akan kembali dan bukan 9. Jika elemen kondisi yang memuaskan ditemukan di dalam array, itu akan segera kembali, dan tidak diperlukan pemeriksaan lebih lanjut.

➜  es git:(master) ✗ node app
10
➜  es git:(master) ✗
 

ES6 Array Find ()

Kita dapat menulis fungsi di atas dalam standar ES6, seperti yang berikut ini.

// app.js

const data = [20, 18, 15, 10, 9];

let found = data.find(element => element < 12);

console.log(found); 

Jawabannya akan sama dengan yang sebelumnya, tetapi itu adalah sintaksis yang jauh lebih ringan.

Sekarang mari kita ambil skenario di mana tidak terdefinisi ditemukan.

// app.js

const data = [20, 18, 15, 10, 9];

let found = data.find(element => element < 9);

console.log(found); 

Dalam contoh di atas, semua elemen lebih besar dari 9; outputnya akan tidak terdefinisi.

Fungsi murni

JavaScript Array Find Method adalah a fungsi murni karena tidak bermutasi array yang disebutnya. Sebaliknya, ia akan mengembalikan nilai yang memenuhi kondisinya.

Menemukan elemen dalam array menggunakan find ()

Sekarang, tulis kode berikut.

// app.js

const fruits = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const getFruit = fruits.find(fruit => fruit.name === 'apples');

console.log(getFruit); 

Di sini, hanya satu objek yang akan dikembalikan jika kondisinya berhasil.

  es git:(master) ✗ node app
{ name: 'apples', quantity: 2 }
➜  es git:(master) ✗
 

Jadi, setiap kali kita memiliki skenario di mana kita perlu mendapatkan nilai elemen pertama dalam array yang memenuhi fungsi pengujian yang disediakan, kita dapat menggunakan metode array.find () dalam JavaScript.

Array javascript s Earch

Untuk mencari elemen dalam array di JavaScript, gunakan metode array find (). Metode temukan () memeriksa apakah array berisi elemen atau tidak. Mari kita ambil contoh apakah orang tersebut dewasa. Jika kita menemukan nilai pertama dari array, yang memenuhi kriteria, itu akan mengembalikannya.

Kami sedang mencari item dalam array menggunakan fungsi JavaScript Find ().

// app.js
let ages = [6, 18, 19, 21];

let checkAdult = age => {
  return age >= 18;
}

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

Dalam kode di atas, jika elemen array pertama ditemukan lebih besar dari atau sama dengan 18, ia akan kembali dalam output. Sekarang, lihat outputnya.

➜  es git:(master) ✗ node app
18
➜  es git:(master) ✗
 

Menemukan elemen dalam array JavaScript

Untuk menemukan apakah array berisi elemen dalam array JavaScript, gunakan metode array include (). JavaScript termasuk () adalah bawaan Himpunan fungsi Itu menentukan apakah array berisi elemen yang ditentukan. Itu kembali BENAR Jika terdiri dari suatu elemen, sebaliknya Salah, tanpa memasukkan elemen dalam array.

Pada ecmascript 2018, kita dapat menggunakan javascript termasuk () fungsi.

Jika Anda ingin mendukung IE atau browser lama lainnya, coba kode berikut.

// app.js
 function include(arr,obj) {
    return (arr.indexOf(obj) != -1);
}
 

Dalam kode di atas, kami telah menggunakan JavaScript Indeks metode. Jadi, ini adalah cara mencari nilai dalam array di JavaScript.

Menemukan objek dalam array JavaScript

Untuk menemukan objek dalam array JavaScript, gunakan metode array.find (). Metode temukan () mencari objek yang disediakan di dalam array, dan jika metode menemukannya, ia mengembalikan objek.

Saya memiliki berbagai objek yang tidak dikenal, yang berisi serangkaian bernama objek , dan kita perlu mendapatkan objek di mana "nama" adalah "beberapa rangkaian . ” Lihat contoh pemrograman berikut.

// app.js
 search = (key, inputArray) => {
  for (let i=0; i < inputArray.length; i++) {
      if (inputArray[i].name === key) {
          return inputArray[i];
      }
  }
}

let arr = [
  { name:"Krunal", value:"Engineer", other: "Author" },
  { name:"Ankit", value:"MCA", other: "Author" }
];

let resultObject = search("Krunal", arr);
console.log(resultObject);
 

Oke, jadi dalam kode di atas, pertama, kami memiliki fungsi yang ditentukan pengguna yang disebut fungsi pencarian, yang menerima dua argumen. Salah satunya adalah kunci objek input, dan yang lainnya adalah array input.

Ini mengulangi inputArray dan membandingkan kunci dengan properti nama array. Jika cocok, maka ia mengembalikan seluruh objek. Lihat output di bawah ini.

Javascript

Kami juga dapat menggunakan fungsi temukan () untuk mendapatkan nilai yang sama. Lihat kode berikut.

// app.js
 let arr = [
  { name:"Krunal", value:"Engineer", other: "Author" },
  { name:"Ankit", value:"MCA", other: "Author" }
];

let obj = arr.find(data => data.name === 'Krunal');

console.log(obj);
 

Ini akan memberi kita output yang sama, tetapi dalam gaya ES6 fungsi panah

Menemukan string di JavaScript

Untuk menemukan string di JavaScript, gunakan metode String Search (). JavaScript Search () Metode mencari a rangkaian untuk nilai yang ditentukan dan mengembalikan posisi pertandingan. Itu Cari Nilai bisa menjadi a rangkaian atau ekspresi reguler. Metode ini kembali -1 jika tidak ada kecocokan ditemukan.

Menemukan bilangan prima di array

Contoh berikut menemukan elemen dalam array yang merupakan bilangan prima (atau kembali tidak terdefinisi Jika tidak ada bilangan prima):

// app.js

const isPrime = (element, index, array) => {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) { return false; } } return element > 1;
}

console.log([4, 6, 8, 11].find(isPrime));
console.log([9, 1, 21, 13].find(isPrime));
 

Lihat outputnya.

➜  es git:(master) ✗ node app
11
13
➜  es git:(master) ✗
 

Menggunakan fungsi panah ES6 dan merusak

Kita bisa menggunakan Fungsi Panah ES6 dan Objek Menghancurkan Dalam JavaScript dengan fungsi JavaScript Find (). Kode ini terlihat lebih jelas, lebih sedikit kereta, dan mudah dimengerti. Lihat kode berikut.

// app.js

const fav = [
  { actress: 'Millie Bobby Brown', age: 16 },
  { actress: 'Kiernan Shipka', age: 19 },
  { actress: 'Emma Watson', age: 29 }
];

const result = fav.find(({ actress }) => actress === 'Millie Bobby Brown');

console.log(result)
 

Keluaran

node app
{ actress: 'Millie Bobby Brown', age: 16 }
 

Jika aktris itu Millie Bobby Brown dalam kode di atas, itu akan memberi kita objek itu dengan dua properti; Kalau tidak, itu akan memberi kita tidak terdefinisi.

Polyfill

Metode JS Array Find () telah ditambahkan ke spesifikasi ECMascript 2015 dan mungkin tidak tersedia dalam semua implementasi JavaScript. Namun, Anda dapat menggunakan array Polyfill.prototype.find () cuplikan berikut.

if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function (predicate) {
      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    },
    configurable: true,
    writable: true
  });
} 

Jika Anda ingin mendukung mesin JavaScript usang yang tidak mendukung Object.defineproperty , sebaiknya tidak polyfill array.prototype, karena Anda tidak dapat membuatnya tidak dapat ditingkatkan.

Dukungan Browser

FITURDukungan Dasar
Chrome45
TepianYa
Firefox25
Internet ExplorerTidak
Opera32
Safari
Android WebviewYa
Chrome untuk AndroidYa
Edge MobileYa
Firefox untuk Android
Opera AndroidYa
ios safari

Kesimpulan

  1. Tes harus disediakan sebagai fungsinya.
  2. Metode find () mengeksekusi a fungsi panggilan balik satu kali untuk setiap elemen dalam array sampai menemukan nilai yang mengembalikan true.
  3. Jika tidak ada yang lulus tes, maka tidak terdefinisi dikembalikan.
  4. Find () tidak bermutasi atau mengubah array asli. Jadi ini adalah fungsi murni.
  5. Setiap kali kita perlu mendapatkan nilai elemen pertama dalam array yang memenuhi fungsi pengujian yang disediakan, kita menggunakan metode array.find () dalam JavaScript.

Posting yang disarankan

JavaScript array isArray ()

JavaScript array tostring ()

JavaScript Array Reverse ()

Nilai array javascript ()

JavaScript Array Termasuk ()

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *