11.9.1. The reverse( ) Method

arrayName.reverse( )

And here are the impressive results:

var x = [1, 2, 3, 4];
x.reverse( );
trace(x);  // Displays: "4,3,2,1"

We typically use reverse( ) to reorder a sorted list. For example, if we have a list of products sorted by ascending price, we can display them from least to most expensive, or we can reverse the list to display them from most to least expensive.

Reader Exercise: Try to write your own custom function to reverse the elements in an array. Not only is it harder than it looks, you'll most likely find that the built-in reverse( ) method is substantially faster.

11.9.2. The sort( ) Method

arrayName.sort( )

arrayName.sort(compareFunction)

where compareFunction is the name of the function that tells the interpreter how to make its sorting decisions.

To build a compare function, we start with a new function that accepts two arguments (these represent any two elements in the array). In the function's body, we determine, however we see fit, which of the elements we'd like to appear earlier in the element list after a sort( ). If we want the first element to appear before the second element, we return a negative number from our function. If we want the first element to appear after the second element, we return a positive number from our function. If we want the elements to be left in the same positions, we return from our function. In pseudocode, the approach generically looks like this:

function compareElements (element1, element2) {
  if (element1 should appear before element2) {
    return -1;
  } else if (element1 should appear after element2) {
    return 1;
  } else {
    return 0;  // The elements should be left alone
  }
}

For example, to put elements in ascending numeric order, we could use a function like this:

function sortAscendingNumbers (element1, element2) {
  if (element1 < element2) {
    return -1;
  } else if (element1 > element2) {
    return 1;
  } else {
    return 0;  // The elements are equal
  }
}

// Now that our compare function is ready, let's try it out
var x = [34, 55, 33, 1, 100];
x.sort(sortAscendingNumbers);
trace(x);    // Displays: "1,33,34,55,100"

Numeric-sort functions can actually be phrased much more succinctly. The preceding sortAscendingNumbers( ) function could be written as:

function sortAscendingNumbers (element1, element2) {
  return element1 - element2;
}

In our optimized version, a negative number is returned if element1 is less than element2, a positive number is returned if element1 is greater than element2, and a is returned if the two are equal. Now that's elegant! Here is a version to perform a descending sort:

function sortDescendingNumbers (element1, element2) {
  return element2 - element1;
}

Of course, the comparison does not always have to involve simple strings and numbers. Here we sort an array of movie clips in ascending order, according to their pixel area:

var clips = [square1, square2, square3];

function sortByClipArea (clip1, clip2) {
  clip1area = clip1._width * clip1._height;
  clip2area = clip2._width * clip2._height
  return clip1area - clip2area;
}

clips.sort(sortByClipArea);

11.9.3. The slice( ) Method

origArray.slice(startIndex, endIndex)

where startIndex specifies the first element to retrieve and endIndex specifies the element after the last element we want to retrieve. The slice( ) method returns a new array containing a copy of the series of elements from origArray[startIndex] to origArray[endIndex - 1]. If endIndex is omitted, it defaults to origArray.length and the returned array contains the elements from origArray[startIndex] through origArray[origArray.length-1]. Here are a couple of examples:

var myList = ["a", "b", "c", "d", "e", "f"];
myList.slice(1, 3);  // Returns ["b", "c"], not ["b", "c", "d"]
myList.slice(2);     // Returns ["c", "d", "e", "f"]

11.9.4. The join( ) Method

arrayName.join(delimiter)

where delimiter is the string used to separate the converted elements of arrayName. If unspecified, delimiter defaults to a comma. The result of a join( ) statement is easiest to understand through an example:

var siteSections = ["animation", "short films", "games"];

// Sets siteTitle to "animation>> short films>> games"
var siteTitle = siteSections.join(">> ");

// Sets siteTitle to "animation:short films:games"
var siteTitle = siteSections.join(":");

Note that join( ) does not modify the array upon which it is invoked. Instead, it returns a string based on that array.

When called without a delimiter argument, join( ) behaves exactly like toString( ). Because toString( ) does not add a space after the comma it uses to delimit elements, we may wish to use join( ) if we want nicely formatted output:

var x = [1, 2, 3];
trace(x.join(", "));  // Displays: "1, 2, 3" instead of "1,2,3"

var x = [1, [2, 3, 4], 5];
x.join("|");  // Returns "1|2,3,4|5"

11.9.5. The toString( ) Method

11.9.6. Arrays as Objects