Propriétés de l’objet filtre par clé dans l’ES6

Question

Disons que j’ai ai un objet :

Je veux créer un autre objet en filtrant l’objet ci-dessus, donc j’ai quelque chose comme.

Je cherche une manière propre à y parvenir en utilisant Es6, donc propagation opérateurs sont disponibles pour moi. Merci !

Answer 1

Si vous avez une liste de valeurs autorisées, vous pouvez facilement conserver dans un objet à l'aide de:

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

Il utilise:

1. Object.keys à la liste de toutes les propriétés en raw (données d'origine), puis
2. Array.prototype.filter pour sélectionner les touches qui sont présents dans la liste autorisée, à l'aide de
   1. Array.prototype.includes pour s'assurer qu'ils sont présents
3. Array.prototype.reduce de construire un nouvel objet avec seulement le permis de propriétés.

Cela permettra de faire une copie avec le permis propriétés (mais ne pas copier les propriétés elles-mêmes).

Vous pouvez également utiliser l'objet de la propagation de l'opérateur pour créer une série d'objets, sans mutation (grâce à rjerue de mentionner cela):

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) => {
    return {
      ...obj,
      [key]: raw[key]
    };
  }, {});

console.log(filtered);

Pour les fins de l'anecdote, si vous vouliez supprimer les indésirables les champs à partir des données d'origine (qui je ne serait pas vous recommandons de le faire, puisqu'il implique des moches, des mutations), vous pouvez inverser la includes vérifier:

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

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

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

Je suis, y compris cet exemple pour montrer qu'une mutation à base de solution, mais je vous suggère de ne pas l'utiliser.

Answer 2

Si vous êtes OK avec l'aide de ES6 syntaxe, je trouve que la façon la plus propre de le faire, comme indiqué ici et ici est:

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

const { item2, ...newData } = data;

Maintenant, newData contient:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

Ou, si vous avez la clé stockée comme une chaîne de caractères:

const key = 'item2';
const { [key]: _, ...newData } = data;

Dans ce dernier cas, [key] est converti item2 , mais comme vous utilisez un const d'affectation, vous devez spécifier un nom pour la tâche. _ représente un jeter de la valeur.

Plus généralement:

const { item2, ...newData } = data; // Assign item2 to item2
const { item2: someVarName, ...newData } = data; // Assign item2 to someVarName
const { item2: _, ...newData } = data; // Assign item2 to _
const { ['item2']: _, ...newData } = data; // Convert string to key first, ...

Cela ne fait pas que réduire votre exploitation à un one-liner, mais il ne vous obligent pas à savoir ce que les autres touches sont (ceux que vous souhaitez conserver).

Answer 3

Rien de ce qui n’a pas été dit avant, mais pour combiner des réponses à un général ES6 réponse :

<div class="snippet" data-babel="true" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code">

</div></div>

Answer 4

La façon plus propre, que vous pouvez trouver est avec Lodash #pick

Answer 5

Juste une autre solution en une seule ligne de code.

Je jouais avec fonction «Destructuring» :

<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code">

</div></div>