IST263: Lecture 19. JavaScript Arrays.

Arrays JavaScript.

Create an array

Arrays are treated in JavaScript as objects, so to create an array you need to use something like this:

 var myArray = new Array();
 myArray[0] = 12;
 myArray[1] = 14;
 myArray[4] = 10;

or like this

 var myArray = newArray(5);
 myArray[0] = 12;
 myArray[1] = 14;
 myArray[4] = 10;

Both script do the same thing they creare an array myArray containing 5 elements and initialized 3 of them. You can also initialized the elements of the array immediately at the moment of declaration:

 var Days = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");

Length of the array

You can always know the number of elements in your array by using property length of the array:

 myArray.length

Remember that the index of the last element of the array is equal to length-1.

Array Object Methods

concat()

This method allows you to join together two array objects into a new, third array object. This action doesn't alter the contents or behavior of the two original arrays.

         var array1 = new Array(1, 2, 3);
         var array2 = new Array("a", "b", "c");
         var array3 = array1.concat(array2);
         var array4 = array2.concat(array1);

Click here to see the result.

join()

This method returns the string containing all elements of the array separated by a separator string provided as an argument of the method:

     var Days = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
     var strDays = Days.join(" *** ");

Click here to see the result.

reverse()

This method returns an array of entries in the opposite order of the original. See here how it works.

slice()

Behaving like string method, array.slice() lets you extract a contiguous series of items from the array. The extracted segment becomes an entirely new array object. This method takes two parameters:

start index -- the starting index point of th eextraction (required)

end index -- th eend point (optional)
See here how it works.

sort()

This method takes one parameter the name of the function that compares two elements of the array. This compare() function takes two argument and returns an integer value which is positive if the first argument is "greater" than the second, negative if the opposite, and zero if they are equal.
Example:

    var my_array = new Array(12, 4, 67, 32, 11); 
    finction compare_num(a, b)
    {
        return a - b;
    }
    my_array.sort(compare_num);

Click here to see how it works.

push()

Makes an array to behave like a stack. Method push() pushes an element into the array, the value is appended as the last entry of the array.

pop()

When you issue Array.pop() method, the last item in the array is removed from the array and is returned, plus the array shrinks in length by one.
Example:

    var stack = new Array(); // initially is empty 
    stack.push("first");
    stack.push("second");
    stack.push("third");
    var a = stack.pop();
    var b = stack.pop();

Click here to see how it works.

unshift()

While push() and pop() work at the end of an array, another pair of methods work at the front. To insert a value at the front of an array, use unshift() method ...

shift()

... and to grab the first element and remove it from the array, use shift()
Example:

    var stack = new Array(); // initially is empty 
    stack.unshift("first");
    stack.unshift("second");
    stack.unshift("third");
    var a = stack.shift();
    var b = stack.shift();

Click here to see how it works.
Note that you dont have to use these methods in pairs. You can combine them depending on how you need the data. Here is a small example that implements a queue:

    var queue = new Array(); // initially is empty 
    queue.push("first");
    queue.push("second");
    queue.push("third");
    var a = queue.shift();
    var b = queue.shift();

Click here to see how it works.

splice()

This method allows you to have more control on an array. Using it you can remove and insert elements of the array starting from any position. The arguments of the method are:

start_index the position to start changes from (required)

number_elements_to_remove the number of elements to remove from the array (required)

element1, element2, element3, ... list of elements to insert in the array starting the assigned position (optional)
Example:

JS Code	Array
`var myFish = ["angel", "clown", "mandarin", "surgeon"];`	["angel", "clown", "mandarin", "surgeon"]
`removed = myFish.splice(2, 0, "drum");`	["angel", "clown", "drum", "mandarin", "surgeon"] removed = undefined
`removed = myFish.splice(3, 1)`	["angel", "clown", "drum", "surgeon"] removed = "mandarin"
`removed = myFish.splice(2, 1, "trumpet");`	["angel", "clown", "trumpet", "surgeon"] removed = "drum"
`removed = myFish.splice(0, 2, "parrot", "anemone", "blue")`	["parrot", "anemone", "blue", "trumpet", "surgeon"] removed = ["angel", "clown"]

Here you can see the same code working.

One more way to assign and access element of an array

Sometimes you might want to create an array that holds various pieces of information about something. Here is an example of an array containing some astronomical data about Earth:

   var earth = new Array();
   earth.diameter = "7920 miles";
   earth.distance = "93 millions miles";
   earth.year = "365.25 days";
   earth.day = "24 hours";

Click here to look at this array. If you assigned array elements as properties you can access them the following way:

	a = earth.year;
	b = earth["year"];

but you can not access them through indexes. Although there is a way to find all properties of an object. This example shows how to do that.

See this for additional information.