当我们在前端开发中，使用了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对象。
更多推荐
jQuery数组对象转javascript数组
发布评论