jQuery数组对象转javascript数组

最新推荐文章于 2024-07-26 03:26:25 发布

luffy5459

最新推荐文章于 2024-07-26 03:26:25 发布

阅读量7.2k

点赞数 2

分类专栏： Web前端文章标签： jQuery vs javascript对象互转

本文链接：https://blog.csdn.net/feinifi/article/details/84637633

版权

Web前端专栏收录该内容

87 篇文章 3 订阅

订阅专栏

当我们在前端开发中，使用了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数组结构：