The JavaScript Diaries: Part 13/Part 4

[previous] [next]

The JavaScript Diaries: Part 13 - Array Properties and Methods

shift()

What if you want to remove the first element from the array? You can do that using the shift() method. Think of it as taking the first element and "shifting" it to the left, out of the array. You can do it using the following format.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The original lineup is " + chevCar);
chevCar.shift();
alert("The new lineup is " + chevCar);

The first part of the script works just like the previous above. However, after displaying all of the elements, it removes the first one and displays an alert window with the remaining two elements. You can also assign the element that is removed to a variable and use it again, if you like.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The original lineup is " + chevCar);
newCar=chevCar.shift();
alert("The new lineup is " + chevCar);
alert("My new car is a " + newCar);

unshift()

You've probably already figured out what this one does. It adds an element to the beginning of the array. In this case, you'll have to specify the element to be added.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The original lineup is " + chevCar);
chevCar.unshift("Camaro");
alert("The new lineup is " + chevCar);

reverse()

If, for some reason, you wanted to reverse the order of the elements in an array, you can use the reverse() method. Here's how it works. Let's say, for example, that in the array above, I wanted to list the cars in reverse of the order they are listed in the array. I could use the script below to accomplish this.

var chevCar = new Array("Nova","Impala","Corvette");
alert("The original lineup is " + chevCar);
chevCar.reverse();
alert("The new lineup is " + chevCar);

The script will first display an alert window listing the elements in their current order: Nova,Impala,Corvette. Then, using the reverse() method, the script will display an alert window with the elements in reverse: Corvette,Impala,Nova. Using just three elements, the middle one never moves. However, if we had additional elements, they would also be reversed.

slice();

We have popped, pushed, shifted, unshifted, reversed, joined, and concatenated the arrays. We now know how to add and remove elements at each end of the array, how to join them together as one, and how to add two or more arrays together to form a new array. But life is not that simple and neither are real world problems. What if you need to manipulate elements located in the middle of the array?

To remove elements from the middle of an array and use them in a new array, you can use the slice() method. (Note that the elements are not actually removed so the original array is left intact.) In order to accomplish this, you would use the array name that is to have the elements removed, followed by the slice() method. The slice() method is given the index numbers of the elements to be removed. The pattern for listing the elements to be removed is, The slicing will begin at the first index number listed, while the last number is one index number after the last element to be removed. For instance:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
var rmCars = chevCar.slice(1,5);
alert("The new array contains " + rmCars);

In this script, the slice() method contains a parameter of the index numbers of 1,5, of the array chevCar. This means that starting with the element with an index number of 1 ("Impala"), all of the elements will be removed up to, but not including, the element with an index number of 5 ("Cobalt"). In our script then, the slice() method would remove the elements Impala,Corvette,Camaro,Nomad and display them in the alert window. Remember, array indexes begin with the number "0" so in our case Impala has the index number of "1."

[previous] [next]

URL: