jQuery数组对象转javascript数组

当我们在前端开发中，使用了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数组相关推荐

多数组对象转为json数组格式
JS多数组对象转为json数组在工作中经常会遇到接口获取的数据结构与需要的数据结构不同的情况,这就需要我们自己把接口数据改为我们需要的格式. 情况一: var resData = {datetime ...
vue将二维数组对象转为一维数组对象
title: [{id: 1, name: '财会经济',children: [{id: 11, name: '初级会计'},{id: 12, name: '初级会计'}]},{id: 2, name ...
JS 中的类数组对象如何转换为数组？
大家好,我是前端西瓜哥,今天说一下 JS 的类数组对象是什么,以及如何将类数组对象转为数组. 类数组对象是什么? 类数组对象,就是含有 length 属性的对象,但这个对象不是数组. 通常来说还会有 ...
js基础（数组）--数组类型、类数组对象、作为数组的字符串
1.数组类型我们到处都可以看见数组是具有特殊行为的对象.给定一个未知的对象,判定它是否为数组通常非常有用.在ECMAScript 5中,可以使用Array.isArray()函数来做这件事情:Ar ...
找出数组对象（json数组）中重复的项
欢迎关注微信公众号:[ 全栈攻略 ] 我们做的最多的业务场景是去重,今天遇到的需求是找出数组对象中重复的项直接上代码: let arr = [{id: 1, sku: 101, name: 'sku ...
数组对象和类数组对象区别
类数组对象:(看例子) var a = {}; var i =10; while(i<10){ a[i] = i*i; i++; } 数组对象: var b = []; var i =0; wh ...
matlab创建数组对象,MATLAB一维数组（向量）的定义
在 MATLAB 中,向量和矩阵主要是由数组表示的. 数组运算始终是 MATLAB 的核心内容,并且 MATLAB 区别于其他编程语言最大的优势就是数组计算.这种编程的优势使得计算程序简单.易读,程序 ...
js 数组对象凭借_js数组push多个对象
"js push"可以push一个数组么? 可以,两个数组拼接用 concat. js :JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类 ...
php 合并数组对象,JS内数组合并方法与对象合并实现步骤详解
这次给大家带来JS内数组合并方法与对象合并实现步骤详解,JS内数组合并方法与对象合并实现的注意事项有哪些,下面就是实战案例,一起来看一下. 1 数组合并 1.1 concat 方法var a=[1,2 ...

jQuery数组对象转javascript数组

jQuery数组对象转javascript数组相关推荐

最新文章

热门文章