jQuery数组处理汇总

╰+哭是因爲堅強的太久メ 2022-09-21 01:09 114阅读 0赞

有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下

##### $.each(array, \[callback\])遍历,很常用 #####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>arr = [</code> 
      <code>'javascript'</code> 
      <code>, </code> 
      <code>'php'</code> 
      <code>, </code> 
      <code>'java'</code> 
      <code>, </code> 
      <code>'c++'</code> 
      <code>, </code> 
      <code>'c#'</code> 
      <code>, </code> 
      <code>'perl'</code> 
      <code>, </code> 
      <code>'vb'</code> 
      <code>, </code> 
      <code>'html'</code> 
      <code>, </code> 
      <code>'css'</code> 
      <code>, </code> 
      <code>'objective-c'</code> 
      <code>];</code> 
     </div> 
     <div> 
      <code>$.each(arr, </code> 
      <code>function</code> 
      <code>(key, val) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// firebug console</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(</code> 
      <code>'index in arr:'</code> 
      <code>+ key + </code> 
      <code>", corresponding value:"</code> 
      <code>+ val);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 如果想退出循环</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// return false;</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $.grep(array, callback, \[invert\])过滤,常用 #####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>temp = [];</code> 
     </div> 
     <div> 
      <code>temp = $.grep(arr, </code> 
      <code>function</code> 
      <code>(val, key) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(val.indexOf(</code> 
      <code>'c'</code> 
      <code>) != -1) </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>true</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素</code> 
     </div> 
     <div> 
      <code>}, </code> 
      <code>false</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>console.dir(temp);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $.map(array, \[callback\])用的不是太多 #####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//1.6之前的版本只支持数组</code> 
     </div> 
     <div> 
      <code>temp = $.map(arr, </code> 
      <code>function</code> 
      <code>(val, key) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//返回null,返回的数组长度减1</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(val === </code> 
      <code>'vb'</code> 
      <code>) </code> 
      <code>return</code> 
      <code> null</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>val;</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>console.dir(temp);</code> 
     </div> 
     <div> 
      <code>//1.6开始支持json格式的object</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>obj = {key1: </code> 
      <code>'val1'</code> 
      <code>, key2: </code> 
      <code>'val2'</code> 
      <code>, key3: </code> 
      <code>'val3'</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>temp = $.map(obj, </code> 
      <code>function</code> 
      <code>(val, key) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>val;</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>console.dir(temp);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $.inArray(val, array)判断是否在指定数组中,常用 #####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素</code> 
     </div> 
     <div> 
      <code>console.log($.inArray(</code> 
      <code>'javascript'</code> 
      <code>, arr));</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $.merge(first, second)合并两个数组,使用频率一般 #####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>frontEnd = [</code> 
      <code>'javascript'</code> 
      <code>, </code> 
      <code>'css'</code> 
      <code>, </code> 
      <code>'html'</code> 
      <code>],</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>backEnd = [</code> 
      <code>'java'</code> 
      <code>, </code> 
      <code>'php'</code> 
      <code>, </code> 
      <code>'c++'</code> 
      <code>];</code> 
     </div> 
     <div> 
      <code>// 这种方式会修改第一个参数, 即frontEnd数组</code> 
     </div> 
     <div> 
      <code>temp = $.merge(frontEnd, backEnd);</code> 
     </div> 
     <div> 
      <code>console.dir(temp);</code> 
     </div> 
     <div> 
      <code>console.dir(frontEnd);</code> 
     </div> 
     <div> 
      <code>// 可以用下面的方式来避免对原数组的影响</code> 
     </div> 
     <div> 
      <code>// $.merge($.merge([], frontEnd), backEnd);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $.unique(array)过滤数组中的重复元素,不常用 #####

blahblahblah....

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>// $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)</code> 
     </div> 
     <div> 
      <code>// 获得原始的DOM数组,而不是jQuery封装的</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>divs = $(</code> 
      <code>'div'</code> 
      <code>).get(); </code> 
     </div> 
     <div> 
      <code>// 增加几个class为dup的div</code> 
     </div> 
     <div> 
      <code>divs = divs.concat($(</code> 
      <code>'div.dup'</code> 
      <code>).get()); </code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>"before unique:"</code> 
      <code>+ divs.length);</code> 
     </div> 
     <div> 
      <code>divs = $.unique(divs);</code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>"after unique:"</code> 
      <code>+ divs.length);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $.makeArray(obj)将类数组对象转成数组,不常用 #####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//首先什么是类数组对象?jQuery官网上用divs = getElementsByTag('div')来做例子</code> 
     </div> 
     <div> 
      <code>//这个divs有类似数组的一些方法比如length,通过[index]方式获取元素等</code> 
     </div> 
     <div> 
      <code>//然后通过$.makeArray(divs)使它转为数组,就可以用数组的其他功能</code> 
     </div> 
     <div> 
      <code>//比如reverse(), pop()等</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##### $(dom).toArray()将jQuery集合恢复成DOM数组,不常用 #####