This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
The Power of Arrays II - Methods of Arrays

The Power of Arrays II - Methods of Arrays

First, I would like to apologize for the delay in getting this follow up tutorial to you all, and I really appreciate all the emails I received about my first tutorial, they were very encouraging.

I was contracted by Sams Publishing to work on Flash MX Unleashed, which is scheduled for release in mid July. And I did do the arrays section.

Similar to the first tutorial, through out this tutorial I will be using allot of code fragments and output display messages. To recognize which is which, use these examples below.

Regular text will look like this.

code: All code will look like this



Output: All output display text will look like this

Before we jump right in with methods, quick review on how to create them.

We will be using the Array() constructor as well as the new operator like this:

myArray = new Array();



Ok, now we have our array, and we will be creating arrays like this throughout the tutorial.

In The Power of Arrays I, we did go over one method that I want to revisit, the push() method.

This method adds data to the end of an array while increasing its length by 1. Lets take a look:

myArray = new Array();
myArray.push("Testing");
trace (myArray);



//output: Testing

Also, as mentioned, the push() method increases an array's length by 1 every time it is invoked. We have not discussed the length of an array as of yet, and it should be mentioned here since it is an array's only property.

The length property measures how many elements are in an array. To use this property, simply attach the keyword length to an array using dot syntax.

anyArray.length;



So lets use the same example as before, but this time, we will trace the length twice to show the difference.

myArray = new Array();
trace(myArray.length);
myArray.push("Testing");
trace(myArray.length);



Output:
0
1


Note: as far as indexing goes, the last element in array can always be seen as the array's length - 1.

lastElement = myArray[myArray.length-1];



Since we know how to add elements to the end of an array, now lets add them to the begining using the unshift() method.

This method works similar to the push() method, except it will add elements to the begining instead of the end, while still increasing the array's length by 1.

Now lets take a look at an example, this time we will create an array with some elements in it, and then add an element to the begining:

myArray = new Array(1,2,3);
myArray.unshift(4);
trace(myArray);



Output: 4,1,2,3

Yet another method for adding elements to an array is the concat() method. What makes this method stand out is that it aids in joining arrays, but does not affect the original array that is being joined.

Let me show you what I mean.

First, create two arrays holding different information, and then combine them while setting them equal to another array.

namesArray = new Array("David","Beth");
agesArray = new Array(22,23);
myArray = namesArray.concat(agesArray);
trace (myArray);



Output: David,Beth,22,23

If we were to trace either of the original arrays, you would see that they have not changed what so ever.

Although you do not have to use this method solely for combining arrays, you can also add individual elements using it as well, but again, it will not affect the original, as we will see here:

myArray = new Array("hat","coat");
trace(myArray.concat("pants"));
trace(myArray);



Output:
hat, coat, pants
hat, coat


Again, notice how when we traced the array with the concat() method, it added the word "pants" at the end, but when we traced the actual array itself, pants was not added.

If we had wanted to add pants permanently to the array, we would have to used this code:

myArray = new Array("hat","coat");
myArray=myArray.concat("pants");
trace(myArray);



Output: hat, coat, pants

OK, so we have gone over some of the basic methods for adding to arrays, lets touch on some of the methods we looked at before and a couple new ones for removing elements from arrays starting with the pop() method.

We touched on the pop() method before in the previous tutorial, but I still want to revisit it as well as the shift() method, then we will go into some more advanced methods for manipulating elements in arrays.

The pop() method removes the last element in an array, and decreases its length by 1. It does not require any parameters between the parentheses, simply invoke it by attaching it to an array using dot syntax like this:

myArray = new Array("phone","fax");
myArray.pop();
trace(myArray);



Output: phone

The shift() method also removes an element from an array, but it removes it from the beginning and also decreases the length of the array by 1.

myArray = new Array("phone", "fax");
myArray.shift();
trace(myArray);



Output: fax

Another cool thing that both of these methods are capable of is that you can keep what you remove from an array in a variable or another array.

To accomplish this, simply set it equal to a variable like this.

myArray = new Array ("html", "xml", "asp");
myVariable = myArray.pop();
trace(myVariable);



Output: asp

As you can see, the variable now holds the element pulled from the array. And the shift() method works in a similar way.

Two new methods we are going to go over now are the slice() and the splice() method, which can remove elements from arrays as well as other important actions with arrays.

First we will go over the slice() method. You can use this method to extract elements from arrays and store them in other arrays without affecting the original array. You use this method like the others we have used so far, but this one does have two parameters: the starting index and the ending index. Lets take a look at how it works :

myArray = new Array(1,2,3,4,5,6);
myArray2 = myArray.slice(1,3);
trace(myArray2);
trace(myArray);



Output:
2,3,
1,2,3,4,5,6


Notice that the slice() method did not pull the ending index, only from the starting index up to the ending index. Now we will see what happens when we do not even include an ending index.

myArray = new Array(1,2,3,4,5,6);
myArray2 = myArray.slice(1);
trace(myArray2);



Output:
2,3,4,5,6


As you can see, it grabs every element from the starting index all the way to the last element in the array, and because we used the slice() method, again, the original array is un affected. Now we will use the splice() method which is very similar to the slice() method except that you specify the number of elements to remove, and the original array is changed.

So to remove items, the basic layout looks like this:

array.splice(startingIndex, amount);



So lets see it in action.

myArray = new Array(1,2,3,4,5,6);
myArray2 = myArray.splice(1,3);
trace(myArray2);
trace(myArray);



Output:
2,3,4
1,5,6


So as you can see, it pulls the 2nd element through the 4th element permanently.

Ok, we've seen how to take away elements from an array using the splice() method, but now lets see how to add them in.

You use the same format you have been, but this time add the elements in the parameters separated by commas, after the amount to remove parameter like this:

array.splice(startingIndex, amount, element1, element2, element3);



That was the basic layout, here is an applied example:

myArray = new Array(1,2,3,4,5,6);
myArray.splice(1,3,7,8,9);
trace(myArray);



Output: 1,7,8,9,5,6

And you can add arrays to arrays using the splice() method metthod like this:

myArray = new Array(1,2,3,4);
myArray2 = new Array(5,6,7,8);
myArray.splice(2,0,myArray2);
trace(myArray);
trace(myArray[2]);



Output:
1,2,5,6,7,8,3,4
5,6,7,8


Notice when we traced the third element (index of 2) it did not give us back just the number 5 like you might expect, but instead the entire array we just placed in their. These elements are called nested arrays and that is what we are going to cover in the third and final part of the Power of Arrays called "Nested Arrays: what they are and how to use them" (which I promise won't take too long to get posted).

 

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register