3 Ways to Convert an Array Into an Object Using JavaScript
source link: https://www.tuicool.com/articles/MfqIbiQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
How do you convert an array into a new object using Javascript?
You can convert an array into an object using one of these three methods:
Object.assign() reduce()
We'll go over each of those methods in this article and provide some code examples for you to use on your website or application.
Let's get started!
Table of Contents
1. Object.assign()
Object.assign() is the first method we'll cover for converting an array to an object. This method is used to copy values from one or more source objects to a new object.
The function takes two parameters:
- The target object you wish to modify (this will be returned by the function)
- The source object of where to extract the properties from
If you give the function an array as the source data, it will loop over each item in the array and create a new object where the key is the array index of the value.
Here's what it looks like in practice:
JavaScript
const array = [ "Johnny" , "Billy" , "Sandy" ]
const newObject = Object . assign ({}, array)
// newObject = { "0": "Johnny", "1": "Billy", "2": "Sandy" }
Notice how each item in the new object uses the array index of the value as the key (i.e. "0"
, "1"
, etc.).
And you can now access each item in the new object using the conventional dot notation method ( foo.bar
).
In the next section, we'll show you how to manually loop over an array to construct a new object.
2. Loop Over Array & Construct a New Object
For the second method, we're going to loop over each item in an array and add each of its values as a new property in a new object. To match the object returned in the last section, the key value will be the array index for each item.
In the code example, we'll be using a for
loop to enumerate over each item in the array. But, you can use any other method of looping over an array that you wish ( while
, while/do
, etc).
Here's the full code example:
JavaScript
const array = [ "Johnny" , "Billy" , "Sandy" ]
let newObject = {}
for ( let i = 0 ; i < array . length ; i ++ ) {
if (array[i] !== undefined ) {
newObject[i] = array[i]
}
}
// newObject = { "0": "Johnny", "1": "Billy", "2": "Sandy" }
First, we declare an empty object called newObject
that will serve as the new object that'll hold our array items.
Then, we use a for
loop to iterate over each item in the array. If the value doesn't have an undefined
value, we add the item as a new property to the newObject
using the array index as its key value.
If you console.log()
the new object, you'll see that the same object as the first method is returned.
Advertisement
Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming
Isn't it time you became fluent in the language of the Web? This much anticipated and thoroughly revised third edition of Eloquent JavaScript dives deep into the JavaScript language to show you how to write beautiful, effective code.
3. Reduce()
The last example we'll show you is the reduce() method. The reduce()
method executes a given function for each item of the array and stores the values in an accumulator entity, which will be an object in the case we're using it for.
We'll call the reduce()
function directly on the array and give it a parameter function that constructs a new object using each item in the array. The array index value will be used as the object key.
The code looks like the following:
JavaScript
const array = [ "Johnny" , "Billy" , "Sandy" ]
const newObject = array . reduce ( function (result, item, index) {
result[index] = item
return result
}, {})
// newObject = { "0": "Johnny", "1": "Billy", "2": "Sandy" }
If you console.log()
the new object, you'll see that the same object as both the first and second method is returned.
That's the last method we'll cover in this article.
Conclusion
In this article, we went over three different ways to convert an array into a new object using JavaScript. These included:
Object.assign() reduce()
Thanks for reading and happy coding!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK