Jul 12

Flex中如何利用Array.filter()事件从一个数组中移除重复项目的例子

FlexAdd comments

和前面的Flex中如何通过filterFunction属性对XMLListCollection进行筛选的例子类似的，接下来的例子演示了Flex中如何利用Array.filter()事件，从一个数组中移除重复项目。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init()">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private var keys:Object = {};
  11.  
  12.             /**
  13.              * Called by the Application container's creationComplete
  14.              * event handler. This method creates a new Array object
  15.              * which will be used as a data provider as well as a
  16.              * filtered view of that array which does not contain
  17.              * duplicated items.
  18.              */
  19.             private function init():void {
  20.                 /* Create a dummy data source with some semi-random
  21.                     data. */
  22.                 var arr:Array = [];
  23.                 arr.push({data:1, label:"one"});
  24.                 arr.push({data:1, label:"one"});
  25.                 arr.push({data:1, label:"one"});
  26.                 arr.push({data:1, label:"one"});
  27.                 arr.push({data:2, label:"two"});
  28.                 arr.push({data:2, label:"two"});
  29.                 arr.push({data:2, label:"two"});
  30.                 arr.push({data:1, label:"one"});
  31.                 arr.push({data:3, label:"three"});
  32.                 arr.push({data:3, label:"three"});
  33.  
  34.                 /* Filter the original array and call the
  35.                     removeDuplicates() function on each item
  36.                     in the array. */
  37.                 var filteredArr:Array = arr.filter(removedDuplicates);
  38.  
  39.                 arrColl.source = arr;
  40.                 dedupedArrColl.source = filteredArr;
  41.             }
  42.  
  43.             /**
  44.              * This method is used to filter an array so that no
  45.              * duplicate items are created. It works by first
  46.              * checking to see if a keys object already contains
  47.              * a key equal to the current value of the item.data
  48.              * value. If the key already exists, the  current item
  49.              * will not be readded to the data provider. If the key
  50.              * does not already exist, add the key to the keys
  51.              * object and add this item to the data provider.
  52.              */
  53.             private function removedDuplicates(item:Object, idx:uint, arr:Array):Boolean {
  54.                 if (keys.hasOwnProperty(item.data)) {
  55.                     /* If the keys Object already has this property,
  56.                         return false and discard this item. */
  57.                     return false;
  58.                 } else {
  59.                     /* Else the keys Object does *NOT* already have
  60.                         this key, so add this item to the new data
  61.                         provider. */
  62.                     keys[item.data] = item;
  63.                     return true;
  64.                 }
  65.             }
  66.         ]]>
  67.     </mx:Script>
  68.  
  69.     <mx:ArrayCollection id="arrColl" />
  70.     <mx:ArrayCollection id="dedupedArrColl" />
  71.  
  72.     <mx:HBox>
  73.         <mx:VBox>
  74.             <mx:Label text="Original ({arrColl.length} items):" />
  75.             <mx:List dataProvider="{arrColl}" />
  76.         </mx:VBox>
  77.         <mx:VBox>
  78.             <mx:Label text="Filtered ({dedupedArrColl.length} items):" />
  79.             <mx:List dataProvider="{dedupedArrColl}" />
  80.         </mx:VBox>
  81.     </mx:HBox>
  82.  
  83. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Leave a Reply