Heim > Web-Frontend > js-Tutorial > Wie filtere ich Objekteigenschaften nach Schlüssel in ES6?

Wie filtere ich Objekteigenschaften nach Schlüssel in ES6?

Linda Hamilton
Freigeben: 2024-11-09 17:02:02
Original
334 Leute haben es durchsucht

How to Filter Object Properties by Key in ES6?

Objekteigenschaften nach Schlüssel in ES6 filtern

In JavaScript ist es häufig erforderlich, Objekteigenschaften nach bestimmten Kriterien zu filtern. ES6 bietet eine saubere und effiziente Möglichkeit, dies durch Spread-Operatoren zu erreichen.

Problem:

Angenommen ein Objekt wie:

{
  item1: { key: 'sdfd', value: 'sdfd' },
  item2: { key: 'sdfd', value: 'sdfd' },
  item3: { key: 'sdfd', value: 'sdfd' }
}
Nach dem Login kopieren

Das Ziel besteht darin, ein neues Objekt zu erstellen, das nur Eigenschaften mit bestimmten Schlüsseln enthält, z als:

{
  item1: { key: 'sdfd', value: 'sdfd' },
  item3: { key: 'sdfd', value: 'sdfd' }
}
Nach dem Login kopieren

Lösung:

ES6 ermöglicht es uns, Objekteigenschaften mithilfe einer Kombination der Methoden Object.keys() und Array.filter() zu filtern. gefolgt von der Array.reduce()-Methode zum Erstellen des neuen Objekts.

Der bereitgestellte Code demonstriert diesen Ansatz:

const raw = {
  item1: { key: 'sdfd', value: 'sdfd' },
  item2: { key: 'sdfd', value: 'sdfd' },
  item3: { key: 'sdfd', value: 'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    obj[key] = raw[key];
    return obj;
  }, {});

console.log(filtered);
Nach dem Login kopieren

In dieser Code:

  1. Object.keys(raw) extrahiert die Objektschlüssel in ein Array.
  2. Array.filter(key => erlaubt.includes(key)) filtert die Schlüssel basierend auf den zulässigen Werten.
  3. Array.reduce((obj, key) => { /* ... */ }, {}) reduziert das gefilterte Schlüssel in ein neues Objekt ein und kopiert die entsprechenden Eigenschaftswerte vom Originalobjekt.

Das obige ist der detaillierte Inhalt vonWie filtere ich Objekteigenschaften nach Schlüssel in ES6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage