JavaScript
Objekte

Syntax

• object = {}
• object = neues Objekt ()
• object = Object.create (Prototyp [, Eigenschaftenobjekt])
• object.key = Wert
• Objekt ["Schlüssel"] = Wert
• Objekt [Symbol ()] = Wert
• object = {key1: value1, "key2": value2, 'key3': value3}
• object = {conciseMethod () {…}}
• object = {[berechnet () + "Schlüssel"]: Wert}
• Object.defineProperty (obj, propertyName, propertyDescriptor)
• property_desc = Object.getOwnPropertyDescriptor (obj, propertyName)
• Objekt.Frost (obj)
• Object.seal (obj)

Parameter

Bemerkungen

Objektschlüssel

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!"
};

var keys = Object.keys(obj);

console.log(keys); // ["a", "b", "c"]

Flaches Klonen

const existing = { a: 1, b: 2, c: 3 };

const clone = Object.assign({}, existing);

Die Zerstörung von Objektrest / Spreizung, die derzeit ein Vorschlag der Stufe 3 ist, bietet eine noch einfachere Methode zum Erstellen flacher Klone von Objektinstanzen:

const existing = { a: 1, b: 2, c: 3 };

const { ...clone } = existing;

Wenn Sie ältere Versionen von JavaScript unterstützen müssen, besteht die .hasOwnProperty() Möglichkeit, ein Objekt zu klonen, indem Sie die Eigenschaften manuell .hasOwnProperty() und geerbte mit .hasOwnProperty() .

var existing = { a: 1, b: 2, c: 3 };

var clone = {};
for (var prop in existing) {
  if (existing.hasOwnProperty(prop)) {
    clone[prop] = existing[prop];
  }
}

Object.defineProperty

var obj = { };

Object.defineProperty(obj, 'foo', { value: 'foo' });

console.log(obj.foo);

Konsolenausgabe

foo

Object.defineProperty kann mit den folgenden Optionen aufgerufen werden:

Object.defineProperty(obj, 'nameOfTheProperty', {
  value: valueOfTheProperty, 
  writable: true, // if false, the property is read-only
  configurable : true, // true means the property can be changed later
  enumerable : true // true means property can be enumerated such as in a for..in loop
});

Object.defineProperties können Sie mehrere Eigenschaften gleichzeitig definieren.

var obj = {};
Object.defineProperties(obj, {
  property1: {
    value: true,
    writable: true
  },
  property2: {
    value: 'Hello',
    writable: false
  }      
});

Schreibgeschützte Eigenschaft

Die writable Eigenschaft in einem Eigenschaftsdeskriptor gibt an, ob diese Eigenschaft geändert werden kann oder nicht.

var a  = { };

Object.defineProperty(a, 'foo', { value: 'original', writable: false });

a.foo = 'new';

console.log(a.foo);

Konsolenausgabe

Original

Nicht aufzuzählende Eigenschaft

Die enumerable Eigenschaft des Eigenschaftsdeskriptors gibt an, ob diese Eigenschaft beim Durchlaufen der Eigenschaften des Objekts aufgelistet wird.

var obj = { };

Object.defineProperty(obj, "foo", { value: 'show', enumerable: true });
Object.defineProperty(obj, "bar", { value: 'hide', enumerable: false });

for (var prop in obj) {
    console.log(obj[prop]);
}

Konsolenausgabe

Show

Eigenschaftsbeschreibung sperren

Die configurable Eigenschaft des Eigenschaftendeskriptors wird verwendet, um weitere Änderungen am Deskriptor zu unterbinden.

var obj = {};

// Define 'foo' as read only and lock it
Object.defineProperty(obj, "foo", { 
    value: "original value", 
    writable: false, 
    configurable: false
});
 
Object.defineProperty(obj, "foo", {writable: true});

Dieser Fehler wird ausgegeben:

TypeError: Eigenschaft kann nicht neu definiert werden: foo

Und die Eigenschaft wird weiterhin nur gelesen.

obj.foo = "new value";
console.log(foo);

Konsolenausgabe

Originalwert

Accesor Eigenschaften (get und set)

Die get Eigenschaft des Eigenschaftsdeskriptors ist eine Funktion, die aufgerufen wird, um den Wert aus der Eigenschaft abzurufen.

Die set Eigenschaft ist auch eine Funktion. Sie wird aufgerufen, wenn der Eigenschaft ein Wert zugewiesen wurde, und der neue Wert wird als Argument übergeben.

Sie können einem Deskriptor, der get oder set , keinen value oder writable zuweisen

var person = { name: "John", surname: "Doe"};
Object.defineProperty(person, 'fullName', { 
    get: function () { 
        return this.name + " " + this.surname;
    },
    set: function (value) {
        [this.name, this.surname] = value.split(" ");
    }
});

console.log(person.fullName); // -> "John Doe"

person.surname = "Hill";
console.log(person.fullName); // -> "John Hill"

person.fullName = "Mary Jones";
console.log(person.name) // -> "Mary"

Eigenschaften mit Sonderzeichen oder reservierten Wörtern

Während die Objektmerkmalsnotation normalerweise als myObject.property geschrieben myObject.property , werden nur Zeichen erlaubt, die normalerweise in JavaScript-Variablennamen vorkommen , hauptsächlich Buchstaben, Zahlen und Unterstrich ( _ ).

Wenn Sie Sonderzeichen wie Leerzeichen, ☺ oder vom Benutzer zur Verfügung gestellte Inhalte benötigen, ist dies mit der [] -Klammernotation möglich.

myObject['special property ☺'] = 'it works!'
console.log(myObject['special property ☺'])

All-stellige Eigenschaften:

All-Ziffern-Eigenschaftsnamen erfordern zusätzlich zu Sonderzeichen eine Klammernotation. In diesem Fall muss die Eigenschaft jedoch nicht als Zeichenfolge geschrieben werden.

myObject[123] = 'hi!' // number 123 is automatically converted to a string
console.log(myObject['123']) // notice how using string 123 produced the same result
console.log(myObject['12' + '3']) // string concatenation
console.log(myObject[120 + 3]) // arithmetic, still resulting in 123 and producing the same result
console.log(myObject[123.0]) // this works too because 123.0 evaluates to 123
console.log(myObject['123.0']) // this does NOT work, because '123' != '123.0'

Führende Nullen werden jedoch nicht empfohlen, da dies als Oktal-Notation interpretiert wird. (TODO, wir sollten ein Beispiel erstellen, das die Oktal-, Hexadezimal- und Exponenten-Notation beschreibt.)

Siehe auch: [Arrays are Objects] Beispiel.

Dynamische / variable Eigenschaftsnamen

Manchmal muss der Name der Eigenschaft in einer Variablen gespeichert werden. In diesem Beispiel fragen wir den Benutzer, welches Wort nachgeschlagen werden muss, und liefern dann das Ergebnis eines Objekts, das ich dictionary .

var dictionary = {
    lettuce: 'a veggie',
    banana: 'a fruit',
    tomato: 'it depends on who you ask',
    apple: 'a fruit',
    Apple: 'Steve Jobs rocks!' // properties are case-sensitive
}

var word = prompt('What word would you like to look up today?')
var definition = dictionary[word]
alert(word + '\n\n' + definition)

Beachten Sie, wie wir die Klammer-Notation [] verwenden, um die Variable namens word . wenn wir das traditionelle verwenden würden . Notation, dann würde es den Wert wörtlich nehmen, daher:

console.log(dictionary.word)  // doesn't work because word is taken literally and dictionary has no field named `word`
console.log(dictionary.apple) // it works! because apple is taken literally

console.log(dictionary[word]) // it works! because word is a variable, and the user perfectly typed in one of the words from our dictionary when prompted
console.log(dictionary[apple]) // error! apple is not defined (as a variable)

Sie könnten auch Literalwerte mit schreiben [] Notation durch die Variable ersetzt word mit einem String 'apple' . Siehe Beispiel [Eigenschaften mit Sonderzeichen oder reservierten Wörtern].

Sie können dynamische Eigenschaften auch mit der Klammer-Syntax festlegen:

var property="test";
var obj={
 [property]=1;
};

console.log(obj.test);//1

Es macht das gleiche wie:

var property="test";
var obj={};
obj[property]=1;

Arrays sind Objekte

Haftungsausschluss: Das Erstellen von Array-ähnlichen Objekten wird nicht empfohlen. Es ist jedoch hilfreich zu verstehen, wie sie funktionieren, insbesondere wenn Sie mit DOM arbeiten. Dies erklärt, warum reguläre Array-Operationen nicht für DOM-Objekte funktionieren, die von vielen DOM- document werden. (dh querySelectorAll , form.elements )

Angenommen, wir haben das folgende Objekt erstellt, das einige Eigenschaften aufweist, die Sie in einem Array erwarten würden.

var anObject = {
    foo: 'bar',
    length: 'interesting',
    '0': 'zero!',
    '1': 'one!'
};

Dann erstellen wir ein Array.

var anArray = ['zero.', 'one.'];

Beachten Sie nun, wie wir sowohl das Objekt als auch das Array auf dieselbe Weise untersuchen können.

console.log(anArray[0], anObject[0]); // outputs: zero.  zero!
console.log(anArray[1], anObject[1]); // outputs: one.  one!
console.log(anArray.length, anObject.length); // outputs: 2 interesting
console.log(anArray.foo, anObject.foo); // outputs: undefined bar

Da ein anArray genau wie anObject ein Objekt ist, können wir einem anObject sogar benutzerdefinierte Eigenschaften anArray

Haftungsausschluss: Arrays mit benutzerdefinierten Eigenschaften werden normalerweise nicht empfohlen, da sie verwirrend sein können. In fortgeschrittenen Fällen, in denen Sie die optimierten Funktionen eines Arrays benötigen, kann dies jedoch nützlich sein. (dh jQuery-Objekte)

anArray.foo = 'it works!';
console.log(anArray.foo);

Wir können sogar anObject ein Array-ähnliches Objekt machen, anObject wir eine length hinzufügen.

anObject.length = 2;

Dann können Sie die for Schleife im C-Stil verwenden, um über ein anObject wie bei einem Array zu iterieren. Siehe Array-Iteration

Beachten Sie, dass anObject nur ein Array-ähnliches Objekt ist. (auch als Liste bezeichnet) Es ist kein echtes Array. Dies ist wichtig, da Funktionen wie push und forEach (oder eine in Array.prototype gefundene Array.prototype ) standardmäßig nicht für Array-ähnliche Objekte verwendet werden.

Viele der DOM- document geben eine Liste zurück (z. B. querySelectorAll , form.elements ), die dem oben genannten array-like anObject ähnelt. Siehe Konvertieren von Array-ähnlichen Objekten in Arrays

console.log(typeof anArray == 'object', typeof anObject == 'object'); // outputs: true  true
console.log(anArray instanceof Object, anObject instanceof Object); // outputs: true  true
console.log(anArray instanceof Array, anObject instanceof Array); // outputs: true  false
console.log(Array.isArray(anArray), Array.isArray(anObject)); // outputs: true  false

Objekt.Frost

Die auf das Einfrieren folgenden Vorgänge schlagen automatisch fehl, wenn der Code nicht im strikten Modus ausgeführt wird. Wenn sich der Code im strikten Modus befindet, wird ein TypeError ausgelöst.

var obj = {
  foo: 'foo',
  bar: [1, 2, 3],
  baz: {
    foo: 'nested-foo'
  }
};

Object.freeze(obj);

// Cannot add new properties
obj.newProperty = true;

// Cannot modify existing values or their descriptors
obj.foo = 'not foo';
Object.defineProperty(obj, 'foo', {
    writable: true
});

// Cannot delete existing properties
delete obj.foo;

// Nested objects are not frozen
obj.bar.push(4);
obj.baz.foo = 'new foo';

Objekt.Siegel

var obj = { foo: 'foo', bar: function () { return 'bar'; } };

Object.seal(obj)

obj.newFoo = 'newFoo';
obj.bar = function () { return 'foo' };

obj.newFoo; // undefined
obj.bar(); // 'foo'

// Can't make foo an accessor property
Object.defineProperty(obj, 'foo', { 
    get: function () { return 'newFoo'; }
}); // TypeError

// But you can make it read only
Object.defineProperty(obj, 'foo', { 
    writable: false
}); // TypeError

obj.foo = 'newFoo';
obj.foo; // 'foo';

(function () {
    'use strict';

    var obj = { foo: 'foo' };

    Object.seal(obj);

    obj.newFoo = 'newFoo'; // TypeError
}());

Iterable-Objekt erstellen

var myIterableObject = {};
// An Iterable object must define a method located at the Symbol.iterator key:
myIterableObject[Symbol.iterator] = function () {
  // The iterator should return an Iterator object
  return {
    // The Iterator object must implement a method, next()
    next: function () {
      // next must itself return an IteratorResult object 
      if (!this.iterated) {
        this.iterated = true;
        // The IteratorResult object has two properties
        return {
          // whether the iteration is complete, and
          done: false,
          // the value of the current iteration
          value: 'One'
        };
      }
      return {
        // When iteration is complete, just the done property is needed
        done: true
      };
    },
    iterated: false
  };
};

for (var c of myIterableObject) {
  console.log(c); 
}

Objektruhe / Ausbreitung (...)

let obj = { a: 1 };

let obj2 = { ...obj, b: 2, c: 3 };

console.log(obj2); // { a: 1, b: 2, c: 3 };

let obj3 = { ...obj, b: { c: 2 } };

console.log(obj3); // { a: 1, b: { c: 2 } };

Deskriptoren und benannte Eigenschaften

Eigenschaften sind Mitglieder eines Objekts. Jede benannte Eigenschaft ist ein Paar von (Name, Deskriptor). Der Name ist eine Zeichenfolge, die den Zugriff ermöglicht (mithilfe der Punktnotation object.propertyName oder des Notationsobjekts in eckigen Klammern object['propertyName'] ). Der Deskriptor ist ein Datensatz von Feldern, die den Abvahiour der Eigenschaft definieren, wenn auf sie zugegriffen wird (was mit der Eigenschaft geschieht und welcher Wert beim Zugriff zurückgegeben wird). Im Großen und Ganzen ordnet eine Eigenschaft einem Verhalten einen Namen zu (wir können das Verhalten als Blackbox betrachten).

Es gibt zwei Arten benannter Eigenschaften:

1. Dateneigenschaft : Der Name der Eigenschaft ist einem Wert zugeordnet.
2. Accessor-Eigenschaft : Der Name der Eigenschaft ist mit einer oder zwei Accessor-Funktionen verknüpft.

Demonstration:

obj.propertyName1 = 5; //translates behind the scenes into
                       //either assigning 5 to the value field* if it is a data property
                //or calling the set function with the parameter 5 if accessor property


//*actually whether an assignment would take place in the case of a data property
//also depends on the presence and value of the writable field - on that later on

Der Typ der Eigenschaft wird von den Feldern des Deskriptors bestimmt, und eine Eigenschaft kann nicht von beiden Typen sein.

Datenbeschreibungen -

• Erforderliche Felder: value oder writable oder beides
• Optionale Felder: configurable , enumerable

Probe:

{
   value: 10,
   writable: true;
}

Accessor-Deskriptoren -

• Erforderliche Felder: get oder set oder beides
• Optionale Felder: configurable , enumerable

Probe:

{
    get: function () {
        return 10;
    },
    enumerable: true
}

Bedeutung der Felder und ihrer Standardwerte

• Diese Schlüssel sind standardmäßig auf " false .
• configurable ist nur dann true wenn der Typ dieses Eigenschaftsdeskriptors geändert werden kann und wenn die Eigenschaft aus dem entsprechenden Objekt gelöscht werden kann.
• enumerable ist true wenn und nur dann, wenn diese Eigenschaft während der Aufzählung der Eigenschaften des entsprechenden Objekts angezeigt wird.
• writable ist true dann true wenn der mit der Eigenschaft verknüpfte Wert mit einem Zuweisungsoperator geändert werden kann.

get und set :

• Diese Schlüssel sind standardmäßig undefined .
• get ist eine Funktion, die als Getter für die Eigenschaft dient, oder undefined wenn kein Getter vorhanden ist. Die Funktion return wird als Wert der Eigenschaft verwendet.
• set ist eine Funktion, die als Setter für die Eigenschaft dient, oder undefined wenn es keinen Setter gibt. Die Funktion erhält als einziges Argument den neuen Wert, der der Eigenschaft zugewiesen wird.

value :

• Dieser Schlüssel ist standardmäßig undefined .
• Der mit der Eigenschaft verknüpfte Wert. Kann ein beliebiger gültiger JavaScript-Wert sein (Anzahl, Objekt, Funktion usw.).

Beispiel:

    var obj = {propertyName1: 1}; //the pair is actually ('propertyName1', {value:1,
                                                                    // writable:true,
                                                                    // enumerable:true,
                                                                    // configurable:true})
    Object.defineProperty(obj, 'propertyName2', {get: function() {
                                                    console.log('this will be logged ' + 
                                 'every time propertyName2 is accessed to get its value');
                                                },
                                            set: function() {
                                                    console.log('and this will be logged ' + 
                                'every time propertyName2\'s value is tried to be set')
                      //will be treated like it has enumerable:false, configurable:false
                                                }});
//propertyName1 is the name of obj's data property 
//and propertyName2 is the name of its accessor property





obj.propertyName1 = 3;
console.log(obj.propertyName1); //3

obj.propertyName2 = 3; //and this will be logged every time propertyName2's value is tried to be set
console.log(obj.propertyName2); //this will be logged every time propertyName2 is accessed to get its value 

Object.getOwnPropertyDescriptor

Rufen Sie die Beschreibung einer bestimmten Eigenschaft in einem Objekt ab.

var sampleObject = {
    hello: 'world'
};

Object.getOwnPropertyDescriptor(sampleObject, 'hello');
// Object {value: "world", writable: true, enumerable: true, configurable: true}

Objektklonen

Wenn Sie eine vollständige Kopie eines Objekts wünschen (dh die Objekteigenschaften und die Werte innerhalb dieser Eigenschaften usw.), wird dies als tiefes Klonen bezeichnet .

var existing = { a: 1, b: { c: 2 } };
var copy = JSON.parse(JSON.stringify(existing));
existing.b.c = 3; // copy.b.c will not change

In JavaScript gibt es keine integrierte Funktion zum Erstellen von tiefen Klonen. Generell ist es aus vielen Gründen nicht möglich, tiefe Klone für jedes Objekt zu erstellen. Zum Beispiel,

• Objekte können nicht aufzuzählende und verborgene Eigenschaften haben, die nicht erkannt werden können.
• Objekt-Getter und -Setter können nicht kopiert werden.
• Objekte können eine zyklische Struktur haben.
• Funktionseigenschaften können in einem verborgenen Bereich vom Zustand abhängen.

Angenommen, Sie haben ein "schönes" Objekt, dessen Eigenschaften nur Grundwerte, Datumsangaben, Arrays oder andere "schöne" Objekte enthalten, dann kann die folgende Funktion zum Erstellen von tiefen Klonen verwendet werden. Es ist eine rekursive Funktion, die Objekte mit einer zyklischen Struktur erkennen kann und in solchen Fällen einen Fehler auslöst.

function deepClone(obj) {
    function clone(obj, traversedObjects) {
        var copy;
        // primitive types
        if(obj === null || typeof obj !== "object") {
            return obj;
        }

        // detect cycles
        for(var i = 0; i < traversedObjects.length; i++) {
            if(traversedObjects[i] === obj) {
                throw new Error("Cannot clone circular object.");
            }
        }

        // dates
        if(obj instanceof Date) {
            copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }
        // arrays
        if(obj instanceof Array) {
            copy = [];
            for(var i = 0; i < obj.length; i++) {
                copy.push(clone(obj[i], traversedObjects.concat(obj)));
            }
            return copy;
        }
        // simple objects
        if(obj instanceof Object) {
            copy = {};
            for(var key in obj) {
                if(obj.hasOwnProperty(key)) {
                    copy[key] = clone(obj[key], traversedObjects.concat(obj));
                }
            }
            return copy;
        }
        throw new Error("Not a cloneable object.");
    }

    return clone(obj, []);
}

Objektzuweisung

Die Object.assign () -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.

Verwenden Sie es, um einem vorhandenen Objekt Werte zuzuweisen:

var user = {
    firstName: "John"
};

Object.assign(user, {lastName: "Doe", age:39});
console.log(user); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

Oder um eine flache Kopie eines Objekts zu erstellen:

var obj = Object.assign({}, user);

console.log(obj); // Logs: {firstName: "John", lastName: "Doe", age: 39} 

Oder führen Sie viele Eigenschaften aus mehreren Objekten zu einem zusammen:

var obj1 = {
    a: 1
};
var obj2 = {
    b: 2
};
var obj3 = {
    c: 3
};
var obj = Object.assign(obj1, obj2, obj3);

console.log(obj); // Logs: { a: 1, b: 2, c: 3 }
console.log(obj1); // Logs: { a: 1, b: 2, c: 3 }, target object itself is changed

Primitive werden umbrochen, null und undefined werden ignoriert:

var var_1 = 'abc';
var var_2 = true;
var var_3 = 10;
var var_4 = Symbol('foo');

var obj = Object.assign({}, var_1, null, var_2, undefined, var_3, var_4);
console.log(obj); // Logs: { "0": "a", "1": "b", "2": "c" }

Beachten Sie, dass nur String-Wrapper über eigene aufzählbare Eigenschaften verfügen können

Verwenden Sie es als Reduzierer: (führt ein Array mit einem Objekt zusammen)

return users.reduce((result, user) => Object.assign({}, {[user.id]: user})

Iteration der Objekteigenschaften

Mit dieser Schleife können Sie auf jede Eigenschaft zugreifen, die zu einem Objekt gehört

for (var property in object) {
    // always check if an object has a property
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Sie sollten die zusätzliche Prüfung auf hasOwnProperty da ein Objekt Eigenschaften haben kann, die von der Basisklasse des Objekts geerbt werden. Wenn Sie diese Prüfung nicht durchführen, kann dies zu Fehlern führen.

var obj = { 0: 'a', 1: 'b', 2: 'c' };

Object.keys(obj).map(function(key) {
    console.log(key);
}); 
// outputs: 0, 1, 2

Eigenschaften von einem Objekt abrufen

Eigenschaften der Eigenschaften:

Eigenschaften, die von einem Objekt abgerufen werden können, können die folgenden Eigenschaften aufweisen:

• Zahlreich
• Nicht auflistbar
• besitzen

Beim Erstellen der Eigenschaften mit Object.defineProperty (s) konnten wir die Eigenschaften außer "own" festlegen. Eigenschaften, die in der direkten Ebene und nicht in der Prototypebene ( __proto__ ) eines Objekts verfügbar sind, werden als eigene Eigenschaften bezeichnet.

Die Eigenschaften, die einem Objekt ohne Object.defindProperty(ies) hinzugefügt werden, haben kein Object.defindProperty(ies) . Das heißt, es wird als wahr betrachtet.

Zweck der Zählung:

Das Festlegen von Aufzählungsmerkmalen für eine Eigenschaft besteht hauptsächlich darin, die Verfügbarkeit der jeweiligen Eigenschaft beim Abrufen der Eigenschaft aus ihrem Objekt durch Verwendung verschiedener programmatischer Methoden zu gewährleisten. Diese verschiedenen Methoden werden im Folgenden ausführlich beschrieben.

Methoden zum Abrufen von Eigenschaften:

Eigenschaften eines Objekts können mit den folgenden Methoden abgerufen werden:

1. for..in Schleife

   Diese Schleife ist sehr nützlich, um aufzählbare Eigenschaften von einem Objekt abzurufen. Zusätzlich ruft diese Schleife zahllose eigene Eigenschaften ab und führt dieselbe Abfrage durch, indem sie die Prototypkette durchläuft, bis der Prototyp als null betrachtet wird.

   //Ex 1 : Simple data
   var x = { a : 10 , b : 3} , props = [];
   
   for(prop in x){
     props.push(prop);
   }
   
   console.log(props); //["a","b"]
   
   //Ex 2 : Data with enumerable properties in prototype chain
   var x = { a : 10 , __proto__ : { b : 10 }} , props = [];
   
   for(prop in x){
     props.push(prop);
   }
   
   console.log(props); //["a","b"]
   
   //Ex 3 : Data with non enumerable properties
   var x = { a : 10 } , props = [];
   Object.defineProperty(x, "b", {value : 5, enumerable : false});
   
   for(prop in x){
     props.push(prop);
   }
   
   console.log(props); //["a"]
   

2. Funktion Object.keys()

   Diese Funktion wurde als Teil von EcmaScript 5 vorgestellt. Sie wird verwendet, um aufzählbare eigene Eigenschaften von einem Objekt abzurufen. Vor seiner Veröffentlichung holte man eigene Eigenschaften von einem Objekt ab, indem er for..in loop und Object.prototype.hasOwnProperty() Funktion kombinierte.

   //Ex 1 : Simple data
   var x = { a : 10 , b : 3} , props;
   
   props = Object.keys(x);
   
   console.log(props); //["a","b"]
   
   //Ex 2 : Data with enumerable properties in prototype chain
   var x = { a : 10 , __proto__ : { b : 10 }} , props;
   
   props = Object.keys(x);
   
   console.log(props); //["a"]
   
   //Ex 3 : Data with non enumerable properties
   var x = { a : 10 } , props;
   Object.defineProperty(x, "b", {value : 5, enumerable : false});
   
   props = Object.keys(x);
   
   console.log(props); //["a"]
   

3. Object.getOwnProperties() Funktion

   Diese Funktion ruft sowohl aufzählbare als auch nicht aufzählbare eigene Eigenschaften von einem Objekt ab. Es wurde auch als Teil von EcmaScript 5 veröffentlicht.

   //Ex 1 : Simple data
   var x = { a : 10 , b : 3} , props;
   
   props = Object.getOwnPropertyNames(x);
   
   console.log(props); //["a","b"]
   
   //Ex 2 : Data with enumerable properties in prototype chain
   var x = { a : 10 , __proto__ : { b : 10 }} , props;
   
   props = Object.getOwnPropertyNames(x);
   
   console.log(props); //["a"]
   
   //Ex 3 : Data with non enumerable properties
   var x = { a : 10 } , props;
   Object.defineProperty(x, "b", {value : 5, enumerable : false});
   
   props = Object.getOwnPropertyNames(x);
   
   console.log(props); //["a", "b"]
   

Verschiedenes :

Eine Technik zum Abrufen aller Eigenschaften (eigene, aufzählbare, nicht aufzählbare Eigenschaften, alle Prototypebenen) von einem Objekt ist unten angegeben.

function getAllProperties(obj, props = []){
  return obj == null ? props :
           getAllProperties(Object.getPrototypeOf(obj),
               props.concat(Object.getOwnPropertyNames(obj)));
}

var x = {a:10, __proto__ : { b : 5, c : 15 }};

//adding a non enumerable property to first level prototype
Object.defineProperty(x.__proto__, "d", {value : 20, enumerable : false});

console.log(getAllProperties(x)); ["a", "b", "c", "d", "...other default core props..."]

Dies wird von den Browsern unterstützt, die EcmaScript 5 unterstützen.

Konvertieren Sie die Werte des Objekts in ein Array

Angesichts dieses Objekts:

var obj = {
    a: "hello",
    b: "this is",
    c: "javascript!",
};

Sie können seine Werte in ein Array konvertieren, indem Sie Folgendes tun:

var array = Object.keys(obj)
    .map(function(key) {
        return obj[key];
    });

console.log(array); // ["hello", "this is", "javascript!"]

Iteration über Objekteinträge - Object.entries ()

const obj = {
    one: 1,
    two: 2,
    three: 3
};

Object.entries(obj);

[
    ["one", 1],
    ["two", 2],
    ["three", 3]
]

for(const [key, value] of Object.entries(obj)) {
    console.log(key); // "one", "two" and "three"
    console.log(value); // 1, 2 and 3
}

Object.values ​​()

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']