javascript - objetos - object.keys map

Cómo obtener un subconjunto de las propiedades de un objeto javascript

Question

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?

Answer 1

Nota: aunque la pregunta original fue para javascript, se puede hacer jQuery por debajo de la solución

puede extender jquery si lo desea aquí es el código de ejemplo para una porción:

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 el mismo: http://jsfiddle.net/w633z/

Answer 2

Destrucción de tareas con propiedades dinámicas.

Esta solución no solo se aplica a su ejemplo específico, sino que es más generalmente aplicable:

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 el subset4 etc. para tener en cuenta más propiedades.

Answer 3

1. convertir argumentos a matriz

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

   Object.prototype.pick = function() {
   var obj = {};
   var args = arguments
   Array.from(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"}

Answer 4

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

Answer 5

La destrucción en variables dinámicamente nombradas es imposible en JavaScript como se discute en esta question .

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

const getSubset = (keys, obj) => keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});
const elmo = {
color: ''red'',
annoying: true,
height: ''unknown'',
meta: { one: ''1'', two: ''2''}
};
console.log(getSubset([''color'', ''annoying''], elmo));

Answer 6

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

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

También puedes escribir una función de utilidad hazlo ...

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() .

Answer 7

Puedes usar Lodash también.

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

Complementando, digamos que tienes 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 quieres el mismo comportamiento, usando lodash, solo deberías:

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

Answer 8

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

Answer 9

Si bien es un poco más detallado, puede lograr lo que todos los demás recomendaron subrayar / lodash hace 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 propiedades para extraerlos, toma una matriz de nombres de propiedades y redúcelos 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 con algunos requisitos comunes, por ejemplo, cambiar la propiedad ''color'' a ''color'' en el nuevo objeto, aplanar arreglos, etc. las cosas que debe hacer cuando recibe un objeto de un servicio / biblioteca y crea un nuevo objeto necesario en otro lugar. Si bien el subrayado / lodash son librerías excelentes y bien implementadas, este es mi enfoque preferido para una menor dependencia del proveedor, y un enfoque más simple y consistente cuando mi lógica de creación de subconjuntos se vuelve más compleja.

Edición: es7 versión de la misma:

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

Edición: ¡Un buen ejemplo para el 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 crear un ''selector'' sobre la marcha. p.ej

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

Lo que es especialmente bueno de este enfoque, es que puede pasar fácilmente las ''selecciones'' 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'' },
// ]

Answer 10

Si está utilizando ES6, hay una forma muy concisa de hacerlo utilizando destructing. La destrucción le permite agregar fácilmente objetos utilizando una extensión, pero también le permite crear objetos de subconjunto de la misma manera.

const object = {
a: ''a'',
b: ''b'',
c: ''c'',
d: ''d'',
}
// Remove "d" field 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''};

Answer 11

Solo otra manera ...

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]

Puedes usar esta función con una matriz de Objetos =)

Answer 12

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

fiddle

Answer 13

Una solución más:

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

Esto me parece mucho más fácil de leer que casi cualquier respuesta hasta ahora, ¡pero quizás sea solo yo!

Answer 14

Usando la destrucció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:

Esto es realmente solo una función anónima que se llama instantáneamente. Todo esto se puede encontrar en la página Asignación de destrucción 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)

Answer 15

Utilice el método de selección de la biblioteca de lodash si ya 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

Answer 16

Array.prototype.reduce Good-old:

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 utiliza el operador de coma mágico, también: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

Si quieres ser realmente lujoso, esto es más compacto:

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

Poniéndolo 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);

Answer 17

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