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

Sie können auch Lodash verwenden.

var subset = _.pick(elmo ,'color', 'height');

Ergänzend, nehmen wir an, Sie haben ein Array von "Elmo"s :

elmos = [{ 
      color: 'rot',
      nervig: true,
      höhe: 'unbekannt',
      meta: { eins: '1', zwei: '2'}
    },{ 
      color: 'blau',
      nervig: true,
      höhe: 'bekannt',
      meta: { eins: '1', zwei: '2'}
    },{ 
      color: 'gelb',
      nervig: false,
      höhe: 'unbekannt',
      meta: { eins: '1', zwei: '2'}
    }
];

Wenn Sie dasselbe Verhalten wollen, können Sie einfach mit lodash folgendes tun:

var subsets = _.map(elmos, function(elm) { return _.pick(elm, 'color', 'height'); });

Answer 2

Die Zerlegung in dynamisch benannte Variablen ist in JavaScript nicht möglich, wie in dieser Frage diskutiert.

Um Schlüssel dynamisch zu setzen, können Sie die reduce-Funktion ohne Objektmutation wie folgt verwenden:

const getSubset = (obj, ...keys) => keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});

const elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
}

const subset = getSubset(elmo, 'color', 'annoying');
console.log(subset)

Sollte beachtet werden, dass bei jeder Iteration ein neues Objekt erstellt wird, anstatt eine einzelne Kopie zu aktualisieren. – mpen

Im Folgenden finden Sie eine Version, die reduce mit einer einzelnen Kopie verwendet (Aktualisierung des an reduce übergebenen anfänglichen Werts).

const getSubset = (obj, ...keys) => keys.reduce((acc, curr) => {
  acc[curr] = obj[curr]
  return acc
}, {})

const elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
}

const subset = getSubset(elmo, 'annoying', 'height', 'meta');
console.log(subset)

Answer 3

Dynamische Lösung

['color', 'height'].reduce((a,b) => (a[b]=elmo[b],a), {})

let subset= (obj,keys)=> keys.reduce((a,b)=> (a[b]=obj[b],a),{});

// TEST

let elmo = { 
  color: 'red',
  annoying: true,
  height: 'unknown',
  meta: { one: '1', two: '2'}
};

console.log( subset(elmo, ['color', 'height']) );

Answer 4

Der einfachste Weg, den ich gefunden habe, der keine unnötigen Variablen erstellt, ist eine Funktion, die Sie aufrufen können und die identisch mit lodash funktioniert, lautet:

pick(obj, keys){
    return  Object.assign({}, ...keys.map(key => ({ [key]: obj[key] })))
}

Zum Beispiel:

pick(obj, keys){
    return  Object.assign({}, ...keys.map(key => ({ [key]: obj[key] })))
}
const obj = {a:1, b:2, c:3, d:4}
const keys = ['a', 'c', 'f']
const picked = pick(obj,keys)
console.log(picked)

pick = (obj, keys) => {
  return Object.assign({}, ...keys.map(key => ({
    [key]: obj[key]
  })))
}

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
const keys = ['a', 'c', 'f']

const picked = pick(obj, keys)
console.log(picked)

Answer 5

Ein Array von Objekten

const aListOfObjects = [{
    prop1: 50,
    prop2: "Nichts",
    prop3: "hallo",
    prop4: "Was ist los",
  },
  {
    prop1: 88,
    prop2: "Egal",
    prop3: "Welt",
    prop4: "Du verstehst es",
  },
]

Ein Subset eines Objekts oder Objekten zu erstellen, kann erreicht werden, indem man das Objekt auf diese Weise destrukturiert.

const sections = aListOfObjects.map(({prop1, prop2}) => ({prop1, prop2}));