ActionScript: Removing All Elements from Array

This blog entry demonstrates four ActionScript 3.0 approaches for removing all the elements from an Array. The four approaches covered are using Array.pop(), Array.shift(), Array.splice(0), and ArrayCollection.removeAll().

The first approach in the example, using Array.pop(), demonstrates stack-like Last-In-First-Out (LIFO) behavior and removes the last entry from the Array. The second approach, using Array.shift(), demonstrates queue-like First-In-First-Out (FIFO) behavior and removes the first entry from the Array.

The third approach demonstrated in the example is to use Array.splice(0). This is my preferred approach when using Array directly (rather than using ArrayCollection) because no explicit loop is required. The only disadvantage to this approach is that it may not be intuitive to developers new to ActionScript. The developer must understand or learn that the first argument to Array.splice() is the starting element to be affected by splice, that the second element should be left undefined to indicate no end index to the splice (zero indicates no deletion, so it must be left undefined).

The fourth demonstrated approach is to use the ArrayCollection wrapper on the array. Because ArrayCollection offers many benefits for Array manipulation in other aspects of a Flex application, this is my preferred approach to removing all elements from the array. Like the splice() approach, this approach only requires a single line of code to perform the removal of all elements. Also, it has the added advantage of the code speaking more clearly for itself to even developers new to ActionScript.

Here is a code example (ArrayElementsRemoval.mxml) that demonstrates these four approaches to removing all elements from an ActionScript array.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                width="750" height="500"
  applicationComplete="runArrayElementsRemovals();">

  <mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
    
  /**
   * To compile solely this Flex application from the command line, use
   *    mxmlc -debug=true -strict=true ArrayElementsRemoval.mxml
   *
   * This application demonstrates four different mechanisms for removing all
   * elements from an ActionScript array: pop(), shift(), splice(0), and using
   * an ArrayCollection (wrapper).
   */

  [Bindable] private var example1Array:ArrayCollection = new ArrayCollection();
  [Bindable] private var example2Array:ArrayCollection = new ArrayCollection();

  /**
   * Demonstrate different methods for removing elements from ActionScript
   * Arrays.
   */
  public function runArrayElementsRemovals():void
  {
    var popArrayExample:Array = generateArrayExample("pop");
    trace( "popArrayExample  (pre): " + popArrayExample );
    removeArrayElementsWithPop(popArrayExample);
    trace( "popArrayExample (post): " + popArrayExample );

    var shiftArrayExample:Array = generateArrayExample("shift");
    trace( "shiftArrayExample  (pre): " + shiftArrayExample );
    removeArrayElementsWithShift(shiftArrayExample);
    trace( "shiftArrayExample (post): " + shiftArrayExample );

    var spliceArrayExample:Array = generateArrayExample("splice");
    trace( "spliceArrayExample  (pre): " + spliceArrayExample );
    removeArrayElementsWithSplice(spliceArrayExample);
    trace( "spliceArrayExample (post): " + spliceArrayExample );

    var arrayCollectionExample:ArrayCollection =
      new ArrayCollection( generateArrayExample("ArrayCollection") );
    trace( "arrayCollectionExample  (pre): " + arrayCollectionExample );
    removeElementsInArrayCollection( arrayCollectionExample );
    trace( "arrayCollectionExample (post): " + arrayCollectionExample );

    trace( "End of Array Elements Removals ");
    trace( "\tpop() - Stack-like LIFO" );
    trace( "\tshift() - Queue-like FIFO" );
    trace( "\tsplice() - Remove from middle" );
    trace( "\tArrayCollection.removeAll() - most obvious" );
  }

  /**
   * Generate an example Array that can be used in demonstrations of how to
   * remove elements from an array.
   *
   * @param aPrefix Prefix to prepend to hard-coded values in array.
   * @return Generated example array.
   */
  private function generateArrayExample(aPrefix:String):Array
  {
    var exampleArray:Array = [aPrefix + "-one", aPrefix + "-two",
                              aPrefix + "-three", aPrefix + "-four",
         aPrefix + "-five", aPrefix + "-six"]; 
    return exampleArray;
  }

  /**
   * Remove array elements with Array.pop().
   *
   * @param aArray Array to have its elements removed via pop().
   */
  public function removeArrayElementsWithPop(aArray:Array):void
  {
    const sizeArray:int = aArray.length;
    for ( var index:int =0 ; index < sizeArray; index++ )
    {
      aArray.pop();
    }
  }

  /**
   * Remove array elements with Array.unshift().
   *
   * @param aArray Array to have its elements removed via unshift().
   */
  public function removeArrayElementsWithShift(aArray:Array):void
  {
    const sizeArray:int = aArray.length;
    for ( var index:int = 0; index < sizeArray; index++ )
    {
      aArray.shift();
    }
  }

  /**
   * Remove array elements using Array.splice().
   *
   * @param Array to have its elements removed via splice().
   */
  public function removeArrayElementsWithSplice(aArray:Array):void
  {
    aArray.splice(0);
  }

  /**
   * Remove array elements using ArrayCollection's removeAll().
   *
   * @param aArray ArrayCollection to have its elements removed with removeAll().
   */
  public function removeElementsInArrayCollection(aArray:ArrayCollection):void
  {
    aArray.removeAll();
  }
  ]]>
  </mx:Script>

  <mx:HBox id="mainBox">
   <mx:Label text="See trace() output in debugger!" />
  </mx:HBox>

</mx:Application>

As indicated in the code sample above, this should be compiled with debug set to true and, if run with a Flash Debug player, will print output via trace() (a global function) to demonstrate the different removal techniques and their results. The screen snapshot shown next (click on it to enlarge it) shows the type of output to expect. This is a snapshot of the command-line fdb (Flex Debugger) output.