jQuery中toArray和makeArray的区别是什么

在这篇文章中，我们将学习jQuery中toArray()和makeArray()方法之间的区别。

toArray()方法 ：该方法用于DOM（文档对象模型）元素，将其转换为一个JavaScript数组。我们可以遍历这个数组，计算它的长度，并像普通数组一样使用它们的索引访问这些元素。然而，我们不能用这个方法从其他类似数组的对象中创建一个数组。这就是这两个函数的主要区别。

语法:

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

例子：在这个例子中，我们将看到toArray()如何被用来将DOM元素转换为数组，以及它如何在其他类型的数据中不起作用。

<html>
<head>
  <script src=
"https://code.jquery.com/jquery-3.6.0.js">
  </script>
</head>
<body>
  <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>
</body>
</html>

输出:

jQuery中toArray和makeArray的区别是什么？

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>
<head>
  <script src=
"https://code.jquery.com/jquery-3.6.0.js">
  </script>
</head>
<body>
  <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("#output2").append("Name: " +
          obj_array[i].name + " Age: " +
          obj_array[i].age + "<br>");
      }
    });
  </script>
</body>
</html>

输出:

jQuery中toArray和makeArray的区别是什么？

toArray()和makeArray()之间的区别：

toArray()方法	makeArray()方法
该方法支持将DOM元素转换为数组。	该方法支持将所有类似数组的元素转换为数组。
只支持DOM元素的转换。其他类似数组的元素会产生错误。	所有类型的元素都可以被转换为数组，包括DOM元素。
其语法为-。`$(selector).toArray()`	其语法为-`jQuery.makeArray( obj )`它不接受任何参数，只接受一个参数，即对象。
它的返回值是由jQuery选择器匹配的元素，是一个数组。	它的返回值是一个数组。