So prüfen Sie, ob ein Objekt ein Array in JavaScript ist: Die 3 besten Methoden

So prüfen Sie, ob ein Objekt ein Array in JavaScript ist: Eine vollständige Anleitung

Haben Sie sich jemals dabei ertappt, wie Sie dachten: „Eigentlich wurde ein Array übergeben, aber der Code stürzt mit einem Fehler ab“? Eine bekannte Situation. In JavaScript sind Arrays Objekte, und eine einfache Prüfung mit typeof funktioniert hier nicht. Heute werden wir drei grundlegende Methoden untersuchen, um zu prüfen, ob ein Objekt ein Array ist, und herausfinden, welche Sie in realen Projekten verwenden sollten.

Warum ist typeof nicht geeignet?

Bevor wir in die Tiefe gehen, lassen Sie uns verstehen, warum Anfänger hier oft stolpern. In JavaScript sind Arrays ein Sonderfall von Objekten. Daher gibt der Operator typeof für ein Array "object" zurück, nicht "array". Probieren Sie es selbst aus:

const arr = [1, 2, 3];\nconsole.log(typeof arr); // "object" — nutzlos

Darüber hinaus ist typeof null === "object" ein bekannter Sprachfehler, der nicht mehr behoben wird. Wenn Sie also Daten von einem Benutzer oder aus einer API prüfen, können Sie sich nicht auf typeof verlassen. Sie benötigen zuverlässigere Methoden.

Methode 1: Array.isArray() — der moderne Standard

Seit ES5 (2009) gibt es in JavaScript die eingebaute Methode Array.isArray(). Dies ist der korrekteste und einfachste Weg, um zu prüfen, ob ein Objekt ein Array ist.

const arr = [10, 20, 30];\nconst notArr = { length: 3, 0: 'a', 1: 'b', 2: 'c' };\n\nconsole.log(Array.isArray(arr));    // true\nconsole.log(Array.isArray(notArr)); // false\nconsole.log(Array.isArray('hello')); // false\nconsole.log(Array.isArray(null));    // false

Warum ist dies die beste Wahl? Weil Array.isArray() auch in vielschichtigen Szenarien korrekt funktioniert: Wenn ein Array aus einem anderen iframe oder Frame stammt, kann instanceof versagen, Array.isArray() jedoch nicht. Es prüft den internen Typ [[Class]] des Objekts, nicht die Prototypenkette.

Browserunterstützung

Die Methode wird von allen modernen Browsern unterstützt, einschließlich Internet Explorer 9+. Wenn Sie sehr alte Browser (IE 8 und älter) unterstützen müssen, verwenden Sie einen Polyfill oder die dritte Methode.

Methode 2: instanceof Array — der Klassiker

Der Operator instanceof prüft, ob der Prototyp Array.prototype in der Prototypenkette des Objekts vorhanden ist. Das klingt kompliziert, funktioniert in der Praxis aber so:

const arr = [1, 2, 3];\nconsole.log(arr instanceof Array); // true\n\nconst obj = { a: 1 };\nconsole.log(obj instanceof Array); // false\n\n// Und hier die Überraschung:\nconst iframeArr = new iframe.contentWindow.Array(1, 2, 3);\nconsole.log(iframeArr instanceof Array); // false! (wenn das Array aus einem anderen Frame stammt)

Hier liegt der Haken: Wenn Sie mehrere iframes auf Ihrer Seite haben oder mit Web Workers arbeiten, haben Arrays aus verschiedenen globalen Kontexten unterschiedliche Prototypen. instanceof berücksichtigt dies nicht und kann false für ein echtes Array zurückgeben. Daher sollte man in der modernen Entwicklung besser auf instanceof zur Array-Prüfung verzichten.

Methode 3: Object.prototype.toString.call() — der Allrounder

Diese Methode wurde vor dem Aufkommen von Array.isArray() verwendet. Sie ist immer noch relevant, wenn Sie einen Polyfill schreiben müssen oder in einer Umgebung arbeiten, in der Array.isArray nicht verfügbar ist.

function isArray(obj) {\n  return Object.prototype.toString.call(obj) === '[object Array]';\n}\n\nconsole.log(isArray([1, 2]));      // true\nconsole.log(isArray({ a: 1 }));    // false\nconsole.log(isArray('string'));    // false\nconsole.log(isArray(null));        // false

Wie funktioniert das? Die Methode toString des Objekts Object.prototype gibt einen String der Form [object Type] zurück. Für Arrays ist dies immer [object Array]. Diese Methode umgeht das Problem mit iframes, da sie den internen Typ prüft.