Dalam tutorial ini, pengguna akan belajar memfilter nilai dari array di TypeScript. Filter adalah operasi penting untuk memanipulasi data yang kita dapatkan dari database
Misalnya, semua orang pernah melihat filter di Amazon, Flipkart, dll. situs web untuk memfilter produk sesuai dengan kriteria yang berbeda. Untuk membuat sesuatu seperti itu, kita bisa mendapatkan data yang difilter dari database secara langsung, atau kita bisa mendapatkan seluruh data dan memfilter di sisi frontend dari rangkaian produk, dan itu tergantung pada beberapa kriteria seperti ukuran database, kinerja
Gunakan Larik. filter() Metode
Metode filter() dari array memungkinkan kita memfilter nilai yang berbeda dari array berdasarkan kondisi tunggal atau ganda tertentu. Dibutuhkan fungsi callback sebagai parameter. Pengguna dapat menjalankan kondisi tertentu dalam fungsi callback untuk setiap elemen array. Jika fungsi callback mengembalikan nilai true untuk elemen tertentu, metode filter() berisi elemen tersebut dalam array resultan
Sintaksis
Pengguna dapat mengikuti sintaks di bawah ini untuk menggunakan metode filter() untuk memfilter nilai dari array
let array: Array = [10, 20, 30, 54, 43, 32, 90, 80]; let result: Array = array.filter(callback_func(element, index, array) { // condition to filter values });Dalam sintaks di atas, kami telah membuat array dan memanggil metode filter dengan mengambil array sebagai referensi
Parameter
callback_func − Ini adalah fungsi yang berisi kondisi untuk memfilter nilai array. Kondisi fungsi callback mengembalikan nilai boolean berdasarkan apakah elemen saat ini cocok dengan kondisi tersebut
elemen − Ini adalah elemen dari array
indeks - Ini adalah indeks elemen
array − Ini adalah array saat ini di mana kita menerapkan metode filter()
Contoh 1
Dalam contoh di bawah ini, kami telah membuat array angka. Kami ingin memfilter semua nilai dari array yang habis dibagi 10. Dalam metode filter, kami meneruskan fungsi panah sebagai panggilan balik yang mengembalikan true jika elemen saat ini habis dibagi 10. Jika tidak, itu mengembalikan false
Array hasil akan berisi semua elemen yang kondisi fungsi panggilan baliknya benar yang dapat diamati pengguna dalam output
let array: Array = [10, 20, 30, 54, 43, 32, 90, 80]; // Filter the all values which are divisible by 10. let result: Array = array.filter( // arrow function as a callback function (element, index, array) => { // If element is divided by 10, return true else return false. if (element % 10 == 0) { return true; } return false; } ); console.log("All filtered values are " + result); _Saat dikompilasi, itu akan menghasilkan kode JavaScript berikut −
var array = [10, 20, 30, 54, 43, 32, 90, 80]; // Filter the all values which are divisible by 10. var result = array.filter( // arrow function as a callback function function (element, index, array) { // If element is divided by 10, return true else return false. if (element % 10 == 0) { return true; } return false; }); console.log("All filtered values are " + result);Keluaran
Kode di atas akan menghasilkan keluaran berikut -
All filtered values are 10,20,30,90,80Contoh 2
Pada contoh di bawah ini, kami telah membuat array objek yang berisi nama dan bahasa pemrograman sebagai anggotanya. Setelah itu, kami menggunakan metode filter untuk memfilter objek dari array, yang berisi "c++" sebagai bahasa pemrograman
Selanjutnya, kami melakukan iterasi melalui array 'CppTutors' untuk mencetak semua objek yang berisi bahasa sebagai "c++"
// Array of objects containing the name, and programming language let tutors: Array<{ name: string; language: string }> = []; // Push some records to the array tutors.push({ name: "Jems", language: "C++" }); tutors.push({ name: "Bond", language: "Python" }); tutors.push({ name: "Trump", language: "C++" }); tutors.push({ name: "Alice", language: "Java" }); tutors.push({ name: "Nerd", language: "C" }); // Filter all the CPP tutors. const Cpptutors = tutors.filter((tutor, index) => { return tutor.language == "C++"; }); // Printe the name of all CPP tutors. for (let tutor of Cpptutors) { console.log(tutor.name + " is a CPP tutor."); } _Saat dikompilasi, itu akan menghasilkan kode JavaScript berikut −
// Array of objects containing the name, and programming language var tutors = []; // Push some records to the array tutors.push({ name: "Jems", language: "C++" }); tutors.push({ name: "Bond", language: "Python" }); tutors.push({ name: "Trump", language: "C++" }); tutors.push({ name: "Alice", language: "Java" }); tutors.push({ name: "Nerd", language: "C" }); // Filter all the CPP tutors. var Cpptutors = tutors.filter(function (tutor, index) { return tutor.language == "C++"; }); // Printe the name of all CPP tutors. for (var _i = 0, Cpptutors_1 = Cpptutors; _i < Cpptutors_1.length; _i++) { var tutor = Cpptutors_1[_i]; console.log(tutor.name + " is a CPP tutor."); }Keluaran
Kode di atas akan menghasilkan keluaran berikut -
Jems is a CPP tutor. Trump is a CPP tutor. _Algoritma Kustom untuk Memfilter Nilai Array
Dalam metode ini, kami hanya akan mengulangi setiap elemen array. Untuk setiap elemen, kami akan memeriksa apakah elemen tersebut memenuhi kondisi pemfilteran, kami akan mendorongnya ke susunan filter
Sintaksis
Pengguna dapat mengikuti sintaks di bawah ini untuk menggunakan algoritme khusus untuk memfilter nilai array
// Iterate through every element of the array. for (let i = 0; i < array.length; i++) { // condition to filter values. if () { // if the condition meets, push the element to filteredValues array. filteredValues.push(array[i]); } }Algoritma
Pengguna dapat mengikuti algoritma di bawah ini untuk sintaks di atas
LANGKAH 1 - Buat array untuk menyimpan nilai yang difilter
LANGKAH 2 - Gunakan for loop untuk beralih melalui setiap elemen array
LANGKAH 3 - Jika kondisi pemfilteran memenuhi elemen, dorong ke array filter
LANGKAH 4 - Array yang difilter berisi setiap nilai yang memenuhi kondisi pemfilteran
Contoh
Pada contoh di bawah ini, kami telah membuat array usia. Sederhananya, kami telah menerapkan algoritme di atas untuk memfilter semua usia di atas 18 tahun
// Array of ages let ages: Array = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32]; // array to store all ages above 18 let above18: Array = []; // Iterate through ages and filter all ages above 18. for (let i = 0; i < ages.length; i++) { if (ages[i] > 18) { // push all ages, which are above 18 to above18 array. above18.push(ages[i]); } } // Print all ages above 18. console.log("All ages above 18."); console.log(above18); _Saat dikompilasi, itu akan menghasilkan kode JavaScript berikut −
// Array of ages var ages = [32, 12, 34, 54, 65, 76, 21, 11, 4, 34, 32]; // array to store all ages above 18 var above18 = []; // Iterate through ages and filter all ages above 18. for (var i = 0; i < ages.length; i++) { if (ages[i] > 18) { // push all ages, which are above 18 to above18 array. above18.push(ages[i]); } } // Print all ages above 18. console.log("All ages above 18."); console.log(above18);_Keluaran
Kode di atas akan menghasilkan keluaran berikut -
let array: Array = [10, 20, 30, 54, 43, 32, 90, 80]; // Filter the all values which are divisible by 10. let result: Array = array.filter( // arrow function as a callback function (element, index, array) => { // If element is divided by 10, return true else return false. if (element % 10 == 0) { return true; } return false; } ); console.log("All filtered values are " + result); _0Pengguna belajar memfilter nilai dalam TypeScript dalam tutorial ini. Pada contoh pertama, pengguna belajar menggunakan metode filter untuk memfilter nilai dari array. Juga, pengguna belajar memfilter objek sesuai dengan nilai anggota menggunakan metode filter
Terakhir, kami membuat algoritme khusus untuk memfilter nilai, yang juga menunjukkan bagaimana metode filter() diimplementasikan di kelas Array