jQuery数组对象转javascript数组

客官°小女子只卖身不卖艺 2022-04-13 13:57 261阅读 0赞

当我们在前端开发中，使用了jQuery时，我们通常通过$(".box-item")的方式获取的是一个jQuery对象是一个类数组对象，当我们需要向后台传输的数据中，使用的是javascript数组，或者有时候，我们需要将jQuery对象转换为javascript对象，一般来说jQuery对象，是不同于javascript元素或对象的，他是一个自带length属性的对象，但不是数组对象。

![20181129182334924.png][]

说类数组是因为有length属性，但是却不是真正意义上的数组：

![20181129183939448.png][]

该jQuery对象除了有四个html元素之外，还有一个length属性，即便这个length属性为1，他也是一个类数组对象。当length=1时，我们将其转换为javascript对象，只需要获取第一个元素即可。$(".box-item")\[0\]。但是通常情况下，length是不为1的。为此，我们总结了以下几种转换方式：其中1和2本质上是一样的。

![20181129182746402.png][]

这里不光支持jQuery元素类数组转换，还支持jQuery数组的转换，如下所示，将四个box-item类元素的数组，先取偶数下标，然后将data-id属性取出，就组成了一个jQuery数组，数组元素为1,3最后通过上面的方式，将其转换为javascript数组。

完整代码如下：

<!doctype html>
    <html>
      <head>
    	   <meta charset="UTF-8"/>
    	   <title>jQuery数组对象转javascript数组</title>
    	   <style type="text/css">
    		  *{margin:0;padding:0}
    		  #box{width:800px;margin:0 auto;}
    		  .box-item{background:#ddd;height:40px;margin:5px 0;}
    	   </style>
    	   <script type="text/javascript" src="../jquery.min.js"></script>
      </head>
      <body>
    	   <div id="container">
    		  <div id="box">
    			<div class="box-item" data-id="1">1. [].slice.call(items)</div>
    			<div class="box-item" data-id="2">2. Array.prototype.slice.call(items)</div>
    			<div class="box-item" data-id="3">3. Array.from(items)</div>
    			<div class="box-item" data-id="4">4. $.makeArray(items)</div>
    		  </div>
    	   </div>
    	   <script type="text/javascript">
    		  $(function(){
    			var items = $(".box-item");
    			items = $(items).filter(function(index,item){
    				return index%2==0;
    			}).map(function(index,item){
    				return $(item).data("id");
    			});
    			console.log(items);
    			//var res = [].slice.call(items);
    			//var res = Array.prototype.slice.call(items);
    			//var res = Array.from(items);
    			var res = $.makeArray(items);
    			console.log(res);
    		  });
    	   </script>
      </body>
    </html>

转换过程通过console.log()打印jQuery数组和javascript数组结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

反过来，javascript对象要转为jQuery对象，很简单，只需要通过符号$()转换一下，如$(object)，就可以将javascript对象转为jQuery对象。

[20181129182334924.png]: /images/20220413/d3efa4b6eb714714bd3f7be538e1ff15.png
[20181129183939448.png]: /images/20220413/f4eff45c6633434d838b511e515951bc.png
[20181129182746402.png]: /images/20220413/5358cbb38bd74c7e8faa4415de078d2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220413/90a0b488803c4dc79befbd9682ea772a.png