Array.prototype.filter()
filter()
metotu sağlanan işlev tarafından uygulanan testi geçen tüm öğelerle birlikte yeni bir dizi oluşturur.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir istek gönderin.
Söz Dizimi
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
Parametreler
callback
- Function , dizinin her öğesini sınamak için bir yordamdır. Öğeyi saklamak için
true
, aksi takdirdefalse
değerini döndürün. Üç argümanı kabul eder: -
element
- Dizide işlenen mevcut elementtir.
index
Optional- Dizide işlenen geçerli öğenin dizini
array
Optional- The array
filter
was called upon.
thisArg
Optionalcallback
çalıştığı zamanthis
olarak kullanmak için değerdir.
Dönüş değer
Testi geçen öğeler içeren yeni bir dizi. Hiçbir öğe testi geçemezse, boş bir dizi döndürülür.
Açıklama
filter ()
, bir dizideki her öğe için sağlanan bir geri çağırma işlevini çağırır ve geri çağrmanın (callback) doğru olan bir değer döndürdüğü tüm değerler için yeni bir dizisini oluşturur. Geri çağırma (callback), yalnızca atanmış değerleri olan dizinin dizinleri için çağrılır; silinmiş veya hiçbir zaman değer atanmamış indeksler için çağrılmaz. Filtre testini geçmeyen dizi öğeleri basitçe atlanır ve yeni diziye dahil edilmez.
Geri Çağırma (callback)
3 argüman ile çağırılır.
- elementin değeri
- elementin indeksi
- Array nesnesinin geçişi
Filtrelemek için bir thisArg parametresi varsa, geri çağırma (callback) bu değer olarak kullanılacaktır. Aksi halde undefined değeri bu değer olarak kullanılacaktır. Sonuçta geri çağırma ile gözlenebilen this değeri, bir işlev tarafından görülenlerin belirlenmesi için kullanılan genel kurallara göre belirlenir.
filter()
çağrıldığı diziyi değiştirmez.
filter()
tarafından işlenen elemanların aralığı, ilk geri çağırma callback
çağrısından önce ayarlanır. filter()
çağrısı başladıktan sonra diziye eklenen öğeler, geri çağırma callback
tarafından ziyaret edilmeyecektir. Dizinin mevcut elemanları değiştirilir veya silinirse, geri çağırmaya callback
iletilen değerleri filter()
tarafından ziyaret edilen zamanın değeri olacaktır; silinen öğeler ziyaret edilmez.
Örnekler
Tüm küçük değerleri filtrelemek
Aşağıdaki örnek, tüm öğeleri 10'dan daha küçük değerlere sahip filtreli bir dizi oluşturmak için filter()
kullanır.
function isBigEnough(value) {
return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
JSON'dan geçersiz girişleri filtrelemek
Aşağıdaki örnek, 0 olmayan,numeric id
olan tüm öğelerin filtrelenmiş bir jsonunu oluşturmak için filter()
işlevini kullanır.
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) && item.id !== 0) {
return true;
}
invalidEntries++;
return false;
}
var arrByID = arr.filter(filterByID);
console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 5
Array içinde arama yapmak
Aşağıdaki örnek, arama keriterlerine göre dizi içeriğini filtrelemek için filter() işlevini kullanır
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']
ES2015 İmplementasyonu
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
5. basımda ECMA-262 standardına filter () eklenmiştir; bu nedenle standardın tüm uygulamalarında bulunmayabilir. Bu kodu, komut dosyalarınızın başına aşağıdaki kodu ekleyerek ve doğal olarak desteklemeyen ECMA-262 uygulamalarında filter() kullanımına izin vererek çözebilirsiniz. Bu algoritma, fn.call öğesinin Function.prototype.bind ()
özgün değerini değerlendirdiğini varsayarsak, ECMA-262, 5. basımda belirtilene tamamen eşdeğerdir ve bu Array.prototype.push ()
orijinal değerine sahiptir
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;
};
}
Özellikler
Özellikler | Statüler | Yorumlar |
---|---|---|
ECMAScript 5.1 (ECMA-262) The definition of 'Array.prototype.filter' in that specification. |
Standard | İlk tanım JavaScript 1.6'da uygulanmıştır. |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Array.prototype.filter' in that specification. |
Standard | |
ECMAScript (ECMA-262) The definition of 'Array.prototype.filter' in that specification. |
Living Standard |
Tarayıcı uyumluluğu
BCD tables only load in the browser