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
Linda HamiltonOriginal
2024-11-09 17:02:02350Durchsuche

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' }
}

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' }
}

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);

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!

Stellungnahme:
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