Lesson20-Advanced Arrays
In this chapter, we will inspect more advanced areas of arrays, such as sorting, reversing, and creating multi-dimensional arrays. Remember, an array is just a collection of variables, so let go your fear, and lets dive in!
In this chapter, we'll look at:
Presenting an alternative form of initializing an array
In the last chapter, we stuffed into an array values by first declaring an array, then assigning each "space" in an array a value:
var myarray=new Array(3)
myarray[0]="one"
myarray[1]="two"
myarray[2]="three"
There is an alternative way of assigning values to an array during declaration. The below illustrates this form:
var myarray=new Array("one","two","three")
The above is what's called a dense array, since it compresses the declaration and initialization of an array into one step. Note that Netscape 2.x supports dense arrays too. As you can see, we directly passed in the values of the array as parameters . To access the individual values inside, simply use the same old notation:
alert(myarray[0]) //alerts "one"
Sorting an array in alphabetical or numerical order using the sort() method of the Array object (NOT supported by IE browsers)
The fact that a pre-built method is available in JavaScript to easily sort the values of an array is very exciting! Note that IE browsers currently do NOT support the sort() method required to sort an array, so for all IE users, you may want to load another browser to view this lesson. Using this method, we can sort values either in alphabetical order ("be" is considered in front of "by"), or in numerical order (2,3..).
The general syntax of the sort() method is as follows:
arrayname.sort()
The sort() method by default sorts the values inside an array in alphabetical order (dictionary order):
var myarray=new
Array("Bob","Bully","Amy")
myarray.sort()
//myarray[0] is now Amy, myarray[1] is now Bob, myarray[2] is now Bully
Before you starting wondering off, consider what happens if we sort numbers instead:
var myarray=new Array(7,40)
myarray.sort()
//myarray[0] is now 40, myarray[1] is now 7
Although 7 is numerically smaller than 40, alphabetically , it is larger, since 7 itself is larger than 4. The sort() method by default always treats values as strings and sorts them as such. If you're confused about the criteria the sort() method uses when sorting, simply flip through a dictionary. The way the words in a dictionary are indexed follows the same rule.
Sorting an array in numerical order
For the most part, sorting numerical values means you want them sorted numerically. JavaScript understands that, and in a while, you will understand how to.
Sorting an array in numerical order still involves the same sort() method, with a little twist:
arrayname.sort(functionname)
"functionname" represents the returned value of a special function created specifically for the sort() method. A function like this has the following format:
function myfunction(a,b){
return(a-b)
}
Lets first put all this together and sort an array numerically, before anything else:
function sortit(a,b){
return(a-b)
}
var myarray=new Array(70,43,8)
myarray.sort(sortit)
//myarray[0] is now 8, myarray[1] is now 43, myarray[2] is now 70
Ok, so what's "a" and "b", and why all this weird additional syntax? Well, "a" and "b" are two imaginary values the sort() method uses to determine how to sort an array. Subtracting "b" from "a" indicates to the sort() method that we want it to sort the array numerically.
Example: Sorting a list of numbers
Lets create a simple routine now that sorts any collection of numbers entered using the window.prompt() method, and displays the results in a newly opened window. To make the example as simplistic as possible, no code was added to check for invalid numbers:
<script>
function sortit(a,b){
return(a-b)
}
function sorting(){
var myarray=new Array()
var max=window.prompt("How many numbers do you wish to sort?")
for (i=0;i<max;i++)
myarray[i]=window.prompt("Please input the "+i+" number")
myarray.sort(sortit)
var newwindow=window.open("","","width=150,height=470")
newwindow.document.open()
for (i=0;i<max;i++)
newwindow.document.write(myarray[i]+"<br>")
newwindow.document.close()
}
</script>
<form>
<input type="button" value="Do it!"
onClick="sorting()">
</form>
Lets discuss some of the key elements in this example:
We first declared myarray, the array that will hold the numbers to be sorted.
Using a simple for loop, we stored all the entries made by the surfer into myarray, then by calling the sort() method, sorted them
Notice the technique used here to open a new window:
var
newwindow=window.open("","","width=150,height=470")
We passed in empty strings to the first two parameters of the open()
method. This creates an empty window that doesn't contain any specific html file
To dynamically write to this newly opened window, we have to first open
a document stream:
newwindow.document.open()
The open() method of the document should be used
whenever we wish to dynamically create a document using JavaScript.
After writing out the entries, we closed the document stream by using the close() method.
For those who first thought arrays aren't that useful, are you thinking otherwise now?
Ok, in the next chapter, we shall look at creating multi-dimensional arrays. Sounds like fun.
