Comment copier des éléments de tableau en javascript
Lorsque des références existent dans un tableau, la copie superficielle ne copie que les adresses de référence. Ainsi, si vous apportez des modifications dans une copie, la modification se reflétera également dans l'autre copie; Comme les emplacements de mémoire sont partagés. Vous pouvez cloner les éléments du tableau en utilisant une copie profonde pour éviter cette situation.
Cet article discutera des méthodes de copie des éléments de tableau en JavaScript à l'aide d'exemples appropriés.
Comment copier des éléments de tableau en javascript
Les tableaux javascript sont considérés comme types de référence Ce qui signifie que si vous attribuez un tableau à un autre tableau à l'aide de l'opérateur d'affectation "=», Il n'attribuera que la référence du tableau d'origine et il ne copiera pas les éléments du tableau.
Après l'affectation de référence, lorsque vous ajoutez ou modifiez les éléments du deuxième tableau, les premiers éléments du tableau seront également affectés. Vous pouvez mieux comprendre à l'aide de l'exemple suivant:
Exemple
Par exemple, nous avons créé un tableau nommé «des oiseaux«Avoir les éléments suivants:
var oiseaux = [«perroquet», «corbeau»];Dans l'étape suivante, nous essaierons d'attribuer «des oiseaux" au "débutants”Array en utilisant le"=" opérateur d'assignation:
var newbirds = oiseaux;console.log (débutant);
Après cela, nous ajouterons un nouvel élément au «débutants”Array à l'aide de la méthode javascript push ():
débutants.push ('pigeon')Enfin, nous afficherons les éléments du «des oiseaux" et "débutants”Éléments de tableau dans la fenêtre de la console:
console.journal (oiseaux);console.log (débutant);
La sortie en dessous signifie que lorsque vous avez copié le «des oiseaux«Éléments de tableau en utilisant l'opérateur d'affectation»=», Les modifications apportées par la suite sont appliquées aux deux tableaux:
À ce stade, vous avez compris que les tableaux sont considérés comme des valeurs de référence en JavaScript, donc lorsque vous utilisez l'opérateur d'affectation, seule la référence du tableau d'origine sera copiée, pas les éléments du tableau.
En JavaScript, vous pouvez utiliser le «Copie superficielle" ou "Copie profonde»Méthodes pour copier des éléments de tableau. Ces termes vous semblent nouveaux pour vous? Pas de soucis! Nous les expliquerons dans les sections suivantes.
Copie superficielle en javascript
Une copie bit-sage d'un objet est appelée une copie superficielle.
- Dans une copie peu profonde, un nouvel objet est créé avec une copie exacte des valeurs d'objet spécifiées.
- Une copie superficielle est principalement utilisée pour copier l'élément de premier niveau, ce qui signifie que vous ne pouvez cloner que les éléments d'une dimension ou Tableau 1D.
- Si l'objet d'origine contient des références, seules les adresses de référence seront copiées.
Le Spread Operator […], tranche(), et concat () Les méthodes vous permettent de copier peu profond des éléments du tableau en javascript.
Copie profonde en javascript
Si vous souhaitez copier les éléments d'un tableau multidimensionnel, vous devez effectuer l'opération de copie en profondeur pour copier les éléments de tableau d'origine.
Le terme "Copie profonde»Fait référence à une procédure de copie récursive. Tout d'abord, il crée une nouvelle collection d'objets puis copie avec récursivement les éléments de tableau spécifiés. Ainsi, nous pouvons dire que, dans le cas d'une copie profonde, un tableau JavaScript complet est copié ou cloné dans un autre tableau, et il copie le premier niveau et tous les éléments imbriqués d'un tableau multidimensionnel.
Json.stringify () et Json.Parse () Des méthodes sont utilisées pour copier un tableau multidimensionnel, où le JSON.La méthode stringify () convertira l'objet spécifié en chaîne, que vous pouvez convertir en tableau à l'aide de JSON.Parse () Méthode.
Maintenant, vérifions quelques exemples pratiques pour copier des tableaux unidimensionnels et multidimensionnels avec les méthodes de copie superficielle et profonde mentionnées.
Comment copier des éléments de tableau en JavaScript à l'aide de l'opérateur de diffusion
En JavaScript, le «diffuser»L'opérateur peut être utilisé pour copier ou étaler les éléments du tableau. Trois points consécutifs "… ”Représente l'opérateur de propagation. N'oubliez pas que l'opérateur de diffusion ne copiera les éléments du tableau qu'au niveau un, et les éléments imbriqués sont passés sous forme de références.
Syntaxe de l'opérateur de diffusion pour copier l'élément du tableau
var array2 = [… array1];Ici, l'opérateur de diffusion copiera les éléments de «Array1" pour "Array2".
Exemple: comment copier des éléments de tableau en javascript à l'aide de l'opérateur de diffusion
Tout d'abord, nous créerons un nouveau tableau nommé «des oiseaux«Avoir deux éléments:«Perroquet" et "Corbeau»:
var oiseaux = [«perroquet», «corbeau»];Ensuite, nous copierons le «des oiseaux"Arrayes Éléments à"débutants" déployer:
var newbirds = [… oiseaux];console.log (débutant);
De plus, vous pouvez vérifier si l'ajout d'un nouvel élément dans le «débutants»Array Modifiera le«des oiseaux”Array ou non:
débutants.push ('pigeon')console.log (débutant);
console.journal (oiseaux);
Comme vous pouvez le voir dans la sortie, nous avons copié avec succès le «des oiseaux"Arrayes Éléments à"débutants«Arraie et poussant de nouveaux éléments à«débutants«N'a appliqué aucun changement dans le«des oiseaux" déployer:
Comment copier les éléments du tableau en javascript à l'aide de la méthode Slice ()
La méthode JavaScript Slice () est utilisée pour copier des éléments de tableau dans un autre objet ou un tableau. Le tableau d'origine ne sera pas modifié dans le cas de l'utilisation de la méthode Slice ().
Méthode Syntaxe de Slice () pour copier les éléments du tableau
var array2 = array1.tranche();Selon la syntaxe, la méthode Slice () copiera les éléments de "Array1" dans "Array2".
Exemple: comment copier les éléments du tableau en javascript à l'aide de la méthode Slice ()
Dans l'exemple ci-dessous, nous utiliserons le «tranche()«Méthode pour copier le«des oiseaux"Arrayes Éléments à"débutants" déployer:
var oiseaux = [«perroquet», «corbeau»];var débutant = oiseaux.tranche();
console.log (débutant);
Maintenant, poussant de nouveaux éléments dans le «débutants«Le tableau ne modifiera pas le«des oiseaux" déployer:
débutants.push ('pigeon')console.log (débutant);
console.journal (oiseaux);
Voici la sortie que nous avons obtenue de l'exécution du programme ci-dessus:
À partir de la sortie ci-dessus, on peut voir clairement que l'ajout d'éléments dans le «débutants«Array n'a pas affecté les éléments du«des oiseaux" déployer.
Comment copier les éléments du tableau en javascript à l'aide de la méthode Concat ()
"concat ()"Est une autre méthode JavaScript utile qui peut vous aider à copier des éléments de tableau. Dans la méthode Concat (), vous pouvez prendre un tableau vide et y copier les éléments de tableau d'origine. Il créera une nouvelle copie du tableau spécifié.
Syntaxe de la méthode Concat () pour copier les éléments du tableau
var array2 = [].concat (array1);Dans la syntaxe donnée ci-dessus, la méthode Concat () copiera le «Array1«Éléments dans un tableau vide [], puis le résultat sera stocké dans«Array2".
Exemple: comment copier les éléments du tableau en javascript à l'aide de la méthode Concat ()
Maintenant, nous allons utiliser le javascript "concat ()«Méthode pour copier les éléments du«des oiseaux"Array à"débutants»:
var oiseaux = [«perroquet», «corbeau»];var newbirds = [].concat (oiseaux);
console.log (débutant);
Ensuite, nous allons pousser un nouvel éléments à «débutants”Array et vérifiez s'il met à jour le«des oiseaux”Array également:
débutants.push ('pigeon')console.log (débutant);
console.journal (oiseaux);
Jetez un œil à la sortie en dessous:
Comme vous pouvez le voir dans la sortie ci-dessus, poussant de nouveaux éléments dans le «débutants«Array n'a pas modifié le«des oiseaux" déployer.
Comment copier des éléments de tableau multidimensionnels en javascript
Si vous souhaitez copier des éléments à partir d'un tableau multidimensionnel, vous pouvez utiliser le JSON.Stringify () et JSON.Parse () Méthodes. Le json.La méthode stringify () convertira l'objet spécifié en une chaîne, qui peut ensuite être convertie en un tableau à l'aide de JSON.Parse () Méthode.
Syntaxe pour copier des éléments de tableau multidimensionnels
var array2 = json.Parse (JSON.stringify (array1));Premièrement, le «Json.stringify ()"La méthode convertira"Array1”To String, puis il l'analysera à un tableau (objet) en utilisant le«Json.Parse ()" méthode. Les éléments de réseau retournés seront ensuite copiés sur «Array2".
Exemple: comment copier des éléments de tableau multidimensionnels en javascript
Dans cet exemple, nous avons utilisé le JSON.Stringify () et JSON.Parse () Méthodes pour copier les éléments de plusieurs dimensions «des oiseaux"Array à"débutants»:
var birds = [name: 'Parrot', name: 'Crow'];var newbirds = json.Parse (JSON.Stringify (oiseaux));
console.log (débutant);
La sortie donnée ci-dessus signifie que nous avons copié avec succès les éléments du «des oiseaux"Array à"débutants".
Conclusion
Spread Operator «[…]», tranche(), et concat () Les méthodes vous permettent de peu profond copie 1D des éléments de tableau en javascript et pour profond Copie de tableaux multidimensionnels, Json.stringify () et Json.Parse () Les méthodes sont utilisées, où le JSON.La méthode stringify () convertira l'objet spécifié en chaîne, qui peut ensuite être analysé en tableau avec JSON.Parse () Méthode. Cet article a discuté des méthodes pour copier des éléments de tableau en javascript.