We see what multidimensional arrays are (arrays with more than one dimension) and how to use them. We also explain how to initialize arrays in their declaration.
As we are seeing, arrays are quite important in Javascript and also in most programming languages. Specifically, we have already learned how to create arrays and use them in previous . But we still have some important things to explain, such as multidimensional arrays.
Multidimensional arrays are data structures that store values in more than one dimension. The arrays we have seen so far store values in one dimension, so to access the positions we only use an index. 2-dimensional arrays store their values, so to speak, in rows and columns and therefore we will need two indices to access each of their positions.
In other words, a multidimensional array is like a container that stores more values for each position, that is, as if the elements of the array were in turn other arrays.
In Javascript there is no true array-multidimensional object. To use these structures we can define arrays where in each of its positions there will be another array. In our programs we can use arrays of any dimension, we will see below how to work with arrays of two dimensions, which will be the most common.
In this example we are going to create a two-dimensional array where we will have cities on the one hand and on the other the average temperature in each one during the winter months.
var mean_city_temperatures0 = new Array(3) mean_city_temperatures0 = 12 mean_city_temperatures0 = 10 mean_city_temperatures0 = 11 var mean_city_temperatures1 = new Array (3) mean_city_temperatures1 = 5 mean_city_temperatures1 = 0 mean_city_temperatures1 = 2 var mean_city_temperatures2 = new Array (3) mean_city_temperatures2 = 102 mean_city_temperatures2 = 102 mean_city_temperatures 10
With the previous lines we have created three arrays of 1 dimension and three elements, like the ones we already knew. Now we will create a new array of three elements and we will introduce the previously created arrays into each of its cells, with which we will have an array of arrays, that is, a 2-dimensional array.
var temperatures_cities = new Array (3) temperatures_cities = temperatures_median_city0 temperatures_cities = temperatures_median_city1 temperatures_cities = temperatures_median_city2
We see that to introduce the entire array we refer to it without parentheses or square brackets, but only with its name. The temperatures_cities array is our two-dimensional array.
It is also interesting to see how a two-dimensional array is traversed. To do this we have to make a loop that passes through each of the cells of the two-dimensional array and within these make a new path for each of its internal cells. That is, a tour of an array within another.
The method of making one loop inside another is to put one loop inside another, called a . In this example we are going to put a FOR loop inside another. Also, we’re going to write the results to a table, which will complicate the script a bit, but we’ll be able to see how to build a table from Javascript as we go through the nested loop traversal.
document.write(“
| City ” + i + “ |
“)
This script is a bit more complex than the ones seen above. The first action is to write the table header, that is, the
| tag. Once the second loop ends, the three temperatures have been printed and therefore the row is finished. The first loop continues to repeat until all the cities are printed and once finished we close the table.
Note: You may have noticed that sometimes generating HTML code from Javascript becomes complex. But the problem is not only that the code is difficult to produce, but the worst thing is that you create a code that is difficult to maintain, in which the Javascript programming part is mixed with the HTML presentation part. What you have also seen is just a very simple code, with a really elementary table, imagine what would happen when the table or the data were more complex. Fortunately, there are better ways to generate HTML output than we’ve seen now, although it’s a bit advanced for now. Anyway, we leave you a link to , which is a simple library alternative to generate HTML output from Javascript. We can and examine the code of the entire script. Array initializationTo finish with the subject of arrays, we are going to see a way to initialize their values at the same time that we declare it, so we can carry out the process of introducing values in each of the positions of the array more quickly. We saw that the normal method of creating an array was through the Array object, putting the number of cells in the array between parentheses or not putting anything, so that the array is created without any position. To introduce values to an array, do the same, but putting the values with which we want to fill the boxes separated by commas between the parentheses. Let’s see it with an example that creates an array with the names of the days of the week. var weekdays = new Array(“Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”,”Sunday”) The array is created with 7 boxes, from 0 to 6, and in each box the corresponding day of the week is written (in quotes because it is a text). Now we are going to see something more complicated, it is about declaring the two-dimensional array that we used before for the temperatures of the cities in the months in a single line, introducing the values at the same time. var temperatures_cities = new Array(new Array(12,10,11), new Array(5,0,2),new Array(10,8,10)) In the example we introduce in each cell of the array another array that has as values the temperatures of a city in each month. Javascript still has a more condensed way than the one we just saw, which we explained in the . To do this, we simply write the data of the array that we are creating between square brackets. To finish we are going to show an example on how to use this syntax to declare arrays with more than one dimension. var arrayManyDimensions = , , “just”], 2, 5]; In this example we have created a very non-uniform array, because it has cells with content of simple integers and others with content of strings and others that are other arrays. We could access some of its checkboxes and display their values like this: alert (arrayManyDimensions) alert (arrayManyDimensions) alert (arrayManyDimensions) With this we have come to the end of the articles that deal with arrays in Javascript and now we can continue with one that will come in handy to improve our relationship with this programming language.
|
Facebook Comments
Disqus