JavaScript by Example: JavaScript Core Objects. Pt. 1 | 3

JavaScript by Example: JavaScript Core Objects. Pt. 1

Array Properties and Methods

Since an array is an object in JavaScript, it has properties to describe it and methods to manipulate it. The length of an array, for example, can be determined by the length property, and the array can be shortened by using the pop() method. For a complete list of array properties and methods, see Tables 9.1 and 9.2.

Array Object Properties

The Array object only has three properties. The most used is the length property which determines the number of elements in the array, that is, the size of the array.

Property

What It Does

constructor

References the object's constructor

length

Returns the number of elements in the array

prototype

Extends the definition of the array by adding properties and methods
 

 

<html>

<head>

<title>Array Properties</title>

<h2>Array Properties</h2>

<script language="JavaScript">

1 var book = new Array(6); // Create an Array object

book[0] = "War and Peace"; // Assign values to elements

book[1] = "Huckleberry Finn";

book[2] = "The Return of the Native";

book[3] = "A Christmas Carol";

book[4] = "The Yearling";

book[5] = "Exodus";

</script>

</head>

<body bgcolor="lightblue">

<script language="JavaScript">

document.write("<h3>");

 

 

2 document.write("The book array has " + book.length

+ " elements<br>");

</script>

</body>

</html>

 

(Output)

The book array has 6 elements.

 
 
A six-element Array object is declared.
  1. The length property is used to get the length of the array. The length is 6.
Array Methods

Whether you have an array of colors, names, or numbers, there are many ways you might want to manipulate the array elements. For example, you might want to add a new name or color to the beginning or end of the array, remove a number from the end of the array, or sort out all the elements, reverse the array, and so on. JavaScript provides a whole set of methods for doing all of these things and more. See Table 9.2.

Array methods.

Method

What It Does

concat()

Concatenates elements from one array to another array

join()

Joins the elements of an array by a separator to form a string

pop()

Removes and returns the last element of an array

push()

Adds elements to the end of an array

reverse()

Reverses the order of the elements in an array

shift()

Removes and returns the first element of an array

slice()

Creates a new array from elements of an existing array

sort()

Sorts an array alphabetically, or numerically

splice()

Removes and/or replaces elements of an array

toLocaleString()

Returns a string representation of the array in local format

toString()

Returns a string representation of the array

unshift()

Adds elements to the beginning of an array
The concat() Method

The concat() method concatenates the elements passed as arguments onto an existing array (JavaScript 1.2), returning a new concatenated list.

 

newArray=oldArray.concat(new elements);

 

Example:

 

names = names.concat("green, "blue");

 
 
 

 

<html>

<head><title>Array concat() methods</title>

</head>

<body>

<script language="JavaScript">

1 var names1=new Array("Dan", "Liz", "Jody" );

2 var names2=new Array("Tom", "Suzanne");

document.write("<b>First array: "+ names1 + "<br>");

document.write("<b>Second array: "+ names2 + "<br>");

document.write("<b>After the concatenation <br>");

3 names1 = names1.concat( names2);

document.write(names1);

</script>

</body>

</html>

 
 
The first Array object, called names1, is created.
  1. The second Array object, called names2, is created.
  1. After concatenating the names2 array to names1, the result is returned to names1. The concat() method allows the elements of one array to be added to another.
 

The concat() method.

The pop() Method

The pop() method deletes the last element of an array and returns the value popped off.

 

 

var return_value=Arrayname.pop();

 

Example:

 

var popped = myArray.pop();

 
 
 

 

<html>

<head><title>Array pop() method</title>

</head>

<body>

<script language="JavaScript">

1 var names=new Array("Tom", "Dan", "Liz", "Jody");

2 document.write("<b>Original array: "+ names +"<br>");

3 var newstring=names.pop(); // Pop off last element of array

4 document.write("Element popped: "+ newstring);

5 document.write("<br>New array: "+ names + "</b>");

</script>

</body>

</html>

 
 
The Array() constructor creates a new array called names and intializes the array with four values: "Tom", "Dan", "Liz", and "Jody".

  1. The contents of the array called names is displayed.

  2. The last element of the array is removed. The value removed is returned and assigned to the variable called newstring.

  3. The popped value is displayed.

  4. The shortened array is displayed. (See Figure 9.7.)
 


Created: March 27, 2003
Revised: November 19, 2003

URL: http://webreference.com/programming/java_core/1