Now we will look at methods that allow you to manipulate arrays such as adding a new element at the beginning or end of an array, removing an element from the end of an array, reversing
Trang 19.3 Array Methods
Because an array is an object in JavaScript, it has properties to describe it and methods
to manipulate it The length property of an array was used in previous examples to
deter-mine the size of an array Now we will look at methods that allow you to manipulate
arrays such as adding a new element at the beginning or end of an array, removing an
element from the end of an array, reversing an array, and so on JavaScript provides a
whole set of methods for doing all of these things and more (see Table 9.2)
Figure 9.12 An associative array—one key associated with more than one value.
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.
Trang 2The concat() Method. The concat() method concatenates the elements passed as
arguments onto an existing array (JavaScript 1.2), returning a new concatenated list
The method does not change the existing array in place You must assign results to either
an existing array or a new one
F O RM A T
newArray=oldArray.concat(new elements);
E X A M P L E
names = names.concat("green, "blue");
E X A M P L E 9 1 0
<html>
<head>
<title>Array concat() methods</title>
</head>
<body>
<script type="text/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>
E X P L A N A T I O N
1 The first Array object, called names1, is created.
2 The second Array object, called names2, is created.
3 After concatenating the names2 array to names1, the result is returned written to
names1 (see Figure 9.13) Without assigning the return value to names1, names1
will not be changed You can return the results to a completely different array The
concat() method allows the elements of one array to be added to another.
Figure 9.13 The Array concat() method before and after.
Trang 3The pop() Method. The pop() method deletes the last element of an array and
returns the value popped off
The push() Method. The push() method adds new elements onto the end of an array,
thereby increasing the length of the array JavaScript allocates new memory as needed
F O RM A T
var return_value=Arrayname.pop();
E X A M P L E
var popped = myArray.pop();
E X A M P L E 9 1 1
<html>
<head><title>Array pop() method</title></head>
<body>
<script type="text/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>
E X P L A N A T I O N
1 The Array() constructor creates a new array called names and initializes the array
with four values: “Tom”, “Dan”, “Liz”, and “Jody”.
2 The contents of the array called names is displayed.
3 The last element of the array is removed The value removed is returned and
as-signed to the variable called newstring.
4 The popped value is displayed
5 The shortened array is displayed (see Figure 9.14)
Figure 9.14 The Array pop() method.
Trang 4The shift() and unshift() Methods. The shift() method removes the first element of
an array and returns the value shifted off; the unshift() method adds elements to the
beginning of the array These methods are just like pop() and push() except that they
manipulate the beginning of the array instead of the end of it
F O RM A T
Arrayname.push(new elements); // Appended to the array
E X A M P L E
myArray.push("red", "green", "yellow");
E X A M P L E 9 1 2
<html>
<head><title>Array push() method</title></head>
<body>
<script type="text/javascript">
1 var names=new Array("Tom", "Dan", "Liz", "Jody");
2 document.write("<b>Original array: "+ names + "<br />");
3 names.push("Daniel","Christian");
4 document.write("New array: "+ names + "</b>");
</script>
</body>
</html>
E X P L A N A T I O N
1 An Array object called names is declared and initialized.
2 The contents of the array (i.e., all of its elements) are displayed
3 The push() method appends two new elements, “Daniel” and “Christian”, to the
end of the names array.
4 The array has grown It is displayed in the browser window with its new elements
(see Figure 9.15)
Figure 9.15 The Array push() method before and after.
Trang 5The slice() Method. The slice() method copies elements of one array into a new
array The slice() method takes two arguments: The first is the starting element in a range
of elements that will be copied, and the second is the last element in the range, but this
element is not included in what is copied Remember that the index starts at zero, so that
a beginning position of 2 is really element 3 The original array is unaffected unless you
assign the result of the slice back to the original array
F O RM A T
var return_value=Arrayname.shift();
Arrayname.shift( new elements); // Prepended to the array
E X A M P L E
var shifted_off = myArray.shift();
myArray.shift("blue","yellow");
E X A M P L E 9 1 3
<html>
<head><title>Array shift() and unshift() methods</title></head>
<body>
<script type="text/javascript">
1 var names=new Array("Dan", "Liz", "Jody" );
document.write("<b>Original array: "+ names + "<br />");
document.write("New array after the shift: " + names);
3 names.unshift("Nicky","Lucy");
// Add new elements to the beginning of the array
document.write("<br />New array after the unshift: " + names);
</script>
</body>
</html>
E X P L A N A T I O N
1 A new Array object called names is created.
2 The first element of the array is shifted off, shortening the array by 1
3 The unshift() method will prepend to the beginning of the array the names
“Nicky” and “Lucy”, thereby making it longer by two elements (see Figure 9.16).
Figure 9.16 The Array shift() and unshift() methods.
Trang 6The splice() Method. The splice() method removes a specified number of
ele-ments from some starting position in an array and allows you to replace those items
F O RM A T
var newArray = Arrayname.slice(first element, last element);
E X A M P L E
var ArraySlice = myArray.slice(2,6); // ArraySlice contains elements
// 2 through 5 of myArray.
E X A M P L E 9 1 4
<html>
<head><title>Array slice() method</title></head>
<body>
<script type="text/javascript">
1 var names=new Array("Dan", "Liz", "Jody", "Christian",
"William");
document.write("<b>Original array: "+ names + "<br />");
2 var sliceArray=names.slice(2, 4);
document.write("New array after the slice: ");
</script>
</body>
</html>
E X P L A N A T I O N
1 This is the original array of names
2 The slice() method will start at position 2, copy Jody into the new array, then
Christian, and stop just before position 4, William The original array is not
affect-ed by the slice
3 The new array created by the slice() method is displayed (see Figure 9.17).
Figure 9.17 Using Array slice() to copy elements of an array.
Trang 7with new ones (Don’t confuse this method with the slice() method The slice()
method copies elements, the splice() method removes and/or replaces elements
Ropes, tapes, and films are spliced; bread, meat, and golf balls are sliced.)
F O RM A T
Arrayname.splice(index position, number of elements to remove);
Arrayname.splice(index position, number of elements to remove,
replacement elements);
E X A M P L E
myArray.splice(3, 2);
myArray.splice(3, 2, "apples","oranges");
E X A M P L E 9 1 5
<html>
<head><title>Array splice() method</title></head>
<body>
<script type="text/javascript">
// splice(starting_pos, number_to_delete, new_values)
1 var names=new Array("Tom","Dan", "Liz", "Jody");
document.write("<b>Original array: "+ names + "<br />");
2 names.splice(1, 2, "Peter","Paul","Mary");
3 document.write("New array: "+ names + "</b>");
</script>
</body>
</html>
E X P L A N A T I O N
1 An Array object called names is declared and initialized.
2 The splice() method allows you to delete elements from an array and optionally
re-place the deleted elements with new values The first arguments to the splice
meth-od are 1, 2 This means: start at element 1, and remove a length of 2 elements In
this example, element 1 starts with “Dan” (element 0 is “Tom”) “Liz” is the second
element Both “Dan” and “Liz” are removed The next three arguments, “Peter”,
“Paul”, and “Mary”, are then inserted into the array, replacing “Dan” and “Liz”.
3 The new names array is displayed in the browser window (see Figure 9.18).
Figure 9.18 The splice() method to delete and insert elements of an array.
Trang 89.4 The Date Object
JavaScript provides the Date object for manipulating date and time.2 Like the String and
Array objects, you can create as many instances as you like.
As we’ll see, the Date object provides a number of methods for getting or setting
spe-cific information about the date and time The date is based on the UNIX date starting
at January 1, 1970 (in Greenwich Mean Time3 [GMT]), and doesn’t support dates before
that time Figure 9.19 gives you an idea of the difference between GMT and local time
Time is measured in milliseconds (one millisecond is one thousandth of a second)
Because client-side JavaScript programs run on a browser, the Date object returns times
and dates that are local to the browser, not the server Of course, if the computer is not
set to the correct time, then the Date object won’t produce the expected results Figure
9.20 shows a typical date and time control panel
2 For more information about the time and date, see http://www.timeanddate.com/worldclock/.
3 Greenwich Mean Time (GMT) is now called Universal Coordinate Time (UTC) The current time in
Greenwich, England is five hours + New York’s present time, or eight hours + San Francisco’s present
time.
Figure 9.19 24-hour world time zones map with current time Courtesy of
http://www.worldtimezone.com/index24.html.