Disons que j'ai un objet:

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

Je veux créer un nouvel objet avec un sous-ensemble de ses propriétés.

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

 //=> { color: 'red', height: 'unknown' }

Comment puis-je y parvenir?

Utilisation de la déstructuration d'objets et de la sténographie des propriétés

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

console.log(picked); // { a: 5, c: 7 }

De Philipp Kewisch:

Il s'agit simplement d'une fonction anonyme appelée instantanément. Tout cela se trouve sur la page Affectation des destructions sur MDN. Voici un formulaire développé

let unwrap = ({a, c}) => ({a, c});

let unwrap2 = function({a, c}) { return { a, c }; };

let picked = unwrap({ a: 5, b: 6, c: 7 });

let picked2 = unwrap2({a: 5, b: 6, c: 7})

console.log(picked)
console.log(picked2)

Je suggère de jeter un œil à Lodash ; il a beaucoup de grandes fonctions utilitaires.

Par exemple, ce pick()serait exactement ce que vous recherchez:

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

violon

Si vous utilisez ES6, il existe un moyen très concis de le faire en utilisant la déstructuration. La déstructuration vous permet d'ajouter facilement des objets à l'aide d'une répartition, mais elle vous permet également de créer des objets de sous-ensemble de la même manière.

const object = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd',
}

// Remove "c" and "d" fields from original object:
const {c, d, ...partialObject} = object;
const subset = {c, d};

console.log(partialObject) // => { a: 'a', b: 'b'}
console.log(subset) // => { c: 'c', d: 'd'};

Bien qu'il soit un peu plus verbeux, vous pouvez accomplir ce que tout le monde recommandait le soulignement / lodash il y a 2 ans, en utilisant Array.prototype.reduce .

var subset = ['color', 'height'].reduce(function(o, k) { o[k] = elmo[k]; return o; }, {});

Cette approche le résout de l'autre côté: plutôt que de prendre un objet et de lui passer des noms de propriété à extraire, de prendre un tableau de noms de propriété et de les réduire en un nouvel objet.

Bien qu'il soit plus détaillé dans le cas le plus simple, un rappel ici est assez pratique, car vous pouvez facilement répondre à certaines exigences courantes, par exemple changer la propriété 'color' en 'color' sur le nouvel objet, aplatir les tableaux, etc. - n'importe lequel des les choses que vous devez faire lorsque vous recevez un objet d'un service / bibliothèque et que vous créez un nouvel objet nécessaire ailleurs. Bien que le soulignement / lodash soient d'excellentes bibliothèques bien implémentées, c'est mon approche préférée pour moins de dépendance vis-à-vis des fournisseurs, et une approche plus simple et plus cohérente lorsque ma logique de construction de sous-ensemble devient plus complexe.

edit: version es7 du même:

const subset = ['color', 'height'].reduce((a, e) => (a[e] = elmo[e], a), {});

edit: Un bel exemple pour le curry, aussi! Avoir une fonction 'pick' renvoie une autre fonction.

const pick = (...props) => o => props.reduce((a, e) => ({ ...a, [e]: o[e] }), {});

Ce qui précède est assez proche de l'autre méthode, sauf qu'il vous permet de créer un «sélecteur» à la volée. par exemple

pick('color', 'height')(elmo);

Ce qui est particulièrement intéressant avec cette approche, c'est que vous pouvez facilement passer les «choix» choisis dans tout ce qui prend une fonction, par exemple Array#map:

[elmo, grover, bigBird].map(pick('color', 'height'));
// [
//   { color: 'red', height: 'short' },
//   { color: 'blue', height: 'medium' },
//   { color: 'yellow', height: 'tall' },
// ]

Déstructuration ES6

La syntaxe de déstructuration permet de déstructurer et de recombiner un objet, avec des paramètres de fonction ou des variables.

La limitation est qu'une liste de clés est prédéfinie, elles ne peuvent pas être répertoriées comme des chaînes, comme le mentionne la question. La déstructuration devient plus compliquée si une clé n'est pas alphanumérique, par exemple foo_bar.

L'inconvénient est que cela nécessite de dupliquer une liste de clés, ce qui entraîne un code détaillé au cas où une liste est longue. Étant donné que la déstructuration duplique la syntaxe littérale des objets dans ce cas, une liste peut être copiée et collée telle quelle.

L'avantage est que c'est une solution performante qui est naturelle pour ES6.

IIFE

let subset = (({ foo, bar }) => ({ foo, bar }))(obj); // dupe ({ foo, bar })

Variables temporaires

let { foo, bar } = obj;
let subset = { foo, bar }; // dupe { foo, bar }

Une liste de chaînes

La liste arbitraire des clés sélectionnées se compose de chaînes, comme l'exige la question. Cela permet de ne pas les prédéfinir et d'utiliser des variables qui contiennent des noms de clés, comme pick(obj, 'foo', someKey, ...moreKeys).

Une doublure devient plus courte avec chaque édition JS.

ES5

var subset = Object.keys(obj)
.filter(function (key) { 
  return ['foo', 'bar'].indexOf(key) >= 0;
})
.reduce(function (obj2, key) {
  obj2[key] = obj[key];
  return obj2;
}, {});

ES6

let subset = Object.keys(obj)
.filter(key => ['foo', 'bar'].indexOf(key) >= 0)
.reduce((obj2, key) => Object.assign(obj2, { [key]: obj[key] }), {});

Ou avec un opérateur virgule:

let subset = Object.keys(obj)
.filter(key => ['foo', 'bar'].indexOf(key) >= 0)
.reduce((obj2, key) => (obj2[key] = obj[key], obj2), {});

ES2019

ECMAScript 2017 a Object.entrieset Array.prototype.includes, ECMAScript 2019 a Object.fromEntries, ils peuvent être polyfilled en cas de besoin et rendre la tâche plus facile:

let subset = Object.fromEntries(
  Object.entries(obj)
  .filter(([key]) => ['foo', 'bar'].includes(key))
)

Un one-liner peut être réécrit comme une fonction d'assistance similaire à Lodashpick ou omitoù la liste des clés est passée par des arguments:

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

let subset = pick({ foo: 1, qux: 2 }, 'foo', 'bar'); // { foo: 1 }

Une note sur les clés manquantes

La principale différence entre la déstructuration et la fonction conventionnelle de type Lodash pickest que la déstructuration inclut des clés choisies inexistantes avec une undefinedvaleur dans un sous-ensemble:

(({ foo, bar }) => ({ foo, bar }))({ foo: 1 }) // { foo: 1, bar: undefined }

Ce comportement peut être souhaitable ou non. Il ne peut pas être modifié pour la syntaxe de déstructuration.

Alors que pickpeut être modifié pour inclure les clés manquantes en itérant une liste de clés sélectionnées à la place:

let inclusivePick = (obj, ...keys) => Object.fromEntries(
  keys.map(key => [key, obj[key]])
);

let subset = inclusivePick({ foo: 1, qux: 2 }, 'foo', 'bar'); // { foo: 1, bar: undefined }

Il n'y a rien de tel que intégré à la bibliothèque principale, mais vous pouvez utiliser la déstructuration d'objets pour le faire ...

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

Vous pouvez également écrire une fonction utilitaire le faire ...

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

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

Des bibliothèques comme Lodash en ont également _.pick().

J'ajoute cette réponse car aucune des réponses n'a été utilisée Comma operator.

C'est très facile avec destructuring assignmentet ,opérateur

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

console.log(picked);

Avec une certaine amélioration pour l'attribution des propriétés dynamiques, cela pourrait ressembler à ceci:

Encore une solution:

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

Cela me semble beaucoup plus lisible que n'importe quelle réponse jusqu'à présent, mais peut-être que c'est juste moi!

Vous pouvez également utiliser Lodash .

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

En complément, disons que vous avez un ensemble de "elmo":

elmos = [{ 
      color: 'red',
      annoying: true,
      height: 'unknown',
      meta: { one: '1', two: '2'}
    },{ 
      color: 'blue',
      annoying: true,
      height: 'known',
      meta: { one: '1', two: '2'}
    },{ 
      color: 'yellow',
      annoying: false,
      height: 'unknown',
      meta: { one: '1', two: '2'}
    }
];

Si vous voulez le même comportement, en utilisant lodash, vous devez simplement:

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

La déstructuration en variables nommées dynamiquement est impossible en JavaScript comme discuté dans cette question .

Pour définir des clés de manière dynamique , vous pouvez utiliser la fonction de réduction sans mutation d'objet comme suit:

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)

Vous devriez noter que vous créez un nouvel objet à chaque itération au lieu de mettre à jour un seul clone. - mpen

ci-dessous est une version utilisant réduire avec un seul clone (mise à jour de la valeur initiale transmise pour réduire).

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)

Solution TypeScript:

export function pick<T extends object, U extends keyof T>(obj: T, paths: Array<U>) {
    return paths.reduce((o, k) => {
        o[k] = obj[k];
        return o;
    }, Object.create(null));
}

Les informations de saisie permettent même la saisie semi-automatique:

Crédit à DefinitelyTyped pour U extends keyof Tastuce!

Utilisez la pickméthode de la bibliothèque lodash si vous l'utilisez déjà.

var obj = { 'a': 1, 'b': '2', 'c': 3 };

_.pick(object, ['a', 'c']);

// => { 'a': 1, 'c': 3 }

https://lodash.com/docs/4.17.10#pick

Solution dynamique

['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']) );

Juste une autre façon ...

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

var subset = [elmo].map(x => ({
  color: x.color,
  height: x.height
}))[0]

Vous pouvez utiliser cette fonction avec un tableau d'objets =)

Que diriez-vous:

function sliceObj(obj) {
  var o = {}
    , keys = [].slice.call(arguments, 1);
  for (var i=0; i<keys.length; i++) {
    if (keys[i] in obj) o[keys[i]] = obj[keys[i]];
  }
  return o;
}

var subset = sliceObj(elmo, 'color', 'height');

Cela fonctionne pour moi dans la console Chrome. Un problème avec ça?

var { color, height } = elmo
var subelmo = { color, height }
console.log(subelmo) // {color: "red", height: "unknown"}

Affectation destructrice avec propriétés dynamiques

Cette solution s'applique non seulement à votre exemple spécifique mais est plus généralement applicable:

const subset2 = (x, y) => ({[x]:a, [y]:b}) => ({[x]:a, [y]:b});

const subset3 = (x, y, z) => ({[x]:a, [y]:b, [z]:c}) => ({[x]:a, [y]:b, [z]:c});

// const subset4...etc.


const o = {a:1, b:2, c:3, d:4, e:5};


const pickBD = subset2("b", "d");
const pickACE = subset3("a", "c", "e");


console.log(
  pickBD(o), // {b:2, d:4}
  pickACE(o) // {a:1, c:3, e:5}
);

Vous pouvez facilement définir subset4etc. pour prendre en compte plus de propriétés.

Bon vieux Array.prototype.reduce:

const selectable = {a: null, b: null};
const v = {a: true, b: 'yes', c: 4};

const r = Object.keys(selectable).reduce((a, b) => {
  return (a[b] = v[b]), a;
}, {});

console.log(r);

cette réponse utilise l'opérateur virgule magique, également: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

si vous voulez devenir vraiment chic, c'est plus compact:

const r = Object.keys(selectable).reduce((a, b) => (a[b] = v[b], a), {});

Tout rassembler dans une fonction réutilisable:

const getSelectable = function (selectable, original) {
  return Object.keys(selectable).reduce((a, b) => (a[b] = original[b], a), {})
};

const r = getSelectable(selectable, v);
console.log(r);

1. convertir des arguments en tableau

2. utiliser Array.forEach()pour choisir la propriété

   Object.prototype.pick = function(...args) {
      var obj = {};
      args.forEach(k => obj[k] = this[k])
      return obj
   }
   var a = {0:"a",1:"b",2:"c"}
   var b = a.pick('1','2')  //output will be {1: "b", 2: "c"}

function splice()
{
    var ret = new Object();

    for(i = 1; i < arguments.length; i++)
        ret[arguments[i]] = arguments[0][arguments[i]];

    return ret;
}

var answer = splice(elmo, "color", "height");

Essayer

const elmo={color:"red",annoying:!0,height:"unknown",meta:{one:"1",two:"2"}};

const {color, height} = elmo; newObject = ({color, height});

console.log(newObject); //{ color: 'red', height: 'unknown' }

Ajoutant mes 2 cents à la réponse d' Ivan Nosov :

Dans mon cas, j'avais besoin de plusieurs clés pour être `` tranchées '' hors de l'objet, donc cela devient très très laid et pas une solution très dynamique:

const object = { a: 5, b: 6, c: 7, d: 8, aa: 5, bb: 6, cc: 7, dd: 8, aaa: 5, bbb: 6, ccc: 7, ddd: 8, ab: 5, bc: 6, cd: 7, de: 8  };
const picked = (({ a, aa, aaa, ab, c, cc, ccc, cd }) => ({ a, aa, aaa, ab, c, cc, ccc, cd }))(object);

console.log(picked);

Voici donc une solution dynamique utilisant eval:

const slice = (k, o) => eval(`(${k} => ${k})(o)`);


const object    = { a: 5, b: 6, c: 7, d: 8, aa: 5, bb: 6, cc: 7, dd: 8, aaa: 5, bbb: 6, ccc: 7, ddd: 8, ab: 5, bc: 6, cd: 7, de: 8  };
const sliceKeys = '({ a, aa, aaa, ab, c, cc, ccc, cd })';

console.log( slice(sliceKeys, object) );

Remarque: bien que la question d'origine posée était pour javascript, cela peut être fait jQuery par la solution ci-dessous

vous pouvez étendre jquery si vous le souhaitez, voici l'exemple de code pour une tranche:

jQuery.extend({
  sliceMe: function(obj, str) {
      var returnJsonObj = null;
    $.each( obj, function(name, value){
        alert("name: "+name+", value: "+value);
        if(name==str){
            returnJsonObj = JSON.stringify("{"+name+":"+value+"}");
        }

    });
      return returnJsonObj;
  }
});

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


var temp = $.sliceMe(elmo,"color");
alert(JSON.stringify(temp));

voici le violon pour le même: http://jsfiddle.net/w633z/