Maison >interface Web >js tutoriel >Comment concaténer des tableaux sans changer le tableau d'origine ?

Comment concaténer des tableaux sans changer le tableau d'origine ?

王林avant: 2023-08-25 09:49:021322parcourir

Comment concaténer des tableaux sans changer le tableau dorigine ?

En JavaScript, nous pouvons utiliser la méthode splice() pour épisser des tableaux. La méthode splice() insère ou supprime un ou plusieurs éléments dans un tableau. Nous pouvons passer l'index de départ comme premier paramètre de la méthode splice() à partir de laquelle nous pouvons insérer ou supprimer des éléments. Il prend le nombre d'éléments à supprimer du tableau comme deuxième paramètre et la valeur du tableau à insérer dans le tableau comme troisième paramètre.

Ce tutoriel nous apprendra à concaténer des tableaux sans changer le tableau d'origine. Changerle tableau d'origine signifie apporter des modifications au tableau. Chaque fois que nous utilisons le tableau d'origine avec la méthode splice(), il insère ou supprime certains éléments du tableau d'origine. Nous allons donc cloner le tableau et utiliser la méthode splice() sur le tableau cloné pour garder le tableau d'origine identique.

Grammaire

Les utilisateurs peuvent utiliser la méthode array.splice() selon la syntaxe suivante.

  let results = array.splice(startIndex, count, element1, element2, element3, ... , elementN);

Paramètres

startIndex - C'est le premier index pour insérer ou supprimer des éléments du tableau.
Count - C'est le nombre d'éléments du tableau à remplacer. Si nous passons 0 comme valeur de comptage, il insérera l'élément à startIndex.
Element1, element2, …, element - Il s'agit du nouvel élément du tableau, remplacé ou inséré à partir de l'index de départ.

Maintenant, nous allons voir différentes manières d'épisser des tableaux sans modifier le tableau d'origine.

Utilisez l'opérateur spread pour concaténer des tableaux sans modifier le tableau d'origine

L'opérateur spreadnous permet de cloner un tableau. Nous pouvons créer un clone du tableau d'origine à l'aide de l'opérateur spread, après quoi nous pouvons utiliser la méthode splice() pour utiliser le clonearray pour splice le tableau sans modifier le tableau d'origine.

Grammaire

Les utilisateurs peuvent utiliser l'opérateur spread pour épisser des tableaux selon la syntaxe ci-dessous sans modifier le tableau d'origine.

let splicedArray = [...array].splice(0, 3);

Dans la syntaxe ci-dessus, le tableau est un tableau primitif et nous le clonons à l'aide de l'opérateur spread et utilisons la méthode splice() sur le tableau cloné.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un tableau contenant différentes chaînes. Après cela, nous le clonons à l'aide d'un tableau avec l'opérateur spread entre accolades « [] » et utilisons la méthode splice().

Nous avons passé 0 comme index de départ et 3 comme nombre total d'éléments à supprimer du tableau dans la méthode splice().

<html>
   <body>
      <h3> Using the <i> spread operator </i> to splice an array without mutating the original array. </h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById('output');
         let array = ["C", "Java", "CPP", "JavaScript", "TypeScript", "html", "HTML", "NodeJs", "ReactJs", "NextJs"];
         let splicedArray = [...array].splice(0, 3);
         output.innerHTML += "Orignal array after the splicing: " + array + "<br>";
         output.innerHTML += "Spliced array after the splicing:" + splicedArray + "<br>";
      </script>
   </body>
</html>

Utilisez la méthode filter() pour épisser des tableaux sans modifier le tableau d'origine

Nous pouvons créer un nouveau tableau en filtrant les éléments du tableau d'origine. La méthode splice() extrait le nombre total d'éléments de l'index de départ. Par conséquent, nous pouvons utiliser la méthode filter() pour filtrer le nombre total d'éléments de l'index de départ.

Grammaire

Les utilisateurs peuvent utiliser la méthode filter() selon la syntaxe suivante pour fusionner des tableaux sans modifier le tableau d'origine.

let splicedArray = array.filter((ele, ind) => {
   if (ind >= startIndex && ind < counts + startIndex) {
      return true;
   }
      return false;
})

Dans la syntaxe ci-dessus, nous filtrons les éléments du tableau de startIndex vers count + startIndex.

Exemple 2

Dans l'exemple ci-dessous, nous avons un tableau et utilisons la méthode filter() sur le tableau. L'utilisateur peut voir comment la méthode filter() extrait le nombre total d'éléments du startIndex.

De plus, lorsque nous utilisons la méthode filter() sur le tableau d'origine, elle reste inchangée.

<html>
   <body>
      <h3> Using the <i> filter() method </i> to splice an array without mutating the original array. </h3>
      <div id = "output"> </div>
      <button onclick = "spliceArray()"> Splice an array </button>
      <script>
         let output = document.getElementById('output');
            function spliceArray() {
               let startIndex = 5;
               let counts = 3;
               let array = ["C", "Java", "Cpp", "JavaScript", "TypeScript", "html", "HTML", "NodeJs", "ReactJs", "NextJs"];
            
            let splicedArray = array.filter((ele, ind) => {
               if (ind >= startIndex && ind < counts + startIndex) {
                  return true;
               }
                  return false;
            })
            output.innerHTML += "Orignal array after the splicing is " + array + "<br>";
            output.innerHTML += "Spliced array after the splicing is " + splicedArray + "<br>";
         }
      </script>
   </body>
</html>

Utilisez la méthode slice() pour épisser des tableaux sans modifier le tableau d'origine

La méthode

slice() extrait les éléments du tableau, nous utiliserons ici une copie du tableau. Lorsque nous passons 0 comme premier argument à la méthode slice() tout en l'utilisant avec un tableau, elle clone le tableau.

Après cela, nous pouvons utiliser la méthode splice() pour épisser les tableaux sans modifier le tableau d'origine.

Grammaire

Les utilisateurs peuvent utiliser les méthodes slice() et splice() selon la syntaxe ci-dessous pour épisser des tableaux sans modifier le tableau d'origine.

let clonedArray = array.slice(0);
let splicedArray = clonedArray.splice(start, end);

Dans la syntaxe ci-dessus, nous utilisons d'abord la méthode slice() pour cloner le tableau, puis utilisons la méthode splice() pour splice() un tableau.

Exemple 3

L'exemple ci-dessous contient un tableau de nombres avec plusieurs valeurs numériques. Ensuite, clonedArray contient un clone du tableau d'origine.

Ensuite, nous utilisons la méthode splice() avec le clonedArray et l'utilisateur peut vérifier si le tableau d'origine est le même.

<html>
   <body>
      <h3> Using the <i> slice() </i> method to splice an array without mutating the original array </h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById('output');
         let array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
         let clonedArray = array.slice(0);
         let splicedArray = clonedArray.splice(1, 6);
         output.innerHTML += "Orignal array after the splicing: " + array + "<br>";
         output.innerHTML += "Spliced array after the splicing: " + splicedArray + "<br>";
      </script>
   </body>
</html>

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!

JavaScript Array 运算符 count Filter 字符串

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Calculer la valeur de (m)1/n en JavaScriptArticle suivant：Calculer la valeur de (m)1/n en JavaScript

Articles Liés

Voir plus