En este artículo, aprenderemos la diferencia entre los métodos toArray() y makeArray() en jQuery.
El método toArray() : este método se utiliza en elementos DOM (Document Object Model) para convertirlos en una array de JavaScript. Podemos iterar esta array, calcular su longitud y acceder a los elementos usando sus índices como una array normal. Sin embargo, no podemos crear una array a partir de otros objetos similares a una array usando este método. Esta es la principal diferencia entre las dos funciones.
Sintaxis:
let dom_array = $("p").toArray();
Ejemplo: en este ejemplo, veremos cómo se puede usar toArray() para convertir elementos DOM en una array y cómo no funciona con otros tipos de datos.
HTML
<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>
Producción:
El método makeArray() : este método se utiliza en objetos similares a arrays para convertirlos en una array. Entonces podemos usar funciones de array normales en esa array. Este método admite la conversión de elementos DOM, ya que son objetos similares a arrays.
Sintaxis:
// Array using DOM elements
let array = jQuery.makeArray($("p"));
// Array using other array-like objects
let array2 = jQuery.makeArray(array1, array2, array3);
Ejemplo: en este ejemplo, veremos cómo se puede usar makeArray() para convertir todo tipo de elementos similares a arrays, incluidos los elementos DOM.
HTML
<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 < obj_array.length; i++) {
$("#output2").append("Name: " +
obj_array[i].name + " Age: " +
obj_array[i].age + "<br>");
}
});
</script>
</body>
</html>
Producción:
Diferencia entre toArray() y makeArray():
| Método toArray() | método makeArray() |
| Este método admite la conversión de elementos DOM a una array. | Este método admite la conversión de todos los elementos similares a una array en una array. |
| Solo los elementos DOM son compatibles para ser convertidos. Otros elementos similares a una array generarán un error. | Todos los tipos de elementos se pueden convertir en una array, incluidos los elementos DOM. |
|
Su sintaxis es -: $(selector).toArray() |
Su sintaxis es -: jQuery.makeArray( obj ) |
| No toma ningún parámetro. | Solo toma un parámetro que es objeto. |
| Su valor de retorno son los elementos que coinciden con el selector de jQuery como una array. | Su valor de retorno es una array. |
Publicación traducida automáticamente
Artículo escrito por rajatagrawal5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA