COM271, Week 10

Arrays, Date, Math, and Type-Related Objects

Syllabus | Table of Pages | Assignments | References and Useful Links

Arrays

From W3Schools, javascript arrays are defined and explained as

What is an Array?

An array is a special variable, which can hold more than one value, at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

var car1="Saab";
var car2="Volvo";
var car3="BMW";

However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300?

The best solution here is to use an array!

An array can hold all your variable values under a single name. And you can access the values by referring to the array name.

Each element in the array has its own ID so that it can be easily accessed.

Create an Array

An array can be defined in three ways.

The following code creates an Array object called myCars:

var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW"); // condensed array

var myCars=["Saab","Volvo","BMW"]; // literal array

W3Schools: "JavaScript Array Object"

Accessing Array Elements: Array elements in JavaScript are indexed beginning with zero. Using the myCars array (above), myCars[2] would return the value "BMW".

Adding, Changing, and Deleting Array Elements: JavaScript arrays can be expanded (new elements added) just by indexing the array and assigning a value, as
myCars[3] = "Chevrolet";
Array values do not have to be set contiguously. Values can be changed by assigning them, as
myCars[21] = 'Ford';

Elements can be removed with delete myCars[3] (removes 4th element from array).

Length: The length property returns the index of the next unfilled position at the end of the array, regardless of whether all elements in the array are filled. It is automatically incremented when elements are added to the array. Having added 'Ford' to myCars[21], above, myCars.length is now 22. Note that this does not mean that memory has been set aside for 22 elements. In JavaScript, memory is allocated only when elements have values. Here, we've filled (above) only myCars[0], myCars[1], myCars[2], myCars[3], and myCars[21].

Manipulating Arrays

Common operations are carried out with array methods:

concat()—returns the array resulting from appending its arguments to the array on which it was involved. Note that concat ( ) does not modify the array itself; you must assign the returned value to the array to do this, e.g., myCars = myCars.concat("Fiat") appends "Fiat" as the last element in the array myCars, assigning the longer array to myCars
join()converts the array to a string and returns the string separated by the character passed with the method. e.g. var xCars = myCars.join(" | ") assigns a string to xCars made of the string representation of the elements in myArr separated by a vertical slash (i.e., xCars now contains "Saab|Volvo|BMW|Chevrolet|Ford|Fiat") following all of the manipulations we've just performed above.
reverse() reverses the order of the elements in the array.
slice() returns a subarray of the array on which it is invoked. Syntax is myArr.slice ( start_index, end_index ). The returned subarray contains elements beginning with start and up to but not including end. If only one element is given, it is assumed to be start, and all elements from start to the end of the array are returned. Negative elements are treated as offsets from the end of the array. Examples:
- document.write(myCars.slice(0,1)); // returns Saab, Volvo
- document.write(myCars.slice(1)); // returns Volvo, BMW, Chevrolet, Ford, Fiat
- document.write(myCars.slice(-2)); //returns Ford, Fiat

splice() is used to add, replace, or remove elements from an array in place. Syntax is myArr ( start, deleteCount, replacevalues ), where start is the index where the operation begins, deletecount is the number of elements to be deleted starting with start, and replacevalues (comma separated if more than one) are inserted to replace deleted elements.

toString() returns a string containing comma-separated values of the array.

toSource() preserves square brackets in the string representation.

sort() sorts the array in place according to lexicographic order.

Multidimensional arrays: Although not part of the spec, most JavaScript browsers will support multidimensional arrays. Remember that each dimension has 0 as its first index.