集合，没那么简单

winston

集合，没那么简单

         好久都没有碰过前端页面的东西了，前几天做一个下拉列表的动态增删，是由js在前台操作select的option来实现的，但是奇怪的事，有的时候不能正确的清空列表的所有选项！本来觉得没有什么可以记的，但是细细咀嚼，还是有必要的！

         先贴出我实现清空列表的代码     

[javascript] view plaincopyprint?

• //删除列表的所有选项   
  
• function clearListBox(listBox) {  
  
•     for (var i = 0; i < listBox.length; i++) {  
  
•         removeListBoxOption(listBox,i);  
  
•     };  
  
• };  
  
•   
  
• //删除给定列表的某个选项   
  
• function removeListBoxOption(listBox,index) {  
  
•     listBox.remove(index);  
  
• };  
  

         如果你没有一眼看出问题所在，那么我想你可能是foreach的忠实粉丝；其实集合也好，数组也罢，虽然很多时候是作为容器来使用，其实他们没有那么简单；

很多时候他们是我们缓存昂贵资源的法宝，如果你对性能要求比较高，那么很多时候你的开发生活不能缺少它！

从数据结构的角度来看，集合可以实现各种复杂的数据结构，.net中实现的字典、列表等等，都是基于数组实现的；同时不同的数据结构，自然遍历和增删的性能是不一样的，不过我们不用担心，这些微软的类库开发人员都为我们考虑了！不得不说微软为了提高开发人员的工作效率，替我们做了很多的工作；那能不能说，缺少数据结构和算法的web开发程序猿，就不是真正的程序员呢？这个留待以后谈；

从更广义上来说，变量是承载某种类型数值的集合，原始类型的变量直接承载原始类型的内容；复合类型变量本质上承载各种原始类型的变量的集合，当然其也可以有复合类型的成员，当然类除了定义其数据，也定义了其行为来操作修改这些数据；还有我们平时使用的数据库二维关系表……

         以上纯属自己开发中的一些体会，有什么不对的地方，欢迎大家批评斧正；今天我们要解决的问题是列表集合的遍历删除问题；那么我们先来看看集合的遍历中一些容易被忽略的细节；

         Foreach的遍历，对获取集合的方法只会调用一次public class Test

1. {
2.     //集合字段
3.     private IList<int> collection = new List<int>() { 1, 2, 3, 4, 5, 6 };
5.     //集合字段对应属性
6.     public IList<int> Collection
7.     {
8.         get
9.         {
10.             Console.WriteLine("获取了集合");
11.             return this.collection;
12.         }
13.     }
15.     /// <summary>
16.     /// 测试foreach
17.     /// </summary>
18.     public void TestForeach()
19.     {
20.         foreach (int item in this.Collection)
21.         {
22.             int a = item;
23.         }
24.     }
25. }

复制代码

         For的正向遍历，每次我们都需要都会调用获取集合的方法，并且每次都要访问集合的长度public class Test

2.          {
3.     //集合字段
4.     private IList<int> collection = new List<int>() { 1, 2, 3, 4, 5, 6 };
6.     //集合字段对应属性
7.     public IList<int> Collection
8.     {
9.         get
10.         {
11.             Console.WriteLine("获取了集合");
12.             return this.collection;
13.         }
14.     }
16.     /// <summary>
17.     /// for正向遍历集合
18.     /// </summary>
19.     public void TestForForward()
20.     {
21.         for (int i = 0; i < this.Collection.Count; i++)
22.         {
23.             int a = this.Collection[i];
24.         }
25.     }
26. }

复制代码

         For的反向遍历,只有第一次遍历的时候调用获取集合的方法public class Test

2.          {
3.     //集合字段
4.     private IList<int> collection = new List<int>() { 1, 2, 3, 4, 5, 6 };
6.     //集合字段对应属性
7.     public IList<int> Collection
8.     {
9.         get
10.         {
11.             Console.WriteLine("获取了集合");
12.             return this.collection;
13.         }
14.     }
16.     /// <summary>
17.     /// for反向遍历集合
18.     /// </summary>
19.     public void TestForReverse()
20.     {
21.         for (int i = this.Collection.Count - 1; i > -1; i--)
22.         {
23.             int a = this.Collection[i];
24.         }
25.     }
26. }

复制代码

          虽然这些细节会影响集合遍历的性能，但是这些并不是今天我们要关注的；在.net里他们的性能差异怎么样，js中差别怎么样，如果您感兴趣可以自己测试；

         Foreach的最终的实现是通过链表实现的，我想着也就是为什么我们遍历集合的时候，不能对其进行删除的原因吧！使用for遍历，我们是通过数组下表直接访问，我们可以在遍历的时候删除元素，但是每次删除元素后，集合的length就会变化；

         现在回过头来看看删除列表选项的代码，显然其问题就在每次遍历都要重新获取集合的length；那么我们可以这样修改

         For//使用for实现删除列表的所有选项

2. function clearListBox(listBox) {
3.     for (var i = 0; i < listBox.length; ) {
4.         removeListBoxOption(listBox,i);
5.     };
6. };
9.          While//while实现删除列表的所有选项
10. function clearListBox(listBox) {
11.     while (listBox.length > -1) {
12.         removeListBoxOption(listBox,0);
13.     };
14. };

复制代码

          现在我们解决了删除列表的所有选项！好像没有什么问题了，那么现在我们需要将源列表中一些选项移动到目的列表中，这个时候我们怎么做呢？这个时候我们需要一个集合

//将源列表中选中的选项转移到目的列表中

1. function moveOption(listBoxSou, listBoxDes) {
2.     var selectOptionArray = getOptionInfo(listBoxSou);
3.     removeListBoxOptions(listBoxSou, selectOptionArray);
4.     addListBoxOptions(listBoxDes,selectOptionArray);
5. };
7. //获取列表的选中项的信息
8. function getOptionInfo(listBox) {
9.     var array = new Array();
10.     var options = listBox.options;
11.     for (var i = 0; i < listBox.length; i++) {
12.         var option=options[i];
13.         if (option.selected) {
14.             array.push({"text":option.text,"value":option.value});
15.         };
16.     };
17.     return array;
18. };
20. //在给定的列表中删除给定的选项
21. function removeListBoxOptions(listBox, array) {
22.     var options = listBox.options;
23.     for (var i = 0; i < array.length; i++) {
24.         var delOptionInfo=array[i];
25.         for (var j = 0; j < listBox.length; j++) {
26.             if (options[j].value == delOptionInfo.value) {
27.                 removeListBoxOption(listBox, j);
28.                 break;
29.             }
30.         };
31.     };
32. };
34. //向指定列表中添加给定的选项
35. function addListBoxOptions(listBox, array) {
36.     for (var i = 0; i < array.length; i++) {
37.         var optionInfo = array[i];
38.         addListBoxOption(listBox,optionInfo.text,optionInfo.value);
39.     };
40. };
42. //向指定列表添加选项
43. function addListBoxOption(listBox, text, value) {
44.     var option = document.createElement('option');
45.     option.value = value;
46.     option.text = text;
47.     listBox.add(option);
48. };

复制代码

          由于我们的功能实现的比较复杂，同时涉及的数据量比较大，同时提供可以搜索列表框中的选项，同时涉及到多个列表并且他们之间是有关联关系的，所以我自己实现了一个简单的字典集合，其功能主要是缓存列表数据源，并没有优化实现遍历的算法，黏贴部分代码，感兴趣可以看一下<script type="text/javascript" src=http://blog.csdn.net/"Scripts/jquery-1.4.1.js"></script><script type="text/javascript">

2.     //源列表初始化字符串
3.     var initStr = "1,北京~2,上海~3,天津~4,河北~5,山东~6,河南~7,山西";
4.     //初始化字符串记录间的分隔符
5.     var recordSep = "~";
6.     //编号和名称间的分隔符
7.     var innerSep = ",";
9.     //源列表id
10.     var listBoxSouId = "listBoxSou";
11.     //目标列表id
12.     var listBoxDesId = "listBoxDes";
14.     var listBoxSou = null;
15.     var listBoxDes = null;
17.     //页面初始化
18.     function pageLoad() {debugger;
19.         //初始化变量
20.         listBoxSou = $("#" + listBoxSouId).get(0);
21.         listBoxDes = $("#" + listBoxDesId).get(0);
23.         var listDataSourceType = "string";
24.         var dataSource = getDataSource(listDataSourceType);
25.         bindData(listBoxSou,dataSource);
26.     }
28.     //可以有多种获取数据源的方式，也可以有多种承载数据源的介质
29.     function getDataSource(dataSourceType) {
30.         if (dataSourceType == "string") {
31.             return getStringDataSource();
32.         }
34.         return new Dictionary();
35.     }
37.     //获取字符串格式的列表数据源
38.     function getStringDataSource() {
39.         var dictionary = new Dictionary();
41.         var recordArray = initStr.split(recordSep);
42.         $.each(recordArray, function (index, record) {
43.             var idNameArray = record.split(innerSep);
44.             dictionary.add(idNameArray[0], idNameArray[1]);           
45.         });
47.         return dictionary;
48.     };
50.     //为列表绑定数据源
51.     function bindData(listBox, dataSource) {
52.         clearListBox(listBox);
53.         dataSource.each(function (index, item) {
54.             addOption(listBox, item.key, item.value);
55.         });
56.     };
58.     //向指定列表添加选项
59.     function addOption(listBox,text,value) {
60.         var option = document.createElement('option');
61.         option.value = value;
62.         option.text = text;
63.         listBox.add(option);
64.     };
66.     //清空列表的所有选项
67.     function clearListBox(listBox) {
68.         while (listBox.length > 0) {
69.             removeOption(listBox,0);
70.         }
71.     };
73.     //删除指定列表的指定项
74.     function removeOption(listBox, index) {
75.         listBox.remove(index);
76.     };
78.     $(document).ready(pageLoad);
87.     function KeyValuePair(key, value) {
88.         this.key = key;
89.         this.value = value;
90.     };
92.     KeyValuePair.prototype.key = null;
93.     KeyValuePair.prototype.value = null;
95.    
98.    
100.     function Dictionary() {
101.         this.clear();
102.     };
103.    
105.     Dictionary.prototype.keyValuePairs = null;
107.     Dictionary.prototype.length = 0;
109.     Dictionary.prototype.add = function (key, value) {
110.         this.keyValuePairs.push(new KeyValuePair(key, value));
111.         ++this.length;
112.     };
114.     Dictionary.prototype.remove = function (key) {
115.         for (var i = 0; i < this.length; i++) {
116.             if (this.keyValuePairs[i].key == key) {
117.                 this.keyValuePairs.splice(i, 0);
118.                 --this.length;
119.                 break;
120.             }
121.         }
122.     };
124.     Dictionary.prototype.get = function (key) {
125.         for (var i = 0; i < this.length; i++) {
126.             if (this.keyValuePairs[i].key == key) {
127.                 return this.keyValuePairs[i].value;
128.                 break;
129.             }
130.         }
131.     };
133.     Dictionary.prototype.getKey = function (value) {
134.         for (var i = 0; i < this.length; i++) {
135.             if (this.keyValuePairs[i].value == value) {
136.                 return this.keyValuePairs[i].key;
137.                 break;
138.             }
139.         }
140.     };
142.     Dictionary.prototype.clear = function () {
143.         this.keyValuePairs = new Array();
144.         this.length = 0;
145.     };
147.     Dictionary.prototype.contains = function (key) {
148.         if (this.get(key)) {
149.             return true;
150.         }
151.         return false;
152.     };
154.     Dictionary.prototype.each = function (callback) {
155.         if (callback != undefined && callback) {
156.             for (var i = 0; i < this.length; i++) {
157.                 callback.call(window, i, this.keyValuePairs[i]);
158.             }
159.         }
160.     };
162.    
163. </script>

复制代码