Wie man eine Untermenge der Eigenschaften eines JavaScript-Objekts erhält

Question

Sagen wir, ich habe ein Objekt:

elmo = { 
  color: 'rot',
  annoying: true,
  height: 'unbekannt',
  meta: { one: '1', two: '2'}
};

Ich möchte ein neues Objekt mit einem Teil seiner Eigenschaften erstellen.

 // Pseudocode
 subset = elmo.slice('color', 'height')

 //=> { color: 'rot', height: 'unbekannt' }

Wie kann ich das erreichen?

Answer 1

Ich füge diese Antwort hinzu, weil keine der Antworten den Komma-Operator verwendet hat.

Es ist sehr einfach mit Destrukturierungs-Zuweisung und dem ,-Operator

const object = { a: 5, b: 6, c: 7  };
const picked = ({a,c} = object, {a,c})

console.log(picked);

Answer 2

Noch eine Lösung:

var subset = {
   color: elmo.color,
   height: elmo.height 
}

Dies sieht für mich weit lesbarer aus als so ziemlich jede andere Antwort bisher, aber vielleicht bin das nur ich!

Answer 3

Es ist nichts in die Kernbibliothek eingebaut, aber Sie können Objektzerstörung verwenden, um es zu tun...

const {color, height} = sourceObject;
const newObject = {color, height};

Sie könnten auch eine Hilfsfunktion schreiben, um es zu tun...

const cloneAndPluck = function(sourceObject, keys) {
    const newObject = {};
    keys.forEach((obj, key) => { newObject[key] = sourceObject[key]; });
    return newObject;
};

const subset = cloneAndPluck(elmo, ["color", "height"]);

Bibliotheken wie Lodash haben auch _.pick().

Answer 4

TypeScript-Lösung:

function pick(
  obj: T,
  paths: Array
): Pick {
  const ret = Object.create(null);
  for (const k of paths) {
    ret[k] = obj[k];
  }
  return ret;
}

Die Typisierung ermöglicht sogar Auto-Vervollständigung:

Kredit an DefinitelyTyped für den U extends keyof T Trick!

TypeScript Playground

Answer 5

Ich möchte hier eine sehr gute Zusammenstellung erwähnen:

pick-es2019.js

Object.fromEntries(
  Object.entries(obj)
  .filter(([key]) => ['whitelisted', 'keys'].includes(key))
);

pick-es2017.js

Object.entries(obj)
.filter(([key]) => ['whitelisted', 'keys'].includes(key))
.reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {});

pick-es2015.js

Object.keys(obj)
.filter((key) => ['whitelisted', 'keys'].indexOf(key) >= 0)
.reduce((newObj, key) => Object.assign(newObj, { [key]: obj[key] }), {})

omit-es2019.js

Object.fromEntries(
  Object.entries(obj)
  .filter(([key]) => !['blacklisted', 'keys'].includes(key))
);

omit-es2017.js

Object.entries(obj)
.filter(([key]) => !['blacklisted', 'keys'].includes(key))
.reduce((obj, [key, val]) => Object.assign(obj, { [key]: val }), {});

omit-es2015.js

Object.keys(obj)
.filter((key) => ['blacklisted', 'keys'].indexOf(key) < 0)
.reduce((newObj, key) => Object.assign(newObj, { [key]: obj[key] }), {})