jQuery源码浅谈系列---工具方法$.merge与$.unique

柔情只为你懂 2021-05-12 11:50 358阅读 0赞

很多人在使用jquery的时候应该多会有array去重或者合并的需求吧，那么你一定对$.merge和$.unique不会陌生吧。

1.$.merge----------其实这个功能只是**合并两个数组**，返回的是array，包含第一个数组的元素后面跟着第二个数组元素

ps:这个不会去**重复**。

上源码：/\*

Js代码   ![收藏代码][icon_star.png]

1.  原理其实还是比较简单  
2.  i是第一个数组的length  
3.  l是第二个数组的length  
4.  对第二个进行循环，在第一个数组length的基础上++往里面赋值  
5.  所以返回的数组是第一个数组然后是第2个数组  
6.  \*/  
7.    
8.  **function** merge(first,second)\{  
9.     **var** i = first.length,  
10.          j = 0;  
11.    **if**(**typeof** second.length === "number")\{  
12.         **for**(**var** l =second.length;j<l;j++)\{  
13.             first\[i++\] = second\[j\];  
14.      \}   
15.   \}**else**\{  
16.           **while**(second\[j\] !== undefined)\{  
17.                    first\[i++\] = second\[j++\];  
18.           \}  
19.  \}  
20.  first.length = i;   //严谨的jquery啊，一般人是不会想到这边控制一下的  
21.  **return** first;  
22. \}

$.merge(\[0,1,2\],\[2,1,3\]) ------------------------\[0,1,2,2,1,3\]

2.$.unique --------如果你是一个jquery接触比较长的或者一直研究的人你会发现，**这个api是经历过版本变革**的

在**1.3rc2版本中源码**是这个的

Js代码   ![收藏代码][icon_star.png]

1.  /\* 
2.  注意这个版本是没有对数组元素为字符串和数字去重功能的 
3.  如果要改的话可以吧 jQuery.data(array\[i\])直接换成array\[i\] 
4.  \*/  
5.  **function** unique(array)\{  
6.      **var** ret =\[\],done =\{\};  
7.      **try**\{  
8.           **for**(**var** i=0,length =array.length;i<length;i++)\{  
9.                    **var** id= jQuery.data(array\[i\]);  
10.                   **if**(!done\[id\])\{  
11.                         done\[id\] = **true**;  
12.                         ret.push(array\[i\]);  
13.                  \}  
14.             \}  
15.      \}**catch**(e)\{  
16.              ret =array;  
17.      \}  
18.      **return** ret;  
19. \}

变革点在1.4.1,从这个版本开始你会发现这样一句话

Js代码   ![收藏代码][icon_star.png]

1.  jQuery.unique = Sizzle.uniqueSort;

没有单独的unique的api了，你不知道**Sizzle**，好吧，多看看源码吧。不过我也会陆续放出自己的一些文档说明

好了先上源码：

Js代码   ![收藏代码][icon_star.png]

1.  /\* 
2.  当然这边我没有放出sortOrder相关的api，有兴趣的自己看看 
3.  我注意想说的是思想 
4.  其实大家注意了splice了吧 
5.  算法是从index第一个开始和第0个去比，依次下去，相同就调用splice删除一个 
6.  \*/  
7.  **function** uniqueSort(results)\{  
8.         **if**(sortOrder)\{  
9.             hasDuplicate = baseHasDuplicate;  
10.            results.sort(sortOrder);  
11.            **if**(hasDuplicate)\{  
12.                 **for**(**var** i=1;i<results.length;i++)\{  
13.                        **if**(results\[i\] === results\[i-1\])\{  
14.                                results.splice(i--,1);  
15.                      \}  
16.                \}  
17.            \}  
18.       \}  
19.      **return** results;  
20. \}

其实如果你一直在研究jQuery的源码 你会发现除了很多人一直再喊的性能上的提高，无论是代码的严谨性和兼容饱满性多在每一个版本中体现。学习JQuery，你需要的慢慢是从使用它，到2次封装它，再到领会它。

ps：下面我放出一个自己lib库的array的unique方法（设计思想还是tangram的，你不知道tangram，噢,你out了，呵呵）

Js代码   ![收藏代码][icon_star.png]

1.  /\* 
2.  \*unique-unique the array;if it has same items will delete one\* 
3.  \*@param \{Array\} source---the array\* 
4.  \*@param \{Function\} compareFn---the compareFn\* 
5.  \*@return \{Array\} result ----the uniqued array\* 
6.  \*/  
7.  ZYC.array.unique = **function**(source,compareFn)\{  
8.        **var** \_length =source.length,  
9.            result =source.slice(0), //clone source  
10.           i,\_item;  
11.       // if compareFn is not function we will build one         
12.       **if**('functrion' != **typeof** compareFn)\{  
13.          compareFn = **function**(item1,item2)\{  
14.             **return** item1 === item2;  
15.          \};  
16.       \}  
17.       //we use double circulation to compare the items   
18.       **while** (--\_length >0)\{  
19.          \_item = result\[\_length\];     // start from the last   
20.          i = \_length;  
21.          **while**(i --)\{  
22.             **if**(compareFn(\_item,result\[i\]))\{  
23.                result.splice(\_length,1);  
24.                **break**;  
25.             \}  
26.          \}         
27.       \}  
28.       **return** result;  
29. \};

[icon_star.png]: /images/20210511/ed4f0c099c534f7c8c3d21d95eafbf0c.png