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 ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。