Schlüssel eines JavaScript-Objekts abrufen

1. Schlüssel eines Javascript-Objekts mit der Methode Object.keys() abrufen
2. Schlüssel eines Javascript-Objekts mit der Methode Object.entries(obj) abrufen
3. Holen Sie sich den Schlüssel eines Javascript-Objekts mit der for-Schleife

Ein Javascript-Objekt ist eine Sammlung von Schlüssel-Wert-Paaren. Wir brauchen einen Schlüssel, um seinen Wert von einem Javascript-Objekt zu erhalten. Schlüssel-Wert-Paare werden häufig in der Client-Server-Kommunikation und in der JavaScript-Programmierung verwendet. Wir wissen, dass ein Wert aus einem JSON-Objekt abgerufen wird, vorausgesetzt, wir haben seinen Schlüssel. Aber was ist, wenn wir den Schlüssel-Namen nicht haben? Wie erhalten wir seinen Wert aus dem JavaScript-Objekt? Sehen wir uns einige Möglichkeiten an, wie wir die Schlüssel von einem Javascript-Objekt erhalten können.

Schlüssel eines Javascript-Objekts mit der Methode Object.keys() abrufen

Die Funktion Object.keys() gibt ein Array zurück, das die Schlüssel des Javascript-Objekts enthält. Wir übergeben das Javascript-Objekt als Parameter an die Funktion Object.keys(). Das Ausgabearray enthält die Schlüssel in derselben Reihenfolge, in der sie sich im ursprünglichen Javascript-Objekt befinden. Wenn wir ein Array an Object.keys() übergeben, gibt es die Array-Indizes als Ausgabe zurück. Und das Parameterobjekt enthält Indizes, dann gibt Object.keys() ein Array dieser Indizes zurück. Beziehen Sie sich auf den folgenden Code, um die Verwendung und das Verhalten der Funktion Object.keys() zu verstehen.

var fruitsArr1 = ['Apple', 'Orange', 'Mango', 'Banana'];
var fruitsObj2 = {0: 'Apple', 4: 'Orange', 2: 'Mango', 3: 'Banana'};
var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(Object.keys(fruitsArr1));
console.log(Object.keys(fruitsObj2));
console.log(Object.keys(fruitsObj3));

Ausgabe:

["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]

Wenn es sich bei den Schlüsseln um Zahlen handelt, gibt die Funktion Object.keys() ein Array der numerischen Schlüssel in sortierter Reihenfolge zurück. Das fruitsObj2 hat die nummerierten Tasten 0, 4, 2, 3. Aber wenn wir die Funktion Object.Keys() anwenden, gibt sie die Schlüssel als ["0", "2", "3", "4"] in sortierter Reihenfolge zurück. Der Schlüsselwert enthält weiterhin dieselbe Wertzuordnung wie für das ursprüngliche Javascript-Objekt. Zum Beispiel hält fruitsObj2 4: "Orange" und bei 2: "Mango", aber Object.keys(fruitsObj2) hat ihre Reihenfolge als 2`, `4 zurückgegeben. Wenn wir console.log deren Werte an den Tasten 2 und 4 wären, bekommen wir die richtigen Werte als Ausgabe. Somit hat die Funktion nichts am eigentlichen Key-Value-Mapping geändert, auch wenn Object.keys die numerischen Schlüssel eines Arrays oder eines Objekts in sortierter Reihenfolge zurückliefert. Siehe den folgenden Code.

console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);

Ausgabe:

Mango
Orange

Schlüssel eines Javascript-Objekts mit der Methode Object.entries(obj) abrufen

Die Methode Object.entries(obj) ist vielfältig und flexibler als die Funktion Object.keys(). Es teilt das gesamte Objekt in kleine Arrays auf. Jedes Array besteht aus Schlüssel-Wert-Paaren in der Form [Schlüssel, Wert]. Mit Object.keys() erhalten wir nur die Schlüssel eines Objekts, aber mit Object.entries(obj) können wir alle Einträge in einem Objekt abrufen, einschließlich der Schlüssel und ihrer Werte. Object.entries(obj) ist keine häufig verwendete Methode. In den meisten Szenarien müssen wir die Schlüssel von einem Objekt abrufen. Die entsprechenden Werte können einfach mit Hilfe von Schlüssel abgerufen werden.

Syntax

Object.entries(object)

Parameter

Wie bei der Methode Object.keys() akzeptiert die Object.entries(obj) das javascript object als Parameter.

Zurückkehren

Object.entries(obj) gibt die in Arrays zerlegten Schlüssel-Wert-Paare zurück. Der Rückgabetyp ist ein Array von Arrays, wobei jedes Unterarray zwei Elemente enthält: den Schlüssel und den Wert. Etwas wie [[Schlüssel1, Wert1], [Schlüssel2, Wert2], [Schlüssel3, Wert3] ... ]. Die Funktion behält die Reihenfolge der Objektattribute bei. Bei der Implementierung hinter den Kulissen werden die Schlüssel-Wert-Paare durch Iteration über die Objekteigenschaften gebildet. Sehen Sie sich den folgenden Code an, um das Verhalten der Funktion Object.entries() besser zu verstehen. Wir verwenden JSON.stringify(), um eine für Menschen lesbare String-Version der von der Funktion ausgegebenen Werte zu erhalten.

var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(JSON.stringify(Object.entries(fruitsObj3)));

Ausgabe:

"[["id","1"],["name","mango"],["color","yellow"]]"

Wir können die Object.entries() auf andere Weise verwenden. Wir können über das Javascript-Objekt iterieren und die Attributschlüssel und ihre Werte protokollieren. Der Ansatz wird im folgenden Codeausschnitt dargestellt.

for (const [key, value] of Object.entries(fruitsObj3)) {
  console.log(`${key}: ${value}`);
}

Ausgabe:

id: 1
name: mango
color: yellow

Wenn wir daran interessiert sind, nur den Schlüssel aus der Funktion Object.entries() zu erhalten, können wir den Schlüssel protokollieren und den Wertteil verwerfen.

Holen Sie sich den Schlüssel eines Javascript-Objekts mit der for-Schleife

Können wir eine einfache for-Schleife verwenden, um die Schlüssel von einem Objekt zu erhalten? Es ist kein allgemein bekanntes Merkmal einer for-Schleife. Wir können jedes Javascript-Objekt durchlaufen, wie wir es für Arrays tun, indem wir die for-in-Kombination verwenden. Es iteriert durch jeden Parameter, wobei das i (der Iterator) den Schlüssel des Objekts hält und das Objekt[i] den Wert hält, der dem Schlüssel im Objekt entspricht. Schauen wir uns den folgenden Code an, um das Konzept besser zu verstehen.

var obj = {'id': '1', 'name': 'mango', 'color': 'green'};
for (let i in obj) {
  console.log(i);       // key
  console.log(obj[i]);  // value against the key
}

Ausgabe:

id
1
name
mango
color
green

var a = {
  'id': '1',
  'name': 'mango',
  'color': {'name': 'yellow', 'appearance': 'bright'}
};
for (let i in a) {
  console.log(i);
  console.log(a[i]);
}

Ausgabe:

id
1
name
mango
color
{name: "yellow", appearance: "bright"}