jQuery陣列物件轉javascript陣列
阿新 • • 發佈：2018-12-05
當我們在前端開發中，使用了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物件。