The JavaScript Diaries: Part 13/Part 5

[previous]

The JavaScript Diaries: Part 13 - Array Properties and Methods

splice()

In order to actually remove items from the actual array, you can use the splice() method. The format here begins with the array name and then the splice() method added with the dot operator. The parameters of the splice() method are a bit different than the slice() method, however. In the splice() method, the first number is the index number of the element to be removed, and the second number is how many elements after that will be removed. For instance:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
chevCar.splice(2,3);
alert("The new array contains " + chevCar);

Here, the elements are removed beginning with the one which has an index number of 2 ("Corvette"); the next parameter is three so three elements in total will be removed ("Corvette","Camaro","Nomad"). The resulting alert window will display, "The new array contains Nova,Impala,Cobalt." The elements that are removed can be assigned to a new variable and re-used:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
var rmCars = chevCar.splice(2,3);
alert("The new array contains " + rmCars);

In addition, you can also add new elements to the array. They will be added after the index number where the splice begins. If you want to add an element, while removing others, you can do it like this:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
chevCar.splice(2,3,"Monte Carlo");
alert("The new array contains " + chevCar);

This will remove three elements, beginning with the one with an index number of 2. If you only want to add elements, without removing any, you could accomplish that in this manner:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
chevCar.splice(2,0,"Monte Carlo");
alert("The new array contains " + chevCar);

This is the same as the previous example except here, the first number is where the splice will begin and the "0" tells the script to not delete any elements. The script would just add the new element and the alert window would display: "The new array contains Nova,Impala,Monte Carlo,Corvette,Camaro,Nomad,Cobalt."

Whew! These can be a bit confusing but, take heart from this statement by Jeremy Keith, in his recent book, "I'll let you in on a secret: nobody memorizes all that syntax and keywords that are part and parcel of any programming language. That's what reference books are for." (DOM Scripting, Jeremy Keith, Berkeley, friends of ED, 2005, pg. xxi)

sort()

Sorts the elements of an array into alphabetical, not numerical, order. The format is the same as the other methods: arrayName.sort();. Using our previous example, we would write it as:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
chevCar.sort();
alert(chevCar);

Try this and see what happens:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
chevCar.sort();
chevCar.reverse();
alert(chevCar);

Or, try this:

var chevCar = new Array("Nova","Impala","Corvette","Camaro","Nomad","Cobalt");
chevCar.sort();
var chevCar2 = chevCar.join(" and ");
alert(chevCar2);

You can combine the different methods to get a range of different results.

Conclusion

That wraps up our study on arrays, and their properties and methods. You should have enough information to enable you to create multiple arrays for all types of uses. In our next installment we'll take a look at the Date, Number, and Math objects. Until then — keep on scriptin'!

Continue on to "The JavaScript Diaries: Part 14"

[previous]

URL: