Fungsi filter()
membuat array baru berisi elemen yang lolos pengecekan di dalam fungsi anonim yang dikirim sebagai parameter.
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; var longWords = words.filter(function(word){ return word.length > 6; }); // Filtered array longWords is ["exuberant", "destruction", "present"]
Versi ES6
const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; let longWords = words.filter(word => word.length > 6); // Filtered array longWords is ["exuberant", "destruction", "present"]
Sintaksis
var newArray = arr.filter(callback[, thisArg])
Parameter-parameter
callback
- Fungsi berupa tes untuk mengecek elemen yang ada di dalam array. Kembalikan nilai
true
untuk meloloskan element,false
untuk tidak lolos, dan dapat memiliki tiga argumen: -
element
- Elemen saat ini yang sedang diproses.
index
- Nilai indeks (posisi) dari elemen yang sedang diproses.
array
- Array yang memanggil fungsi
filter
.
thisArg Optional
- Opsional. Objek yang akan digunakan sebagai
this
saat mengeksekusicallback
.
Nilai balikan
Array baru yang berisi elemen lolos pengecekan.
Deskripsi
filter()
akan memanggil fungsi callback
sekali untuk tiap elemen di dalam array, dan membuat array baru dari semua nilai yang dianggap true dari hasil yang dikembalikan callback
. callback
hanya dipanggil untuk indeks dari array yang berisi sebuah nilai; fungsi tidak akan dipanggil untuk indeks yang telah dihapus atau belum diisi nilai tertentu. Elemen array yang tidak lolos tes callback
akan dilewati dan tidak dimasukkan ke dalam array baru.
callback
dapat dipanggil dengan tiga argumen:
- nilai dari elemen
- indeks dari elemen
- objek array yang diproses
Jika parameter thisArg
tersedia juga saat memanggil filter
, itu akan digunakan sebagai nilai this
di dalam callback
. Jika tidak disediakan, maka undefined
yang digunakan sebagai nilai this
. Nilai this
yang dapat digunakan dalam callback
ditentukan dari aturan umum penentuan this
dalam fungsi.
filter()
tidak mengubah array yang memanggil fungsi ini.
Kumpulan elemen yang akan diproses oleh filter()
ditentukan sebelum pemanggilan pertama callback
. Elemen yang ditambahkan ke array setelah pemanggilanfilter()
dimulai tidak akan diproses oleh callback
. Jika elemen yang sudah ada dalam array berubah, atau dihapus, nilai yang digunakan dalam callback
adalah nilai pada saat filter()
menggunakannya; elemen yang dihapus tidak akan diproses.
Contoh
Menyaring semua nilai kecil
Contoh berikut ini menggunakan filter()
untuk membuat array yang menyaring semua nilai di bawah 10.
function isBigEnough(value) { return value >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]
Menyaring entri invalid dari JSON
Contoh berikut ini menggunakan filter()
untuk membuat json tersaring berisi semua elemen id
berupa angka bukan nol.
var arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, { }, { id: null }, { id: NaN }, { id: 'undefined' } ]; var invalidEntries = 0; function isNumber(obj) { return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj); } function filterByID(item) { if (isNumber(item.id)) { return true; } invalidEntries++; return false; } var arrByID = arr.filter(filterByID); console.log('Filtered Array\n', arrByID); // Filtered Array // [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] console.log('Number of Invalid Entries = ', invalidEntries); // Number of Invalid Entries = 4
Pencarian dalam array
Contoh berikut menggunakan filter()
untuk menyaring isi array berdasarkan kriteria pencarian
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; /** * Array filters items based on search criteria (query) */ function filterItems(query) { return fruits.filter(function(el) { return el.toLowerCase().indexOf(query.toLowerCase()) > -1; }) } console.log(filterItems('ap')); // ['apple', 'grapes'] console.log(filterItems('an')); // ['banana', 'mango', 'orange']
Implementasi ES2015
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; /** * Array filters items based on search criteria (query) */ const filterItems = (query) => { return fruits.filter((el) => el.toLowerCase().indexOf(query.toLowerCase()) > -1 ); } console.log(filterItems('ap')); // ['apple', 'grapes'] console.log(filterItems('an')); // ['banana', 'mango', 'orange']
Polyfill
filter()
ditambahkan ke standar ECMA-262 baru pada edisi ke-5; sehingga fungsi ini mungkin tidak terdapat pada semua implementasi standar. Anda dapat mengatasi hal ini dengan menambahkan kode berikut pada awalan skrip Anda, memungkinkan penggunaan filter()
di implementasi ECMA-262 yang belum mendukung. Algoritma ini persis sepadan dengan yang dispesifikasikan dalam ECMA-262, edisi ke-5, dengan asumsi fn.call
dievaluasi ke nilai asli dari Function.prototype.bind()
, dan Array.prototype.push()
memiliki nilai aslinya.
if (!Array.prototype.filter) Array.prototype.filter = function(func, thisArg) { 'use strict'; if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) throw new TypeError(); var len = this.length >>> 0, res = new Array(len), // preallocate array t = this, c = 0, i = -1; if (thisArg === undefined) while (++i !== len) // checks to see if the key was set if (i in this) if (func(t[i], i, t)) res[c++] = t[i]; else while (++i !== len) // checks to see if the key was set if (i in this) if (func.call(thisArg, t[i], i, t)) res[c++] = t[i]; res.length = c; // shrink down array to proper size return res; };
Spesifikasi
Spesifikasi | Status | Komentar |
---|---|---|
ECMAScript 5.1 (ECMA-262) The definition of 'Array.prototype.filter' in that specification. |
Standard | Initial definition. Implemented in JavaScript 1.6. |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Array.prototype.filter' in that specification. |
Standard | |
ECMAScript Latest Draft (ECMA-262) The definition of 'Array.prototype.filter' in that specification. |
Draft |
Kompatibilitas browser
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes | Yes | 1.5 | 9 | Yes | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |