Javascript - Array Object

The Array object provides an easier way to create and manage arrays to javascript.

Syntax

var variablename = new Array()
var variablename = new Array(int)
var variablename = new Array(arg1, ... , argN)

Arguments and Return Values Associated with the Array Object

Item	Description
*Arguments*
int	When the array constructor contains one argument, an array is created, and its length property is set to the value int.
arg1, ..., argN	When the parameter list of the array constructor contains more than one argument, an array is created and the array is populated with the arguments. The array length property is set to the number of arguments in the parameter list.
*Returns*
	The newly created array is returned from the constructor.

Example

<html>
<script language="javascript">
<!--
//create a new array
myArray = new Array(10, 5, 22, 26, 12);

//display the item in array
document.write("Item1=",myArray[0],"<br>"); // print out 10
document.write("Item3=",myArray[2],"<br>"); // print out 22
document.write("Item4=",myArray[3],"<br>"); // print out 26

//-->
</script>
</html>

Properties and Methods Used by the Array Object

Item	Description
*Property*
length	The number elements in the array
*Methods*
concat()	Concatenates an array in the array
join()	Concatenates all elements of an array into one string
pop()	Deletes the last element from an array
push()	Adds elements to the end of an array
reverse()	Reverses the order of the elements in the array
shift()	Deletes elements from the front of an array
slice()	Returns a subsection of the array
sort()	Sorts elements in array
splice()	Inserts and removes elements from an array
toSource()	Converts elements to a string with square brackets
toString()	Converts elements to a string
unshift()	Adds elements to the front of an array

Array.concat()

Syntax

array.concat(arg1,...,argN)

Description

The concat() method adds the elements listed in the parameter list to the end of the existing array and returns the result. The original is not changed by this method. Should any of the arguments be Array, the elements of that array are concatenated to the array that called the method.

Example

//create an array1
myArray1 = new Array("red", "orange");

//create an array2
myArray2 = new Array("green", "yellow");

//use the function
myArray3 = myArray1.concat(myArray2);
//myArray3 will contain "red", "orange", "green", "yellow"

Array.join()

Syntax

array.join()
array.join(string)

Description

The join() method converts all the elements of the array to strings and then concatenates all the strings into one string. If an argument is provided in the parameter list, it is used to separate the elements in the string returned by the method.

Example

//create an array
myArray1 = new Array("red", "orange", "purple");

//join the array
result = myArray1.join("-");
//result = "red-orange-purple"

Array.length

Syntax

array.length

Description

The length property holds the number of elements in the array. This property is a read/write variable. If the length property is overwritten with a number that is larger than the original, new elements are added to the end of the array and assigned undefined values. If the length property is overwritten with a number that is smaller than the original number, elements at the end of the array are lost.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

length1 = myArray1.length; //length1 = 5;
myArray1.length = 3; 
//myArray1 now contains "red", "orange", "purple", index 4 and 5 has been removed

Array.pop()

Syntax

array.pop()

Description

The pop() method pops elements off the end of the array by deleting the last element of the array and setting the array's length property to one less than its current value. This last element is returned from the method.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

thisColor = myArray1.pop(); //Removed "yellow"
document.write(thisColor," was removed from array");

Array.prototype

Syntax

Array.prototype.property
Array.prototype.method

Description

The prototype property allows you to add new properties and methods to the Array object that can be used throughout your code

Example

Suppose that pop() method is available to some browsers but not support by Internet Explorer. To make this method available to all browsers, a new pop() method is created. This method overrides the functionality of the browser that is supported.

//create your own pop function
function pop(){
    if(this.length != 0){
         var lastElement = this[this.length-1]; //get the last element
         this.length = this.length-1; //remove last element from array
         return lastElement; //return the last element

    }

}

//make the pop() function available to all Array objects
Array.prototype.pop = pop;


//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

//use your own function
var removeElement = myArray1.pop(); //your pop() function will be called instead of original
document.write(removeElement," was removed from the array");

Array.push()

Syntax

array.push(arg1,...,argN)

Description

The push() method pushes the elements specified in the parameter list on to the end of the array in the order they were listed. The value return is the last element that has been added to the end of the array, which is also the last argument in the parameter list.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

//add 2 more items to the end of the array
lastItem = myArray1.push("black", "white");

//print out the result
document.write("myArray contains ",myArray1.join(','))

Array.reverse()

Syntax

array.reverse()

Description

The reverse() method reverses the order of the elements in the array according to the array index numbers.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");
myArray1.reverse(); //Reverse the item in the array

//display the item in array
document.write("Item1=",myArray1[0],"<br>"); // print out yellow
document.write("Item3=",myArray1[2],"<br>"); // print out purple
document.write("Item4=",myArray1[3],"<br>"); // print out orange

Array.shift()

Syntax

array.shift()

Description

The shift() method deletes and returns the first element of the array. Once deleted, all the remaining elements are shifted down one spot, so the first position is filled by the element that was previously in the second position.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

aColor = myArray1.shift(); //red is pulled from array
//aColor = "red";
//now member of myArray1 are "orange", "purple", "green", "yellow"

Array.slice()

Syntax

array.slice(start)
array.slice(start, stop)

Description

The slice() method returns a new array that contains the elements of the original array starting at position start and ending at the element position before stop. If no stop position is specified, the new array will contain the elements of the original array, starting at the position stated in start through the end of the array.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

myNewArray = myArray1.slice(1, 4);
//myNewArray contains "orange", "purple", "green"

Array.sort()

Syntax

array.sort()
array.sort(function)

Description

The sort() method rearrange the elements of the array based on a sorting order. If the method has no parameters, JavaScript attempts to convert all the elements of the array to strings and then sort them alphabetically. If the array should be sorted some other way, a function must be provided to handle the new sorting algorithm. The function specified must operate based on the following rules:

The function must accept two arguments that are to be compared.
The function must return a number indicating the order of the two arguments in relation to each other.
If the first argument should appear before the second argument, a number less than zero should be returned from the function.
If the first argument should appear after the second argument, a number greater than zero should be returned from the function.
If both arguments are equivalent, zero should be returned from the function.

When the function specified by the sort() method returns zero, signifying that the arguments are equal, the arguments remain in the same order relative to each other after the function has been called.

Example

//create function sort arguments based on their length
function mySort(arg1, arg2){
   if(arg1.length < arg2.length)
       return -1;
   if(arg1.length > arg2.length)
       return 1;
   if(arg1.length == arg2.length)
       return 0;

}


myArray1 = new Array("purple", "white", "red");
myArray1.sort(mySort);

//now the content of myArray1 will be "red", "white", "purple"

Array.splice()

Syntax

array.slice(start, delete, arg3, ..., argN)

Description

The splice() method provides a way for elements to be either added to or deleted from the array. When the delete parameter contains a number other than zero, the elements beginning at start and ending at index start+ending are deleted from the array. If delete is zero, no elements are deleted. All elements from start to the end of the array are deleted when delete is not specified. If arguments follow the delete parameter, they are added to the array as elements beginning at the position specified by start. Existing elements are shifted up to allow room for the new elements.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

myArray1.splice(0, 1, "pink"); //"red" will be delete and "pink" will be put in the place of "red" instead
//myArray1 now contains "pink", "orange", "purple", "green", "yellow"

Array.toSource()

Syntax

array.toSource()

Description

The toSource() method returns one string representing the source of the Array object. The string that is returned contains all the elements in the array separated with commas. The entire string is enclosed with brackets ([]) to show it is an array. If another array is contained within an array, its contents are also part of the string with its own set of brackets.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

//create new array and include myArray1 as subarray
myArray2 = new Array("Mango", "PineApple", myArray1);

result = myArray2.toSource();
//result will be ["Mango", "PineApple", ["red", "orange", "purple", "green", "yellow"]]

Array.toString()

Syntax

array.toString()

Description

The toString() method returns one string that contains all the elements in the array separated with commas. This method will automatically convert an array to a string when the array is used in string context.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

document.write(myArray1); //same as myArray1.toString()
//result will be "red,orange,purple,green,yellow"

Array.unshift()

Syntax

array.unshift(arg1,...,argN)

Description

The unshift() method adds the arguments listed in the parameter list to the front of the array as new elements. Existing elements are shifted up to allow room for the new elements. The method returns the length of the array after adding the new elements.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");


newLength = myArray1.unshift("blue", "black"); //newLength = 7
//result will be "blue", "black", "red", "orange", "purple", "green", "yellow"

Array.valueOf()

Syntax

array.valueOf()

Description

The valueOf() method returns the primitive value of the object. In terms of an instance of an Array object, this method returns the array elements separated by commas. If an array contains another array, the contents are flattened when this method is used.

Example

//create an array
myArray1 = new Array("red", "orange", "purple", "green", "yellow");

//create new array and include myArray1 as subarray
myArray2 = new Array("Mango", "PineApple", myArray1);

document.write(myArray2.valueOf());
//result will be "Mango, PineApple, red, orange, purple, green, yellow"

CSharp (21)

PHP (11)

JavaScript (9)

HTML (11)

ASP (13)

Photoshop (11)