Utilisation de la méthodeslice()">
Maison >
Article > interface Web > Comment cloner un tableau dans ES6 ?
Comment cloner un tableau dans ES6 ?
- 王林avant
- 2023-09-12 08:09:031406parcourir
Dans ES5, nous utilisons la méthode concat pour copier des tableaux. De plus, certains développeurs utilisent la méthode slice(), qui découpe tous les éléments du tableau référencé et crée un nouveau tableau en passant 0 comme argument.
Exemple
Les utilisateurs peuvent suivre l'exemple ci-dessous pour cloner un tableau à l'aide de la méthode slice(). Nous avons créé array1 qui contient des valeurs de différents types de données. Après cela, nous copions array1 à l'aide de la méthode slice() et le stockons dans la variable "clone".
<html>
<body>
<h2>Using the <i>slice()</i> method to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array1 = [10, "hello", 30, true];
output.innerHTML += "The original array: " + array1 + " <br>";
let clone = array1.slice(0);
output.innerHTML += "The cloned array: " + clone + " <br>";
</script>
</body>
</html>
Les utilisateurs ont appris comment cloner des tableaux dans ES5.
En outre, les utilisateurs peuvent envisager de copier des tableaux tout comme des variables normales telles que des chaînes, des nombres et des booléens à l'aide d'opérateurs d'affectation.
Les utilisateurs peuvent rencontrer des problèmes lors de la copie de tableaux à l'aide d'opérateurs d'affectation. Comprenons-le à travers l'exemple suivant.
Copiez un tableau à l'aide de l'opérateur d'affectation
Dans l'exemple ci-dessous, le tableau de chaînes contient différentes chaînes. Nous avons attribué le tableau strings au tableau strings2. Après cela, nous insérons la nouvelle valeur de chaîne dans le tableau strings2.
Exemple
<html>
<body>
<h2>Using the <i>assignment</i> operator to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array1 = ["Hi", " users", "Welcome"];
let array2 = array1;
array2.push("New value");
output.innerHTML += "The value of array2: " + array2 + " <br>";
output.innerHTML += "The value of array1: " + array1 + " <br>";
</script>
</body>
</html>
Dans la sortie ci-dessus, l'utilisateur peut observer que lorsque nous poussons la valeur de chaîne vers le tableau strings2, elle est également poussée vers le tableau strings. Pourquoi cela arrive-t-il ?
Ici, la notion d'objets mutables et immuables entre en jeu.
Objets mutables et objets immuables
En JavaScript, les tableaux et les objets sont mutables, ce qui signifie que nous pouvons modifier leurs valeurs après les avoir initialisés après les avoir créés. Par conséquent, le tableau strings2 n’existe pas dans l’exemple ci-dessus. Lorsque nous attribuons le tableau de chaînes au tableau strings2, cela génère une référence au tableau de chaînes. Ainsi, chaque fois que nous modifions le tableau strings2, cela modifie également le tableau strings.
Nous devons donc créer une copie réelle du tableau sans référencer l'autre tableau
Apprenons maintenant à cloner un tableau dans ES6.
Cloner un tableau à l'aide de l'opérateur spread (...) dans ES6
La syntaxe de l'opérateur spread est de trois points (...). Nous pouvons l'utiliser pour diffuser des objets itérables comme des tableaux. L'opérateur spread crée une nouvelle copie d'un tableau ou d'un objet.
Grammaire
Les utilisateurs peuvent copier des tableaux à l'aide de l'opérateur spread en suivant la syntaxe suivante.
let booleansCopy = [...booleans];
Exemple
Dans l'exemple ci-dessous, nous avons créé un tableau booléen contenant différentes valeurs booléennes. Après cela, nous créons une copie du tableau booléen à l'aide de l'opérateur spread et attribuons la copie à la variable booleanCopy.
Dans la sortie, l'utilisateur peut observer que le tableau booleanCopy contient les mêmes valeurs que le tableau booléen.
<html>
<body>
<h2>Using the <i> spread operator </i> to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let booleans = [true, false, false, true, true];
let booleansCopy = [...booleans];
output.innerHTML += "The values of the booleansCopy array: " + booleansCopy + "<br>";
</script>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, le tableau dimensions contient différentes valeurs numériques. Nous avons créé une copie du tableau size à l'aide de l'opérateur spread et stocké le tableau dans la variable sizedClone à l'aide de l'opérateur d'affectation.
Ensuite, nous insérons 60 dans le tableau sizeClone.
<html>
<body>
<h2>Using the <i>spread</i> operator to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let sizes = [34, 43, 45, 47, 49, 50];
output.innerHTML += "-------Before Push-------" + "<br>";
output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
let sizesClone = [...sizes];
output.innerHTML += "The values of the sizesClone array: " + sizesClone + "<br>";
sizesClone.push(60);
output.innerHTML += "------After Push------" + "<br>";
output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
output.innerHTML += "The values of the sizesClone array:" + sizesClone + "<br>";
</script>
</body>
</html>
Dans le résultat ci-dessus, l'utilisateur peut observer que 60 est reflété dans le tableau sizesClone mais pas dans le tableau Sizes car nous avons créé une copie réelle du tableau au lieu de référencer le tableau comme dans l'exemple 2.
Les utilisateurs comprennent désormais clairement pourquoi l'opérateur d'affectation n'est pas utilisé dans ES6 et pourquoi l'opérateur de propagation est utilisé pour cloner des tableaux.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn SupprimerArticle précédent：Comment utiliser Particle.js dans des projets JavaScript ?Article suivant：Comment utiliser Particle.js dans des projets JavaScript ?Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript
Maison > Article > interface Web > Comment cloner un tableau dans ES6 ?
Comment cloner un tableau dans ES6 ?
- 王林avant
- 2023-09-12 08:09:031406parcourir
Dans ES5, nous utilisons la méthode concat pour copier des tableaux. De plus, certains développeurs utilisent la méthode slice(), qui découpe tous les éléments du tableau référencé et crée un nouveau tableau en passant 0 comme argument.
Exemple
Les utilisateurs peuvent suivre l'exemple ci-dessous pour cloner un tableau à l'aide de la méthode slice(). Nous avons créé array1 qui contient des valeurs de différents types de données. Après cela, nous copions array1 à l'aide de la méthode slice() et le stockons dans la variable "clone".
<html>
<body>
<h2>Using the <i>slice()</i> method to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array1 = [10, "hello", 30, true];
output.innerHTML += "The original array: " + array1 + " <br>";
let clone = array1.slice(0);
output.innerHTML += "The cloned array: " + clone + " <br>";
</script>
</body>
</html>
Les utilisateurs ont appris comment cloner des tableaux dans ES5.
En outre, les utilisateurs peuvent envisager de copier des tableaux tout comme des variables normales telles que des chaînes, des nombres et des booléens à l'aide d'opérateurs d'affectation.
Les utilisateurs peuvent rencontrer des problèmes lors de la copie de tableaux à l'aide d'opérateurs d'affectation. Comprenons-le à travers l'exemple suivant.
Copiez un tableau à l'aide de l'opérateur d'affectation
Dans l'exemple ci-dessous, le tableau de chaînes contient différentes chaînes. Nous avons attribué le tableau strings au tableau strings2. Après cela, nous insérons la nouvelle valeur de chaîne dans le tableau strings2.
Exemple
<html>
<body>
<h2>Using the <i>assignment</i> operator to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array1 = ["Hi", " users", "Welcome"];
let array2 = array1;
array2.push("New value");
output.innerHTML += "The value of array2: " + array2 + " <br>";
output.innerHTML += "The value of array1: " + array1 + " <br>";
</script>
</body>
</html>
Dans la sortie ci-dessus, l'utilisateur peut observer que lorsque nous poussons la valeur de chaîne vers le tableau strings2, elle est également poussée vers le tableau strings. Pourquoi cela arrive-t-il ?
Ici, la notion d'objets mutables et immuables entre en jeu.
Objets mutables et objets immuables
En JavaScript, les tableaux et les objets sont mutables, ce qui signifie que nous pouvons modifier leurs valeurs après les avoir initialisés après les avoir créés. Par conséquent, le tableau strings2 n’existe pas dans l’exemple ci-dessus. Lorsque nous attribuons le tableau de chaînes au tableau strings2, cela génère une référence au tableau de chaînes. Ainsi, chaque fois que nous modifions le tableau strings2, cela modifie également le tableau strings.
Nous devons donc créer une copie réelle du tableau sans référencer l'autre tableau
Apprenons maintenant à cloner un tableau dans ES6.
Cloner un tableau à l'aide de l'opérateur spread (...) dans ES6
La syntaxe de l'opérateur spread est de trois points (...). Nous pouvons l'utiliser pour diffuser des objets itérables comme des tableaux. L'opérateur spread crée une nouvelle copie d'un tableau ou d'un objet.
Grammaire
Les utilisateurs peuvent copier des tableaux à l'aide de l'opérateur spread en suivant la syntaxe suivante.
let booleansCopy = [...booleans];
Exemple
Dans l'exemple ci-dessous, nous avons créé un tableau booléen contenant différentes valeurs booléennes. Après cela, nous créons une copie du tableau booléen à l'aide de l'opérateur spread et attribuons la copie à la variable booleanCopy.
Dans la sortie, l'utilisateur peut observer que le tableau booleanCopy contient les mêmes valeurs que le tableau booléen.
<html>
<body>
<h2>Using the <i> spread operator </i> to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let booleans = [true, false, false, true, true];
let booleansCopy = [...booleans];
output.innerHTML += "The values of the booleansCopy array: " + booleansCopy + "<br>";
</script>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, le tableau dimensions contient différentes valeurs numériques. Nous avons créé une copie du tableau size à l'aide de l'opérateur spread et stocké le tableau dans la variable sizedClone à l'aide de l'opérateur d'affectation.
Ensuite, nous insérons 60 dans le tableau sizeClone.
<html>
<body>
<h2>Using the <i>spread</i> operator to clone the array in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let sizes = [34, 43, 45, 47, 49, 50];
output.innerHTML += "-------Before Push-------" + "<br>";
output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
let sizesClone = [...sizes];
output.innerHTML += "The values of the sizesClone array: " + sizesClone + "<br>";
sizesClone.push(60);
output.innerHTML += "------After Push------" + "<br>";
output.innerHTML += "The values of the sizes array: " + sizes + "<br>";
output.innerHTML += "The values of the sizesClone array:" + sizesClone + "<br>";
</script>
</body>
</html>
Dans le résultat ci-dessus, l'utilisateur peut observer que 60 est reflété dans le tableau sizesClone mais pas dans le tableau Sizes car nous avons créé une copie réelle du tableau au lieu de référencer le tableau comme dans l'exemple 2.
Les utilisateurs comprennent désormais clairement pourquoi l'opérateur d'affectation n'est pas utilisé dans ES6 et pourquoi l'opérateur de propagation est utilisé pour cloner des tableaux.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript