Convert object to array in Javascript

The utility of Object.entries() has been accessible since the inception of ECMAScript 2017. This integral method facilitates the retrieval of an array comprising sub-arrays, each representing enumerable property key-value pairs that are directly situated on the object.

const colors = { 1: 'Red', 2: 'Blue', 3: 'Green' }; const cls = Object.entries(colors); console.log(cls);
[ [ '1', 'Red' ], [ '2', 'Blue' ], [ '3', 'Green' ] ]

Object.keys

The Object.keys method operates by yielding a fresh array that carefully compiles all the keys of an object, organized in a coherent and sequential manner.

const colors = { 1: 'Red', 2: 'Blue', 3: 'Green' }; const keys = Object.keys(colors); console.log(keys);
[ '1', '2', '3' ]

Object.values

The Object.values method facilitates the generation of a novel array encompassing all the values derived from an object, carefully arranged in a sequential and orderly fashion.

const colors = { 1: 'Red', 2: 'Blue', 3: 'Green' }; const values = Object.values(colors); console.log(values);
['Red', 'Blue', 'Green']

Array.prototype.map()

The attainment of an equivalent outcome can be realized through the strategic utilization of the map() function in conjunction with the Object.keys() method.

const colors = { 1: 'Red', 2: 'Blue', 3: 'Green' }; var result = Object.keys(colors).map((key) => [Number(key), colors[key]]); console.log(result);
[ [ 1, 'Red' ], [ 2, 'Blue' ], [ 3, 'Green' ] ]

In the above code, the Object.keys() operation plays a key role by generating an array that encapsulates the enumerable string-based property names exclusive to the specified object. Subsequently, the Array.prototype.map() function comes into play, orchestrating the creation of a fresh array. This newly formed array is carefully populated with the outcomes derived from invoking a designated function on each individual element encompassed within the original array.

Destructuring Object.entries()

Destructuring serves as the mechanism that enables the extraction of values from arrays. In the provided code, the Object.entries() method yields subarrays, wherein each subarray comprises distinct key-value pairs, demarcated by a comma. To transform this hierarchical arrangement into a singular one-dimensional array, the process of destructuring becomes essential.

const colors = { 1: 'Red', 2: 'Blue', 3: 'Green' }; let keys = Object.entries(colors); let keyArr = []; keys.forEach(([key, val]) => { keyArr.push(key); keyArr.push(val); }); console.log(keyArr);
[ '1', 'Red', '2', 'Blue', '3', 'Green' ]

JavaScript Earlier Approach - Object to Array


Javascript convert Object to Array

A precedent technique in JavaScript involved the iterative traversal of an object, with subsequent incorporation of individual object properties into a newly constructed array.

const colors = { 1: 'Red', 2: 'Blue', 3: 'Green' }; let keys = []; for (let value in colors) { keys.push(value); } console.log(keys);
[ '1', '2', '3' ]

Conclusion

Converting objects to arrays in JavaScript can be achieved through methods like Object.entries(), which creates an array with subarrays holding key-value pairs, or by iterating through the object's properties and pushing them into a new array. These approaches facilitate the transformation of object data into a more structured array format.






Related Topics
  1. How to copy a JavaScript object ?
  2. How to Convert a String to an Array in JavaScript?
  3. JavaScript async/await
  4. What does this symbol => mean in Javascript
  1. JavaScript Sleep() function