Digamos que tengo un objeto:

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

Quiero hacer un nuevo objeto con un subconjunto de sus propiedades.

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

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

¿Cómo puedo lograr esto?

Uso de la desestructuración de objetos y la taquigrafía de propiedades

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:

Esta es realmente una función anónima que se llama instantáneamente. Todo esto se puede encontrar en la página de Destructuring Assignment en MDN. Aquí hay una forma expandida

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)

Sugiero echar un vistazo a Lodash ; Tiene muchas funciones de gran utilidad.

Por ejemplo pick(), sería exactamente lo que buscas:

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

violín

Si está utilizando ES6, hay una manera muy concisa de hacerlo mediante la desestructuración. La desestructuración le permite agregar fácilmente a los objetos usando una extensión, pero también le permite crear objetos de subconjuntos de la misma manera.

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

Si bien es un poco más detallado, puede lograr lo que todos los demás estaban recomendando subrayado / lodash durante 2 años, utilizando Array.prototype.reduce .

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

Este enfoque lo resuelve desde el otro lado: en lugar de tomar un objeto y pasarle nombres de propiedad para extraerlo, tome una matriz de nombres de propiedad y reduzca a un nuevo objeto.

Si bien es más detallado en el caso más simple, una devolución de llamada aquí es bastante útil, ya que puede cumplir fácilmente algunos requisitos comunes, por ejemplo, cambiar la propiedad 'color' a 'color' en el nuevo objeto, aplanar matrices, etc., cualquiera de Las cosas que debe hacer al recibir un objeto de un servicio / biblioteca y construir un nuevo objeto necesario en otro lugar. Si bien el subrayado / lodash son bibliotecas excelentes y bien implementadas, este es mi enfoque preferido para una menor dependencia del proveedor y un enfoque más simple y más consistente cuando mi lógica de creación de subconjuntos se vuelve más compleja.

editar: es7 versión de la misma:

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

editar: ¡Un buen ejemplo para curry también! Haga que una función 'pick' devuelva otra función.

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

Lo anterior es bastante similar al otro método, excepto que le permite construir un 'selector' sobre la marcha. p.ej

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

Lo que es especialmente interesante de este enfoque es que puede pasar fácilmente las 'elecciones' elegidas a cualquier cosa que tenga una función, por ejemplo Array#map:

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

ES6 desestructuración

La sintaxis de desestructuración permite desestructurar y recombinar un objeto, ya sea con parámetros de función o variables.

La limitación es que una lista de claves está predefinida, no se pueden enumerar como cadenas, como se menciona en la pregunta. La desestructuración se vuelve más complicada si una clave no es alfanumérica, por ejemplo foo_bar.

La desventaja es que esto requiere duplicar una lista de claves, esto da como resultado un código detallado en caso de que una lista sea larga. Dado que la desestructuración de la sintaxis literal de objetos duplicados en este caso, una lista se puede copiar y pegar tal cual.

Lo bueno es que es una solución eficaz que es natural para ES6.

IIFE

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

Variables temporales

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

Una lista de cadenas

La lista arbitraria de claves seleccionadas consta de cadenas, según lo requiera la pregunta. Esto permite no predefinirlos y usar variables que contienen nombres clave, como pick(obj, 'foo', someKey, ...moreKeys).

Una línea se acorta con cada edición de 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] }), {});

O con operador de coma:

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

ES2019

ECMAScript 2017 tiene Object.entriesy Array.prototype.includes, ECMAScript 2019 tiene Object.fromEntries, se pueden rellenar cuando sea necesario y facilitar la tarea:

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

Un one-liner se puede reescribir como una función auxiliar similar a Lodashpick o omitdonde la lista de claves se pasa a través de argumentos:

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 }

Una nota sobre las llaves faltantes

La principal diferencia entre la desestructuración y la función convencional similar a Lodash pickes que la desestructuración incluye claves recogidas inexistentes con undefinedvalor en un subconjunto:

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

Este comportamiento puede o no ser deseable. No se puede cambiar por la sintaxis de desestructuración.

Mientras que pickse puede cambiar para incluir claves faltantes iterando una lista de claves elegidas en su lugar:

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 }

No hay nada como eso integrado en la biblioteca principal, pero puede usar la desestructuración de objetos para hacerlo ...

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

También podría escribir una función de utilidad hacerlo ...

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

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

Las bibliotecas como Lodash también tienen _.pick().

Estoy agregando esta respuesta porque ninguna de las respuestas utilizadas Comma operator.

Es muy fácil con destructuring assignmenty ,operador

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

console.log(picked);

Con una cierta mejora para la asignación de propiedades dinámicas, podría verse así:

Una solución mas:

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

Esto me parece mucho más legible que casi cualquier respuesta hasta ahora, ¡pero tal vez solo soy yo!

Puedes usar Lodash también.

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

Complementando, digamos que tiene una serie de "elmo" s:

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 desea el mismo comportamiento, usando lodash, simplemente:

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

La desestructuración en variables dinámicamente nombradas es imposible en JavaScript como se discutió en esta pregunta .

Para establecer claves dinámicamente , puede usar la función reducir sin mutar el objeto de la siguiente manera:

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)

Sin embargo, debe tener en cuenta que está creando un nuevo objeto en cada iteración en lugar de actualizar un solo clon. - mpen

a continuación se muestra una versión que usa reducción con un solo clon (actualización del valor inicial pasado para reducir).

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)

Solución 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));
}

La información de escritura incluso permite la finalización automática:

¡Crédito para definitivamente escrito para U extends keyof Ttruco!

Utilice el pickmétodo de la biblioteca lodash si ya lo está utilizando.

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

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

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

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

Solución dinámica

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

Solo otra forma ...

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]

Puede usar esta función con una matriz de objetos =)

Qué tal si:

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

Esto funciona para mí en la consola de Chrome. ¿Algún problema con esto?

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

Asignación de desestructuración con propiedades dinámicas

Esta solución no solo se aplica a su ejemplo específico, sino que se aplica de manera más general:

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

Puede definir fácilmente subset4etc. para tener más propiedades en cuenta.

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

esta respuesta usa el operador de coma mágico, también: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

si quieres ponerte realmente elegante, esto es más compacto:

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

Poniendo todo junto en una función reutilizable:

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 argumentos a matriz

2. utilizar Array.forEach()para elegir la propiedad

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

Tratar

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

Agregando mis 2 centavos a Ivan Nosov respuesta de :

En mi caso, necesitaba muchas claves para ser 'cortadas' del objeto, por lo que se está volviendo feo muy rápido y no es una solución muy dinámica:

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

Así que aquí hay una solución dinámica usando 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) );

Nota: aunque la pregunta original fue para JavaScript, se puede hacer jQuery con la siguiente solución

puede extender jquery si lo desea, aquí está el código de muestra para un segmento:

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

aquí está el violín para lo mismo: http://jsfiddle.net/w633z/