javascript - Conversión de objeto en matriz utilizando funciones de ES6

Dado un objeto javascript, ¿cómo puedo convertirlo en una matriz en ECMAScript-6?

Por ejemplo, dado:

 var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};

El resultado esperado sería:

 ['foo', [1,2,3], null, 55]

El orden de los elementos en el resultado no es importante para mí.

1

No entendí si tienes una respuesta, ¿qué estás buscando aquí?

-Mritunjay

9 de agosto de 2014 a las 10:46

@Mritunjay Una publicación de blog, tal vez...

- usuario2864740

9 de agosto de 2014 a las 10:46

1

No, está bien hacer eso. Es una pregunta decente y una respuesta decente. Aunque esperaba que se pudiera agregar como respuesta a una pregunta similar, excepto que no parecen ser específicas de es6.

- tecnosaurio

9 agosto 2014 a las 10:50

1

Puse un jsperf aquí: jsperf.com/objects-to-array/2

- tecnosaurio

9 agosto 2014 a las 12:32

utilizar Objeto.valores(inputObj)

-v42

23 de mayo de 2019 a las 11:05

------------------------------------

Utilice (ES5) Array::map sobre las teclas con una función de flecha (solo para sintaxis corta, no para funcionalidad):

let arr = Object.keys(obj).map((k) => obj[k])

El verdadero estilo de ES6 sería escribir un generador y convertir ese iterable en una matriz:

function* values(obj) {
    for (let prop of Object.keys(obj)) // own properties, you might use
                                       // for (let prop in obj)
        yield obj[prop];
}
let arr = Array.from(values(obj));

Lamentablemente, ningún iterador de objetos ha llegado a los nativos de ES6.

5

2

Este método es aproximadamente 85 veces (sí, veces, no porcentaje) más lento que el método 'por in' de la vieja escuela. método en este caso de prueba. ¿Esto cambiaría significativamente en conjuntos de datos más grandes?

- tecnosaurio

9 agosto 2014 a las 12:50

¿Cómo ejecutaste ES6? ¿Qué datos de prueba usaste? ¿Has probado diferentes tamaños? Sí, se sabe que el mapa es un poco más lento que los bucles.

- Bergi

9 agosto 2014 a las 13:06

Firefox ya lo tiene habilitado, Chrome necesita chrome://flags/#enable-javascript-harmony. Se ejecuta, pero en las implementaciones actuales es lento.como melaza. Supongo que la razón por la que se omitieron los iteradores de objetos es que los compiladores JIT existentes ya pueden reconocer estos patrones en los métodos de la vieja escuela.

- tecnosaurio

10/08/2014 a las 1:03

Probablemente no sea el mapa la parte lenta, la parte lenta probablemente sea la construcción de una matriz desechable realizada por Object.keys. Si tuviera una función de generador que no usara Object.keys, entonces esperaría que su velocidad fuera mucho más cercana a for in.

-andy

22 de octubre de 2015 a las 16:59

1

@andy: Echando un vistazo de nuevo, hay Reflect.enumerate(obj) que hace exactamente esto. Pero no tengo idea de si sería más rápido, sobre todo porque parece que todavía no se ha implementado en ninguna parte. Por cierto, Object.keys es bastante rápido en V8, a veces más rápido que en.

- Bergi

22/10/2015 a las 20:22

------------------------------------

solo usa Object.values

Object.values(inputObj); // => ['foo', [1,2,3], null, 55]

2

1

Sin esfuerzo y elegante, pero es la siguiente característica, por lo que definitivamente debes buscar compatibilidad con el navegador

- Samiullah Khan

2 de marzo de 2018 a las 9:51

1

@Samiullah ¡ahora todo el mundo usa babel! Especialmente si estás usando ES6 y te preocupas por la compatibilidad de los navegadores

- Fareed Alnamrouti

2 de marzo de 2018 a las 10:24

------------------------------------

Actualización agosto 2020

Como resumen, en ES6, existen tres (3) variaciones para convertir un objeto en una matriz de la siguiente manera:

const MyObjects = {   key1: 'value 1',   key2: 'value 2', };

// Method 1: Converts the keys to Array
// 

------------------------------------

--

Object.keys(MyObjects);
// ['key1', 'key2']

// Method 2 Converts the Values to Array
// 

------------------------------------

--

Object.values(MyObjects);
// ['value 1', 'value 2']

// Method 3 Converts both Values and Keys
// 

------------------------------------

--

Object.entries(MyObjects);
// [ ['key1', 'value 1'], ['key2', 'value 2'] ]

La conversión de una matriz nuevamente a un objeto se puede realizar de la siguiente manera:

const array = [  ['one', 1],   ['two', 2], ];

Object.fromEntries(array);

// { one: 1, two: 2 }

------------------------------------

Me gusta la vieja escuela:

var i=0, arr=[];
for (var ob in inputObj)
  arr[i++]=ob;

La vieja escuela gana la prueba jsperf por un amplio margen, si no los votos positivos. A veces las nuevas incorporaciones son "características erróneas".

3

¿Qué es obj y por qué ob es global?

- Bergi

9 agosto 2014 a las 11:30

Sí, pero sigue siendo una variable global. Usar para (let ob i inputObj)

- Bergi

9 agosto 2014 a las 11:50

@technosaurus Estoy seguro de que se supone que su variable ob in for(var ob in inputObj) es una clave de propiedad. Entonces, dentro del bucle debería estar arr[i++]=inputObj[ob];. Esto lo hace un 22% más lento que el código que tienes ahora. Pero sigue siendo mucho más rápido que los demás en el jsperf vinculado.

-jongo45

3 de noviembre de 2014 a las 3:39

------------------------------------

Esto se puede lograr utilizando la sintaxis de comprensión de matrices:

[for (key of Object.keys(inputObj)) inputObj[key]]

Ejemplo de uso:

var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};
var arr = [for (key of Object.keys(inputObj)) inputObj[key]];
console.log(arr);

// prints [ 'foo', [ 1, 2, 3 ], null, 55 ]

5

@Bergi no funciona dentro de la sintaxis de Array Comprehension (al menos con Tracuer)

- urés

9 agosto 2014 a las 11:57

Sí, aparentemente solo se supone que se deben usar iteradores dentro de las comprensiones. Y no hay ningún iterador de objetos: se supone que debes usar Maps

- Bergi

9 agosto 2014 a las 12:10

Esto falla el jsperf en chrome/firefox jsperf.com/objects-to-array/2 Aunque no sé cómo solucionarlo.

- tecnosaurio

9 agosto 2014 a las 12:31

¿No es ES7 la comprensión de matrices?

-bren

22 dic 2015 a las 2:38

Solían estar en ES6 y tienen bHa sido eliminado desde entonces. Según github.com/tc39/ecma262, no parece que vayan a formar parte de ES7.

- urés

22 dic 2015 a las 11:53

------------------------------------

Forma ES7:

let obj = { a: "foo", b: "bar", c: 1, d: [1, 2, 3, 4] }

Object.values(obj)

// output --> ['foo', 'bar', 1, [1, 2, 3, 4]

3

Por favor, aumente esta respuesta de solo código con alguna explicación.

- Yunnosch

5 de marzo de 2019a las 16:16

Claro que podría, pero no hay nada que explicar excepto la documentación. El método Object.values() devuelve una matriz de los valores de propiedad enumerables propios de un objeto determinado, en el mismo orden que el proporcionado por un bucle for...in (la diferencia es que un bucle for-in enumera las propiedades en la cadena del prototipo también).

-Despertaweb

6 de marzo de 2019 a las 8:54

4

Amigo, esta es una información básica del método, este no es el propósito del tema. Queda muy claro con el ejemplo. @Yunnosch

-Despertaweb

7 marzo 2019 a las 11:08

------------------------------------

Array.map equivalente a la función de flecha de @Bergi (consulte MDN para obtener más información sobre Array.map).

Edición 2020: convertido a fragmento y agregado una alternativa

const obj = {
    a: 'foo',
    b: [1, 2, 3],
    c: null,
    z: 55
  },
  nwArr = Object.keys(obj).map(k => obj[k]),
  // Alternative
  nwArr2 = Object.fromEntries(Object.entries(obj));
  nwArr.a = "bar";
  nwArr2.a = "foobar"
  console.log(`obj.a: ${obj.a}, nwArr.a: ${nwArr.a}, nwArr2.a: ${nwArr2.a}`);

1

3

Versión aún más compacta de este Object.keys(obj).map(k => obj[k])

- leo

10/03/2016 a las 16:59

------------------------------------

const address = {
        street: "bew1111",
        city: "err111",
        country: "ind11"
    };
    const address2 = {
        street: "bewscxsd",
        city: "errdc",
        country: "indcdsc"
    };

tenemos dos objetos aquí y voy a usar 2 métodos para asignar ambos objetos en Array

Objeto.entradas()

Objeto.claves()

El primero comienza aquí-----

var firstar = Object.entries(address);

aquí asigné la dirección a firstar ycuando ejecutes esto obtendrás un resultado como este

(3) [Array(2), Array(2), Array(2)]

El segundo comienza aquí

var secstar = Object.keys(address2);

aquí asigné la dirección2 a secstar y cuando ejecutes esto obtendrás un resultado como este

 (3) ["street", "city", "country"]

Respondido

23 de enero de 2021 a las 5:13

Anil Kant Mishra

Anil Kant Mishra

1

1

1 insignia de bronce