Verwendung von Objektmethoden in JavaScript

Einführung

Objects in JavaScript sind Sammlungen vonkey /value Paaren. Die Werte können ausproperties undmethods bestehen und alle anderen JavaScript-Datentypen wie Zeichenfolgen, Zahlen und Boolesche Werte enthalten.

Alle Objekte in JavaScript stammen vom Konstruktor des übergeordnetenObjectab. Object verfügt über viele nützliche integrierte Methoden, mit denen wir die Arbeit mit einzelnen Objekten vereinfachen können. Im Gegensatz zuArray prototype methods wiesort() undreverse(), die in der Array-Instanz verwendet werden, werden Objektmethoden direkt im KonstruktorObjectverwendet und verwenden die Objektinstanz als Parameter. Dies ist als statische Methode bekannt.

In diesem Lernprogramm werden wichtige integrierte Objektmethoden beschrieben. In den folgenden Abschnitten wird jeweils eine bestimmte Methode behandelt und ein Anwendungsbeispiel angegeben.

Voraussetzungen

Um dieses Lernprogramm optimal nutzen zu können, sollten Sie mit dem Erstellen, Ändern und Arbeiten mit Objekten vertraut sein, die Sie unter „https://www.digitalocean.com/community/tutorials/understanding-objects- In-Javascript-Artikel [Grundlegendes zu Objekten in JavaScript].

Weitere Anleitungen zu JavaScript im Allgemeinen finden Sie in unsererHow To Code in JavaScript-Serie.

Object.create()

Mit der MethodeObject.create()wird ein neues Objekt erstellt und mit dem Prototyp eines vorhandenen Objekts verknüpft.

Wir können einejob-Objektinstanz erstellen und auf ein spezifischeres Objekt erweitern.

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();

OutputThe barista position is hourly and is accepting applications.

Dasbarista-Objekt hat jetzt eine Eigenschaft -position - aber alle anderen Eigenschaften und Methoden vonjob sind über den Prototyp verfügbar. Object.create() ist nützlich, um CodeDRY beizubehalten, indem Duplikate minimiert werden.

Object.keys()

Object.keys() erstellt ein Array mit den Schlüsseln eines Objekts.

Wir können ein Objekt erstellen und das Array von Schlüsseln drucken.

// Initialize an object
const employees = {
    boss: 'Michael',
    secretary: 'Pam',
    sales: 'Jim',
    accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output["boss", "secretary", "sales", "accountant"]

Object.keys kann verwendet werden, um die Schlüssel und Werte eines Objekts zu durchlaufen.

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

     console.log(`${key}: ${value}`);
});

Outputboss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.keys ist auch nützlich, um die Länge eines Objekts zu überprüfen.

// Get the length of the keys
const length = Object.keys(employees).length;

console.log(length);

Output4

Mit der Eigenschaftlengthkonnten wir die Eigenschaften von4vonemployees zählen.

Object.values()

Object.values() erstellt ein Array, das die Werte eines Objekts enthält.

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);

Output[1, "26-July-2018", "mobile", "Chrome"]

MitObject.keys() undObject.values() können Sie die Daten von einem Objekt zurückgeben.

Object.entries()

Object.entries() erstellt ein verschachteltes Array der Schlüssel / Wert-Paare eines Objekts.

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);

Output[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

Sobald wir die Schlüssel / Wert-Paar-Arrays haben, können wir dieforEach()-Methode verwenden, um die Ergebnisse zu durchlaufen und mit ihnen zu arbeiten.

// Loop through the results
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});

Outputname: Ubuntu
version: 18.04
license: Open Source

Die MethodeObject.entries()gibt nur die eigenen Eigenschaften der Objektinstanz zurück und keine Eigenschaften, die möglicherweise über ihren Prototyp vererbt werden.

Object.assign()

Object.assign() wird verwendet, um Werte von einem Objekt in ein anderes zu kopieren.

Wir können zwei Objekte erstellen und sie mitObject.assign() zusammenführen.

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);

Output{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Es ist auch möglich, den Spread-Operator (...) zu verwenden, um dieselbe Aufgabe auszuführen. Im folgenden Code ändern wir die Deklaration voncharacter durch Zusammenführen der Objektename unddetails.

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);

Output{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Diesesspread syntax in Objektliteralen wird auch als Flachklonen bezeichnet.

Object.freeze()

Object.freeze() verhindert das Ändern von Eigenschaften und Werten eines Objekts und verhindert, dass Eigenschaften zu einem Objekt hinzugefügt oder daraus entfernt werden.

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output{username: "AzureDiamond", password: "hunter2"}

Im obigen Beispiel haben wir versucht, das Kennworthunter2 mit******* zu überschreiben, aber die Eigenschaftpassword blieb gleich. Wir haben auch versucht, eine neue Eigenschaft,active, hinzuzufügen, diese wurde jedoch nicht hinzugefügt.

Object.isFrozen() ist verfügbar, um zu bestimmen, ob ein Objekt eingefroren wurde oder nicht, und gibt einen Booleschen Wert zurück.

Object.seal()

Object.seal() verhindert, dass einem Objekt neue Eigenschaften hinzugefügt werden, ermöglicht jedoch die Änderung vorhandener Eigenschaften. Diese Methode ähneltObject.freeze(). Aktualisieren Sie Ihre Konsole, bevor Sie den folgenden Code implementieren, um einen Fehler zu vermeiden.

// Initialize an object
const user = {
    username: 'AzureDiamond',
    password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output{username: "AzureDiamond", password: "*******"}

Die neue Eigenschaftactivewurde dem versiegelten Objekt nicht hinzugefügt, aber die Eigenschaftpasswordwurde erfolgreich geändert.

Object.getPrototypeOf()

Object.getPrototypeOf() wird verwendet, um die internen versteckten[[Prototype]] eines Objekts abzurufen, auf die auch über die Eigenschaft__proto__ zugegriffen werden kann.

In diesem Beispiel können wir ein Array erstellen, das Zugriff auf den Prototyp vonArrayhat.

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);

Output[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

Wir können in der Ausgabe sehen, dass der Prototyp des Arraysemployees Zugriff aufpop,find und andere Array-Prototypmethoden hat. Wir können dies bestätigen, indem wir den Prototyp vonemployeesgegenArray.prototypetesten.

Object.getPrototypeOf(employees) === Array.prototype;

Outputtrue

Diese Methode kann hilfreich sein, um weitere Informationen zu einem Objekt abzurufen oder um sicherzustellen, dass es Zugriff auf den Prototyp eines anderen Objekts hat.

Es gibt auch eine verwandteObject.setPrototypeOf()-Methode, mit der ein Prototyp zu einem anderen Objekt hinzugefügt wird. Es wird empfohlen, stattdessenObject.create() zu verwenden, da es schneller und leistungsfähiger ist.

Fazit

Objekte verfügen über viele nützliche Methoden, mit deren Hilfe wir sie ändern, schützen und durchlaufen können. In diesem Lernprogramm wurde erläutert, wie Sie neue Objekte erstellen und zuweisen, durch die Schlüssel und / oder Werte eines Objekts iterieren und ein Objekt einfrieren oder versiegeln.

Wenn Sie JavaScript-Objekte überprüfen müssen, lesen Sie "https://www.digitalocean.com/community/tutorials/understanding-objects-injavascript[Understanding Objects in JavaScript". Wenn Sie sich mit dem Prototypen vertraut machen möchten Sie können einen Blick auf "https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-injavascript[Understanding Prototypes and Inheritance in JavaScript" werfen.

TOC