This is by far the most simple tutorial I will be writing. What forced me to write this guide on creating JavaScript key value array pairs, were some comments I received in other Js tutorials.
If you are a Js developer, you might need these scripts probably most of the time. Be it a Js newbie or experienced developer, you will need this guide at some or the other points of life.
Approach :
This post will show multiple ways to define key value array. Choose one that suits you the best, based on the use case.
To give examples, we will be creating an array of students. We will push some student details in it using javascript array push.
We will verify these changes by looping over the array again and printing the result. Basically we will use javascript array get key value pair method.
1. Using an empty JavaScript key value array
var students = [];
students.push({id:120,name:‘Kshitij’,age:20});
students.push({id:130,name:‘Rajat’,age:31});
for(i=0;i<students.length;i++){
console.log(“ID:- “ + students[i].id + ” Name:- “ + students[i].name + ” Age:- “ + students[i].age);
}
[su_label type=”info”]Also read: [/su_label] Best JavaScript Frameworks trending now
2. Using Javascript Object
In JavaScript, Objects are most important data types. They are widely used in modern Javascript to copy data also.
Objects are different from primitive data-types ( Number, String, Boolean, null, undefined, and symbol ).
This method shows how to combine two different arrays into one array of key-value maps.
Please note that here the assumption is that key-value pairs lie at the same indexes in both existing arrays.
// An array of keys var keys = [1, 2, 3]; // An array of values var values = ["MTC", "MyTrashCode", "Computers"]; // Object created var obj = {}; // Using loop to insert key // value in Object for(var i = 0; i < keys.length; i++){ obj[keys[i]] = values[i]; } // Printing object for (var key of Object.keys(obj)) { document.write(key + " => " + obj[key] + "</br>") }
[su_label type=”info”]Also read: [/su_label] 5 Best IDE for React and ReactJs text editors
3. Using Javascript Maps
Map in javascript is a collection of key-value pairs. It can hold both the object or primitive type of key-values. It returns the key, value pair in the same order as inserted.
// An array of keys var keys = [1, 2, 3]; // An array of values var values = ["MTC", "MyTrashCode", "Computers"]; // Map created var map = new Map(); // Using loop to insert key // value in map for(var i = 0; i < keys.length; i++){ map.set(keys[i], values[i]); } // Printing for (var key of map.keys()) { document.write(key + " => " + map.get(key) + "</br>") }
Comment below and let me know if the guide helped you.