當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


jQuery toArray和makeArray的區別用法及代碼示例


在本文中,我們將了解 jQuery 中 toArray() 和 makeArray() 方法之間的區別。

Misc toArray()此方法用於 DOM(文檔對象模型)元素,將它們轉換為 JavaScript 數組。我們可以迭代這個數組,計算它的長度,並像普通數組一樣使用元素的索引來訪問元素。但是,我們無法使用此方法從其他類似數組的對象創建數組。這是兩個函數之間的主要區別。

用法:

let dom_array = $("p").toArray();

例子:在此示例中,我們將了解如何使用 toArray() 將 DOM 元素轉換為數組,以及它如何不適用於其他類型的數據。

HTML


<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<h1 style="color: green;">
    GeeksforGeeks
</h1>
<p>Data Structures</p>
<p>Competitive Programming</p>
<p>Algorithms</p>
<button>Click Here</button>
<h3>Output</h3>
<div id="output"></div>
<script>
    let obj = {
      name: "Sam",
      age: 12
    }
     
    $("button").click(function () {
     
      // Creating an array of paragraphs
      let para_array = $("p").toArray();
     
      // Iterating over para_array
      // and appending the data in the div
      for (i = 0; i < para_array.length; i++) {
        $("#output").append("Element: " +
          para_array[i].innerHTML + "<br>");
      }
     
      // We cannot use toArray() on the object
      // as toArray() works only for DOM elements
      // let obj_array = jQuery.toArray(obj);
      // console.log(obj_array);
    });
</script>

輸出:

makeArray()此方法用於類似數組的對象,將它們轉換為數組。然後我們可以在該數組上使用普通的數組函數。此方法支持 DOM 元素的轉換,因為它們是類似數組的對象。

用法:

// Array using DOM elements
let array = jQuery.makeArray($("p"));

// Array using other array-like objects
let array2 = jQuery.makeArray(array1, array2, array3);

例子:在此示例中,我們將看到如何使用 makeArray() 轉換所有類型的類數組元素(包括 DOM 元素)。

HTML


<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<h1 style="color: green;">
    GeeksforGeeks
</h1>
<p>Data Structures</p>
<p>Competitive Programming</p>
<p>Algorithms</p>
<button>Click Here</button>
<h3>Output</h3>
<div id="output"></div>
<h3>Output 2</h3>
<div id="output2"></div>
<script>
    let obj = {
      name: "Sam",
      age: 12
    }
     
    $("button").click(function () {
     
      // Creating an array of paragraphs
      let para_array = jQuery.makeArray($("p"));
     
      // Iterating over para_array
      // and appending the data in the first div
      for (let i = 0; i < para_array.length; i++) {
        $("#output").append("Element: " +
          para_array[i].innerHTML + "<br>");
      }
     
      // Creating an array of the object
      let obj_array = jQuery.makeArray(obj);
     
      // Iterating over obj_array
      // and appending the data in the second div
      for (let i = 0; i < obj_array.length; i++) {
        $("#output2").append("Name: " +
          obj_array[i].name + " Age: " + 
          obj_array[i].age + "<br>");
      }
    });
</script>

輸出:

toArray() 和 makeArray() 之間的區別:

JavaScript toArray() Method

JavaScript makeArray() Method

該方法支持將 DOM 元素轉換為數組。 該方法支持將所有類似數組的元素轉換為數組。
僅支持 DOM 元素轉換。其他類似數組的元素將引發錯誤。 所有類型的元素都可以轉換為包含 DOM 元素的數組。
它不帶任何參數 它隻接受一個參數,即一個對象。
它的返回值是 jQuery 選擇器匹配的元素作為數組。 它的返回值是一個數組。


相關用法


注:本文由純淨天空篩選整理自rajatagrawal5大神的英文原創作品 What’s the difference between toArray and makeArray in jQuery ?。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。