Verwendung von Object.fromEntries und Object.entries

object.entries() Konvertieren Sie ein Objekt in ein Array. Aber was ist, wenn Sie das Gegenteil tun möchten? Kein Nachdenken mehr! Verwenden Sie Object.fromEntries(), um ein Array in ein Objekt umzuwandeln.

const keyValuePair = [
  ['cow', 'val1'],
  ['pig', 'val2'],
];
Object.fromEntries(keyValuePair);
// { cow: 'val1', pig: 'val2' }

Object.fromEntries

Lassen Sie uns zunächst die Anatomie eines Objekts erläutern. Ein Objekt ist etwas mit einem Schlüssel und einem Wert.

const object = {
  key: 'value',
};

Wenn wir etwas in ein Objekt umwandeln wollen, müssen wir etwas mit diesen beiden Anforderungen übergeben: key und value.

Es gibt zwei Parameter, die diese Anforderungen erfüllen:

1. Array mit verschachtelten Schlüssel-Wert-Paaren
2. Map-Objekt

Objekt verwenden .fromEntries Array in Objekt konvertieren

Dies ist ein verschachteltes Array mit Schlüssel-Wert-Paaren

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
];

Wenn wir Object.fromEntries darauf anwenden, können wir das Objekt daraus erhalten.

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

Verwenden Sie Object.fromEntries, um Map in ein Objekt zu konvertieren

JavaScript ES6 bringt uns ein neues Objekt namens Map, das Objekten sehr ähnlich ist.

Lassen Sie uns ein neues Map-Objekt erstellen

// 使用构造函数
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
]);
// 或者我们可以使用实例方法，"set"
const map = new Map();
map.set('key 1', 'value 1');
map.set('key 2', 'value 2');
// 结果
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

Jetzt konvertieren wir Map in ein Objekt mit Object.fromEntries

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}

Typfehler bei Object.fromEntries mit anderen Typen

Seien Sie vorsichtig, wenn Sie versuchen, andere Datentypen an Object.fromEntries zu übergeben, da dies alle einen Fehler auslöst

❌Uncaught TypeError

Stellen Sie sicher, dass Sie nur Schlüssel-Wert-Paare übergeben.

Object.fromEntries vs. Object.entries

Object.fromEntries hat den gegenteiligen Effekt von Object.entries . Object. entries transformiert also unser Array und gibt ein neues verschachteltes Array von Schlüssel-Wert-Paaren zurück. Und Object.fromEntries wandelt das Array wieder in ein Objekt um.

const object = { key1: 'value1', key2: 'value2' };
const array = Object.entries(object);
// [ ["key1", "value1"], ["key2", "value2"] ]
Object.fromEntries(array);
// { key1: 'value1', key2: 'value2' }

Objekt-zu-Objekt-Konvertierung

Wenn Sie den ursprünglichen TC39-Vorschlag lesen, ist dies der Grund, warum diese neue Methode eingeführt wurde. Mit der Einführung von Object.entries gibt es keine einfache Möglichkeit, das Ergebnis wieder in ein Objekt umzuwandeln.

Im Allgemeinen entscheiden wir uns für die Verwendung von Object.entries, weil es uns Zugriff auf viele praktische Array-Methoden wie filter verschafft. Aber nach der Konvertierung stecken wir ein wenig bei diesem Array fest.

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "v2"], ["carrot", "v3"] ]

Wir können all diese nützlichen Array-Methoden nutzen und trotzdem unsere Objekte zurückbekommen und schließlich von Objekt zu Objekt konvertieren.

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: 'v2', carrot: 'v3' }

Browser-Unterstützung

Außer Internet Explorer unterstützen die meisten gängigen Browser diese Methode.

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonVerwendung von Object.fromEntries und Object.entries. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!