Javascript Arrays
An array is basically a collection of variables that can be referenced as a group. Let's begin by looking at several different ways that we can define an array. Note that in each case we are creating our own array that will have its own properties but which will share the methods that are defined by the built in array object.
2 var anotherArray = new Array(5);
3 var thirdArray = new Array(2, 5, 3, 7);
4 var arrayFour = new Array('abacus','boat','yak','zebra');
5 var fifthArray = new Array(width:10,height:20,depth:15);
6 var arraySix = [];
7 var seventhArray = [2,5,3,7];
8 var array8 = [width:10,height:20,depth:15];
- 1 defines myArray as being an array but does not define anything to be contained within the array. All of the actual content of the array will need to be added in subsequent code.
- 2 defines anotherArray as being an array and also specifies that it will contain at least five values. You will need to set those values in the following code.
- 3 thirdArray is not only defined as being an array but we are also defining that it will start out holding four values – the numbers 2, 5, 3, and 7 will be stores in positions zero through three of the array respectively.
- 4 arrayFour is similar to thirdArray except that the values it holds are text strings rather than numbers.
- 5 fifthArray is a little different from the prior examples because instead of numbering the entries in the array we are giving them names instead. This creates what is commonly called an associative array because the entires in the array have names associated with them.A lot of the methods that can be used with regular arrays with numbered contents cannot be used with associative arrays.
- 6, 7, and 8 are identical to 1, 3, and 5 respectively but are using an alternative notation for defining the array. The [] has exactly the same meaning as new Array() when used like this with the only difference being that it us nine characters shorter. Note that there is no shorter equivalent to 2.
Having defined your array you can then reference the entries within the array in order to either load new values into those entries or to extract the values currently held by those entries. This is the second use for the square bracket notation since we reference the particular entries in the array by specifying which entry we want to reference within square brackets after the object name.
alert(array8['height']);
The first of these statements will extract the 5 from thirdArray since this is the value stored in position 1 within the array (all Javascript arrays count from zero). The second will extract the 20 that is held in the entry within array8 that has the name height associated with it.Note that the value that we place within the square brackets to identify the entry that we want to access need not be a constant as in these examples. We can also use a variable name there in order to access the entry corresponding to the nunber or name held in that variable.
Of course to be able to access all of the entries we need to know just how many entries there are in the array. For numbered array, this information is available to us via a property of the array called length. The length property of an array always contains a number one greater than that of the position within the array that holds the last entry so with the examples that we have looked at so far anotherArray.length contains 5 (since we have defined that the array should hold at least that many entries) while thirdArray.length and arrayFour.length both contain 4 (since they have values loaded into entries zero through three).
JavaScript provides the following methods that can be used to manipulate the entire content of an array.
This method allows us to join two arrays together. The entries in secondArray are added to the end of the entries already in firstArray.
This method converts the content of the array into a text string by placing the entries one after the other with the spacified separator (a comma in this example) between each entry.
This extracts the last entry from the array. It both returns the value of the last entry in the array and removes that entry from the array.
This adds whatever is contained within element into a new entry added to the end of the array. Very useful for adding to an array without having to work out how many entries the array already contains. Push and pop can also be used together to use an array as a stack where new entries are added to the end and the newest entry added is also the first one that needs to be retrieved. This arrangement is known as a stack because it works the same way as a stack of dirty dishes works with the first one to be washed being the last one added to the top of the stack.
reverses the order of all of the entries in the array so that the first entry becomes the last and the last becomes the first.
works similarly to pop except that instead of retrieving the last entry from the array it retrieves the first. The entry is also removed from the array when it is retrieved and so all of the remaining entries get moved down. Push and shift can be used together to use an array as a queue where the first entry added is also the first that needs to be retrieved just the same way that the first person to queue for a bus is the first to be able to get on board.
allows us to add element to the front of an array moving all of the existing elements down one to make room for it.
this method allows us to extract any section of the array into a new array simply by specifying the first and last entries we want to extract. You can even specify the positions using negative numbers if you want to count from the end of the array instead of from the start.
allows us to sort the entries in our array. If we don't specify a compareFunction to use for the sort then the entries will be sorted into ascending order as if the contents are all text strings. We can override the sort order to get the entries sorted into whatever order we like simply by specifying the name of a function to use for the comparisons that the sort will use to work out the order to out the entries in. That function will receive the two entries to be compared and needs to return 1 or -1 depending on which of the values is considered to be greater or return 0 if they are considered to be equal.
this method is the ultimate in array manipulation since it both retrieves and removes a specified group of entries from the array (fthe specified number of entries starting from position) as well as inserting the elements supplied in the third and sunsequent parameters into that spot in the array in place of the entries retrieved. The rest of the array entries after that will be moved as needed depending on whether the number of entries removed from the array is greater or less than the number of entries inserted in their place.
