En este artículo, aprenderemos a crear un clon de un objeto usando jQuery. Esto se puede lograr usando el método extend() de jQuery. El método extend() se utiliza para fusionar el contenido de varios objetos en el objeto pasado como primer parámetro. Esto se puede usar para clonar una array, ya que podemos pasar un objeto vacío como primer parámetro.
Se puede usar un parámetro adicional profundo para hacer copias profundas del objeto. Esto hará que el método copie el objeto recursivamente y es útil cuando se debe clonar un objeto complejo y anidado. Este parámetro deberá pasarse como el primer parámetro cuando se necesite una copia profunda. Para comprender el concepto de clonación en jquery, consulte el artículo jQuery clone() con ejemplos .
Sintaxis:
// Create a clone of the object using the extend() method
let newObj = jQuery.extend({}, obj);
// Create a deep clone of the object using the deep parameter
let newDeepObj = jQuery.extend(true, {}, obj);
Los siguientes ejemplos ilustran el enfoque anterior:
Ejemplo 1: En este ejemplo, crearemos un clon del objeto usando este método.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to create clone of any object using jQuery?</b>
<p>The object to be cloned is:</p>
<pre>
{ name: "Sam", age: 5, date: Date.now() }
</pre>
<p>Please check the console for the cloned object</p>
<script>
let obj = { name: "Sam", age: 5, date: Date.now() };
// Clone the object using
// the extend() method
let newObj = jQuery.extend({}, obj);
// Print both the objects
console.log("Original Object", obj);
console.log("Clone Object", newObj);
</script>
</body>
</html>
Producción:
Ejemplo 2: en este método, crearemos un clon profundo del objeto usando el parámetro profundo .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to create clone of any object using jQuery?</b>
<p>The object to be cloned is:</p>
<pre>
{
name: "Logs",
content: ["Error", "Warning", "Information" ],
stats: {
isDebug: true,
lastError: "Fatal Error 03",
lastInfo: "Consoled"
}
};
</pre>
<p>Please check the console for the cloned object</p>
<script>
let obj = {
name: "Logs",
content: ["Error", "Warning", "Information"],
stats: {
isDebug: true,
lastError: "Fatal Error 03",
lastInfo: "Consoled",
},
};
// Create a deep clone of the object
// by using the deep parameter
let newObj = jQuery.extend(true, {}, obj);
// Print both the objects
console.log("Original Object", obj);
console.log("Clone Object", newObj);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA