So erstellen Sie Objekte in JavaScript

Wir alle gehen auf die eine oder andere Weise mit Objekten um, während wir Code in einer Programmiersprache schreiben. In JavaScript bieten Objekte eine Möglichkeit zum Speichern, Bearbeiten und Senden von Daten über das Netzwerk.

Es gibt viele Möglichkeiten, wie sich Objekte in JavaScript von Objekten in anderen gängigen Programmiersprachen wie Java unterscheiden. Ich werde versuchen, dies in einem anderen Thema zu behandeln. Konzentrieren wir uns hier nur auf die verschiedenen Möglichkeiten, mit denen JavaScript das Erstellen von Objekten ermöglicht.

Stellen Sie sich Objekte in JavaScript als eine Sammlung von 'Schlüssel: Wert'-Paaren vor. Dies bringt uns die erste und beliebteste Art, Objekte in JavaScript zu erstellen.

Lassen Sie uns damit beginnen.

1. Erstellen von Objekten mithilfe der Objektliteral-Syntax

Das ist wirklich einfach. Alles, was Sie tun müssen, ist, Ihre durch ':' getrennten Schlüsselwertpaare in eine Reihe geschweifter Klammern ({}) zu werfen, und Ihr Objekt kann wie folgt bedient (oder konsumiert) werden:

const person = { firstName: 'testFirstName', lastName: 'testLastName' };

Dies ist die einfachste und beliebteste Methode zum Erstellen von Objekten in JavaScript.

2. Erstellen von Objekten mit dem Schlüsselwort 'new'

Diese Methode der Objekterstellung ähnelt der Art und Weise, wie Objekte in klassenbasierten Sprachen wie Java erstellt werden. Ab ES6 sind Klassen übrigens auch in JavaScript enthalten, und wir werden uns mit dem Erstellen von Objekten befassen, indem wir gegen Ende dieses Artikels Klassen definieren. Um ein Objekt mit dem Schlüsselwort 'new' zu erstellen, benötigen Sie eine Konstruktorfunktion.

Hier sind zwei Möglichkeiten, wie Sie das 'neue' Schlüsselwortmuster verwenden können:

a) Verwenden des Schlüsselworts 'new' mit der eingebauten Objektkonstruktorfunktion

Verwenden Sie zum Erstellen eines Objekts das neue Schlüsselwort mit dem Object()Konstruktor wie folgt:

const person = new Object();

Um diesem Objekt Eigenschaften hinzuzufügen, müssen wir Folgendes tun:

person.firstName = 'testFirstName'; person.lastName = 'testLastName';

Sie haben vielleicht gedacht, dass diese Methode etwas länger zu tippen ist. Diese Vorgehensweise wird auch nicht empfohlen, da hinter den Kulissen eine Bereichsauflösung erfolgt, um festzustellen, ob die Konstruktorfunktion integriert oder benutzerdefiniert ist.

b) Verwenden von 'new' mit benutzerdefinierter Konstruktorfunktion

Das andere Problem bei der Verwendung der Konstruktorfunktion 'Object' ergibt sich aus der Tatsache, dass wir jedes Mal, wenn wir ein Objekt erstellen, die Eigenschaften manuell zum erstellten Objekt hinzufügen müssen.

Was wäre, wenn wir Hunderte von Personenobjekten erstellen müssten? Sie können sich den Schmerz jetzt vorstellen. Um das manuelle Hinzufügen von Eigenschaften zu den Objekten zu vermeiden, erstellen wir benutzerdefinierte (oder benutzerdefinierte) Funktionen. Wir erstellen zuerst eine Konstruktorfunktion und verwenden dann das Schlüsselwort 'new', um Objekte abzurufen:

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }

Wenn Sie jetzt ein 'Person'-Objekt möchten, gehen Sie wie folgt vor:

const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Verwenden Sie Object.create (), um neue Objekte zu erstellen

Dieses Muster ist sehr praktisch, wenn wir aufgefordert werden, Objekte aus anderen vorhandenen Objekten zu erstellen und nicht direkt die Schlüsselwortsyntax 'new' zu verwenden. Mal sehen, wie man dieses Muster verwendet. Wie auf MDN angegeben:

Die Object.create()Methode erstellt ein neues Objekt und verwendet ein vorhandenes Objekt als Prototyp des neu erstellten Objekts.

Denken Sie zum Verständnis der Object.createMethode daran, dass zwei Parameter erforderlich sind. Der erste Parameter ist ein obligatorisches Objekt, das als Prototyp des neu zu erstellenden Objekts dient. Der zweite Parameter ist ein optionales Objekt, das die Eigenschaften enthält, die dem neuen Objekt hinzugefügt werden sollen.

Wir werden uns jetzt nicht eingehend mit Prototypen und Vererbungsketten befassen, um uns weiterhin auf das Thema zu konzentrieren. Kurz gesagt, Sie können sich Prototypen als Objekte vorstellen, von denen andere Objekte Eigenschaften / Methoden ausleihen können, die sie benötigen.

Stellen Sie sich vor, Sie haben eine Organisation, die von vertreten wird orgObject

const orgObject = { company: 'ABC Corp' };

Und Sie möchten Mitarbeiter für diese Organisation erstellen. Natürlich möchten Sie alle Mitarbeiterobjekte.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Erstellen Sie mit Object.assign () neue Objekte

Was ist, wenn wir ein Objekt erstellen möchten, das Eigenschaften von mehr als einem Objekt haben muss? Object.assign()kommt zu unserer Hilfe.

Wie auf MDN angegeben:

Die Methode wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren. Das Zielobjekt wird zurückgegeben.Object.assign()

Object.assignMethode kann eine beliebige Anzahl von Objekten als Parameter nehmen. Der erste Parameter ist das Objekt, das erstellt und zurückgegeben wird. Der Rest der übergebenen Objekte wird verwendet, um die Eigenschaften in das neue Objekt zu kopieren. Lassen Sie es uns verstehen, indem wir das vorherige Beispiel erweitern, das wir gesehen haben.

Angenommen, Sie haben zwei Objekte wie folgt:

const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }

Jetzt möchten Sie ein Mitarbeiterobjekt von 'ABC Corp', das ein 'Ford'-Auto fährt. Sie können dies mit Hilfe von Object.assignwie folgt tun :

const employee = Object.assign({}, orgObject, carObject);

Jetzt erhalten Sie ein employeeObjekt, das companyund carNameals seine Eigenschaft hat.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Verwenden von ES6-Klassen zum Erstellen von Objekten

You will notice that this method is similar to using ‘new’ with user defined constructor function. The constructor functions are now replaced by classes as they are supported through ES6 specifications. Let’s see the code now.

class Person { constructor(fname, lname) { this.firstName = fname; this.lastName = lname; } } const person = new Person('testFirstName', 'testLastName'); console.log(person.firstName); // testFirstName console.log(person.lastName); // testLastName 

These are all the ways I know to create objects in JavaScript. I hope you enjoyed this post and now understand how to create objects.

Thanks for your time for reading this article. If you liked this post and it was helpful to you, please click the clap ? button to show your support. Keep learning more!