当我们在前端开发中,使用了jQuery时,我们通常通过$(".box-item")的方式获取的是一个jQuery对象是一个类数组对象,当我们需要向后台传输的数据中,使用的是javascript数组,或者有时候,我们需要将jQuery对象转换为javascript对象,一般来说jQuery对象,是不同于javascript元素或对象的,他是一个自带length属性的对象,但不是数组对象。
说类数组是因为有length属性,但是却不是真正意义上的数组:
该jQuery对象除了有四个html元素之外,还有一个length属性,即便这个length属性为1,他也是一个类数组对象。当length=1时,我们将其转换为javascript对象,只需要获取第一个元素即可。$(".box-item")[0]。但是通常情况下,length是不为1的。为此,我们总结了以下几种转换方式:其中1和2本质上是一样的。
这里不光支持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数组结构:
反过来,javascript对象要转为jQuery对象,很简单,只需要通过符号$()转换一下,如$(object),就可以将javascript对象转为jQuery对象。