Arrays in jQuery

In jQuery gibt es eine Reihe von Funktionen zur Bearbeitung von Arrays. Einige der Funktionen sind nur dann sinnvoll, wenn ältere Browser unterstützt werden sollen (z.B. Internet Explorer 8). Seit ES5 gehören viele dieser Array-Funktionen nämlich bereits zum Standard. Im Folgenden eine kurze Übersicht.

Jquery.each

Die each-Funktion ist im wesentlichen eine Kurzschreibweise einer for-Schleife. Sie kann auf Arrays oder Objekte angewendet werden. Als zweiter Parameter wird neben dem Array eine Funktion angegeben. Darin lässt sich auf das Array per Schlüssel (key) und Wert (value) zugreifen.

var einObjekt = {
    eineEigenschaft: {
        name: 'Objekt'
    },
    nochEineEigenschaft: 'Ich bin ein String'
};

var einArray = [
    'hallo',
    'welt',
    '!'
];

$.each(einArray, function(key, value) {
    console.log('index: '+ key + ' hat den Wert: ' + value);
});
$.each(einObjekt, function(key, value) {
    console.log('index: '+ key + ' hat den Wert: ' + value);
});

Seit ES5 kann man dasselbe auch direkt mit JavaScript machen. Aber aufgepasst: Die Parameter für key und value sind vertauscht. Außerdem funktioniert diese Methode dann nur für Arrays. Für Objekte lässt sich aber eine for-in-Schleife verwenden.

einArray.forEach(function(value, key) {
    console.log('index: '+ key + ' hat den Wert: ' + value);
});

Jquery.inArray

Mit dieser Funktion können wir in einem Array nach einem bestimmten Wert suchen. Die Funktion gibt und den Index des Werts zurück oder -1, falls der Wert nicht gefunden wurde.

// liefert den Index 4
$.inArray('10', ['hallo', 'welt', '!', 10, '10']);

Wie auch für $.each gilt hier, dass wir die Funktion nur bei Unterstüzung älterer Browser brauchen. JavaScript bietet seit ES5 die indexOf-Funktion, die praktisch dasselbe kann.

['hallo', 'welt', '!', 10, '10'].indexOf('10');

Jquery.map

Mit map lassen sich komplexe Tranformationen an einem Array oder Objekt vornehmen. Die Regeln, nach denen die gewünschten Transformationen ablaufen, werden in einer Funktion beschreiben. Rückgabewert der Map-Funktion ist das neue, transformierte Array.

var meinArray = [
 
    1, false, 'Ich bin ein String', 2, 3
];

// Ergebnis [2, 3, 5]
var transformiertesArray = $.map(meinArray, function(element, index) {
    if (typeof element === 'number') {
        return element + 1;
    }
});

Seit ES5 gibt es auch in JavaScript eine map-Funktion.

Jquery.grep

Möchte man einfach nur bestimmte Elemente aus einem Array entfernen, bietet sich die jquery.grep-Funktion an. Die Funktionsweise ähnelt jquery.map. Bei jQuery.grep geht es aber nicht vorangig um Transformationen sondern um das Entfernen von Array-Elementen, die einer bestimmten Bedingung entsprechen. Das Ergebnis von grep ist ein neues Array, aus dem die entsprechenden Elemente entfernt wurden.

// Ergebnis [false, 'Ich bin ein String']
var arrayOhneZahlen = $.grep(meinArray, function(element, index) {
    return typeof element !== 'number';
});

Jquery.merge

Mit merge lassen sich zwei Arrays miteinander verbinden (konkatenieren). Resultat ist ein neues Array, das die Werte beider Arrays enthält. Der Nutzen von merge ist fraglich, da die JavaScript-Funktion concat dasselbe macht.

var array1 = ['hallo', 'welt', 10];
var array2 = [1, 2];

// Ergebnis ['hallo', 'welt', 10, 1, 2]
var arrayMerged = $.merge(array1, array2);

Jquery.isArray

Hiermit lässt sich feststellen, ob es sich bei dem übergebenen Wert um ein Array handelt. Mittlerweile wird dies auch von JavaScript direkt unterstützt.

// jQuery
console.log($.isArray(meinArray));
// ES5
console.log(Array.isArray(meinArray));

Jquery.makeArray

Mit makeArray kann man ein beliebiges JavaScript-Objekt in ein Array umwandeln. Das ist sinnvoll, wenn man auf die Eigenschaften eines Objekts lieber über einen numerischen Index zugreifen möchte. Dieser Anwendungsfall dürfte aber eher selten auftreten, weshalb hier nicht weiter darauf eingegangen wird.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project