La épissure() La méthode modifie le contenu d'un tableau en supprimant ou en remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments à la place.

La source de cet exemple interactif est stockée dans un référentiel GitHub. Si vous souhaitez contribuer au projet d'exemples interactifs, veuillez cloner https://github.com/mdn/interactive-examples et envoyez-nous une pull request.

Syntaxe

let arrDeletedItems = array .splice(start [, deleteCount [, item1 [, item2 [, ...]]]])

Paramètres

start L'index auquel commencer à modifier le tableau. S'il est supérieur à la longueur du tableau, start sera défini sur la longueur du tableau. S'il est négatif, il commencera autant d'éléments à partir de la fin du tableau. (Dans ce cas, l'origine -1 , c'est-à-dire -n est l'index du n ième dernier élément, et est donc équivalent à l'index de array .length - n .) Si array .length + start est inférieur à 0 , il commencera à partir de l'index 0 . deleteCount Facultatif Entier indiquant le nombre d'éléments du tableau à supprimer depuis le début. Si deleteCount est omis, ou si sa valeur est égale ou supérieure à array .length - start (c'est-à-dire si elle est égale ou supérieure au nombre d'éléments restants dans le tableau, en commençant par start), alors tous les éléments du début à la fin du tableau seront supprimés.

Noter: Dans IE8, il ne supprimera pas tout lorsque deleteCount est omis.

Si deleteCount est égal à 0 ou négatif, aucun élément n'est supprimé. Dans ce cas, vous devez spécifier au moins un nouvel élément (voir ci-dessous). item1 , item2 , ... Facultatif Les éléments à ajouter au tableau, en commençant par start . Si vous ne spécifiez aucun élément, splice() ne supprimera que des éléments du tableau.

valeur de retour

Un tableau contenant les éléments supprimés.

Si un seul élément est supprimé, un tableau d'un élément est renvoyé.

Si aucun élément n'est supprimé, un tableau vide est renvoyé.

La description

Si le nombre spécifié d'éléments à insérer diffère du nombre d'éléments supprimés, la longueur du tableau sera différente à la fin de l'appel.

Exemples

Supprimez les éléments 0 (zéro) de l'index 2 et insérez "drum"

let monPoisson = ["ange", "clown", "mandarin", "esturgeon"] let remove = monPoisson.splice(2, 0, "tambour") // monPoisson est ["ange", "clown", "tambour" ", "mandarin", "sturgeon"] // supprimé est , aucun élément supprimé

Supprimez les éléments 0 (zéro) de l'index 2 et insérez "drum" et "guitar"

let myFish = ["ange", "clown", "mandarin", "esturgeon"] let remove = myFish.splice(2, 0, "drum", "guitar") // myFish est ["ange", "clown ", "drum", "guitar", "mandarin", "sturgeon"] // supprimé est , aucun élément supprimé

Supprimer 1 élément de l'index 3

let myFish = ["ange", "clown", "drum", "mandarin", "sturgeon"] let remove = myFish.splice(3, 1) // supprimé est ["mandarin"] // myFish est [" ange", "clown", "tambour", "esturgeon"]

Supprimez 1 élément de l'index 2 et insérez "trompette"

let monPoisson = ["ange", "clown", "tambour", "esturgeon"] let remove = monPoisson.splice(2, 1, "trompette") // monPoisson est ["ange", "clown", "trompette" ", "esturgeon"] // supprimé est ["tambour"]

Supprimez 2 éléments de l'index 0 et insérez "perroquet", "anémone" et "bleu"

let monPoisson = ["ange", "clown", "trompette", "esturgeon"] let remove = monPoisson.splice(0, 2, "perroquet", "anémone", "bleu") // monPoisson est ["perroquet ", "anémone", "bleu", "trompette", "esturgeon"] // supprimé est ["ange", "clown"]

Supprimer 2 éléments de l'index 2

let monPoisson = ["perroquet", "anémone", "bleu", "trompette", "esturgeon"] let remove = monPoisson.splice(2, 2) // monPoisson est ["perroquet", "anémone", "esturgeon" "] // supprimé est ["bleu", "trompette"]

Supprimer 1 élément de l'index -2

let monPoisson = ["ange", "clown", "mandarin", "esturgeon"] let remove = monPoisson.splice(-2, 1) // monPoisson est ["ange", "clown", "esturgeon"] / / supprimé est ["tangerine"]

Supprimer tous les éléments après l'index 2 (incl.)

let monPoisson = ["ange", "clown", "mandarin", "esturgeon"] let remove = myFish.splice(2) // monPoisson est ["ange", "clown"] // supprimé est ["mandarin" , "esturgeon"]

Caractéristiques

spécification	Statut	Commentaire
Dernier projet ECMAScript (ECMA-262)	Brouillon
ECMAScript 2015 (6e édition, ECMA-262) La définition de "Array.prototype.splice" dans cette spécification.	la norme
ECMAScript 5.1 (ECMA-262) La définition de "Array.prototype.splice" dans cette spécification.	la norme
ECMAScript 3e édition (ECMA-262)	la norme	définition initiale. Implémenté en JavaScript 1.2.

Compatibilité du navigateur

Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter https://github.com/mdn/browser-compat-data et envoyez-nous une demande d'extraction.

Mettre à jour les données de compatibilité sur GitHub

	Bureau						Mobile						serveur
	Chrome	bord	Firefox	Internet Explorer	Opéra	safari	vue Web Android	Chrome pour Androïd	Firefox pour Androïd	Opéra pour Android	Safari sur iOS	Internet Samsung	Node.js
épissure	Prise en charge complète de Chrome 1	Bord Prise en charge complète 12	Prise en charge complète de Firefox 1	Prise en charge complète d'IE 5.5 Remarques Prise en charge complète 5.5 Remarques Remarques À partir d'Internet Explorer 5.5 à 8, tous les éléments du tableau ne seront pas supprimés si deleteCount est omis. Ce comportement a été corrigé dans Internet Explorer 9.	Prise en charge complète d'Opera Oui	Prise en charge complète de Safari 1	Prise en charge complète de WebView Android Oui	Prise en charge complète de Chrome Android 18	Prise en charge complète de Firefox Android 4	Opera Android Prise en charge complète Oui	Prise en charge complète de Safari iOS 1	Samsung Internet Android Prise en charge complète Oui	nodejs Prise en charge complète Oui

Légende

Plein soutien Prise en charge complète Voir les notes d'implémentation. Voir les notes d'implémentation.

En JavaScript, ainsi que dans d'autres langages de programmation, différentes méthodes sont utilisées pour travailler avec des tableaux.

Les méthodes facilitent la construction de la logique et son implémentation dans un script.

Voici les méthodes de base pour travailler avec des tableaux dans JS.

pousser

La méthode push() ajoute une valeur à la fin du tableau.

Soit arr = ; arr.push(312); journal de la console (arr); // →

populaire

La méthode pop() supprime le dernier élément du tableau ou renvoie sa valeur.

Soit arr = ; arr.pop(); journal de la console (arr); // →

En utilisant la possibilité d'obtenir la valeur du dernier élément d'un tableau comme exemple, nous pouvons obtenir le format d'image :

Soit img = "https://example.com/img/name.png" ; laissez format = img.split(".").pop(); journal de la console (format); // → png console.log(img.split(".")); // → ["https://exemple", "com/img/nom", "png"]

débrayer

La méthode unshift() ajoute un élément au début du tableau.

Soit arr = ; arr.unshift(312); journal de la console (arr); // →

décalage

La méthode shift() supprime le premier élément du tableau.

Soit arr = ; arr.shift(); journal de la console (arr); // → ;

Vous devez comprendre que lorsque vous utilisez les méthodes shift et unshift, chaque élément du tableau change son index. Cela peut ralentir l'exécution du programme si le tableau est grand.

diviser

La méthode split() est utilisée pour transformer une chaîne en tableau. Split divise une chaîne (string) par le paramètre spécifié.

Soit str = "Anya, Masha, Sasha, Dasha" ; // c'est une chaîne let arr = str.split(", "); journal de la console (arr); // → ["Anya", "Masha", "Sasha", "Dasha"] est un tableau

rejoindre

La méthode join() combine les éléments d'un tableau dans une chaîne en utilisant le délimiteur spécifié dans le paramètre.

Soit arr = ["Notpad++", "Sublime", "VSCode"] ; // c'est un tableau let str = arr.join(", "); console.log("Editeurs de code : " + str); // → "Éditeurs de code : Notpad++, Sublime, VSCode"

tranche

La méthode slice() crée un nouveau tableau dans lequel elle copie les éléments de la source, en commençant par l'élément avec l'index du premier paramètre passé à la méthode, vers l'élément avec l'index du deuxième paramètre.

Par exemple : slice(3, 7) renverra les éléments avec les index 3, 4, 5, 6. L'élément avec l'index 7 ne sera pas inclus dans le tableau.

Si un paramètre avec une valeur négative est passé à slice(), il renvoie un nouveau tableau avec le nombre d'éléments spécifiés dans le paramètre, mais déjà pris à la fin du tableau d'origine.

La méthode slice ne modifie pas le tableau d'origine.

Voici quelques exemples du fonctionnement de la méthode slice() :

Soit arr = ["A", "B", "C", "D", "E", "F", "G"] ; // Retourne un tableau contenant des éléments avec des indices de 2 à 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Retourne un nouveau tableau contenant des éléments avec des indices de 3 à arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Renvoie une copie du tableau d'origine console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Renvoie un nouveau tableau composé des trois derniers éléments du fichier original console.log (arr.tranche (-3)); // → ["E", "F", "G"]

épissure

La méthode splice() modifie le contenu d'un tableau en supprimant des éléments existants et/ou en en ajoutant de nouveaux.

Syntaxe:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Option :

• début- Index auquel commencer à modifier le tableau. S'il est supérieur à la longueur du tableau, l'index réel sera défini sur la longueur du tableau. Si négatif, spécifie l'index de l'élément à partir de la fin.
• deleteCount- Un entier indiquant le nombre d'anciens éléments à supprimer du tableau. Si deleteCount vaut 0, aucun élément n'est supprimé. Dans ce cas, vous devez spécifier au moins un nouvel élément. Si deleteCount est supérieur au nombre d'éléments restants dans le tableau, à partir de l'index start , tous les éléments jusqu'à la fin du tableau seront supprimés.
• articleN- Paramètres facultatifs. Éléments à ajouter au tableau. Si vous ne spécifiez aucun élément, splice() supprimera simplement les éléments du tableau.

Valeur de retour

La description

Si le nombre d'éléments spécifiés à insérer est différent du nombre d'éléments à supprimer, le tableau changera de longueur après l'appel.

Soit arr = [Barca, Shakhtar, Manchester United, Milan, Real Madrid, Ajax, Juventus] ; soit nax = arr.splice(2, 3); arr.splice(2, 3); journal de la console (nax); // → ["Man Utd", "Milan", "Réel"] console.log(arr); // → ["Bars", "Shakhtar"] arr.splice(1, 0, "Zenith", "CSKA", "Spartak"); journal de la console (arr); // → [Barça, Zénith, CSKA, Spartak, Shakhtar]

inverse

La méthode reverse() inverse l'ordre des éléments du tableau. En conséquence, le premier élément du tableau devient le dernier et le dernier élément devient le premier.

Soit arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]

carte

La méthode map() parcourt les éléments du tableau, effectue les actions spécifiées avec eux, et renvoie une copie du tableau avec les éléments modifiés.

Dans l'exemple ci-dessous, pour chaque élément du tableau, ajoutez la valeur de l'indice de cet élément (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4) :

Soit arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //

ou multiplier chaque valeur du tableau, par exemple, par 12

Soit arr = ; soit testMap = arr.map(a => a * 12); console.log(testMap); // →

filtre

La méthode filter() est utilisée pour filtrer les tableaux. Il parcourt le tableau, ne renvoyant que les éléments qui satisfont la condition donnée.

Par exemple, nous filtrons les valeurs du tableau à partir des nombres en ne laissant que ceux qui sont supérieurs à 21

Soit arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →

Veuillez noter que 21 n'a pas été inclus dans le résultat du tableau, car la condition était de renvoyer quelque chose qui est supérieur à 21. Pour que 21 soit inclus dans le tableau, la condition est définie comme supérieure ou égale à : élément >= 21

Il existe un malentendu courant parmi les développeurs JavaScript sur la différence entre ces deux méthodes. Savez-vous quelle est la différence tranche de épissure?

Ces deux méthodes permettent de diviser un tableau JavaScript en plusieurs parties, mais sans comprendre quand utiliser tranche, et quand épissure conduit à des erreurs difficiles à détecter. Examinons chacune des deux méthodes séparément, puis la différence deviendra apparente.

Trancher - couper et créer

verbe anglais tranche se traduit par "couper". Pour être honnête, je ne comprends pas ce qui a guidé les développeurs de la spécification, mais vous ne pouvez pas vous fier à la traduction des mots en JS. Selon la spécification ECMAScript 5.1, la méthode tranche prend deux arguments : les index de début et de fin. Ensuite, un nouveau tableau est créé contenant les éléments de l'ancien de l'index de début à la fin. Plus important encore, un nouveau tableau est toujours créé, c'est-à-dire le tableau auquel la méthode a été appliquée restera le même. N'oubliez pas non plus que le deuxième paramètre ne spécifie pas le nombre d'éléments, mais l'indice de fin, donc le deuxième paramètre doit toujours être supérieur au premier, sinon un tableau vide sera renvoyé. Prenons des exemples.

Var a = ; journal de la console(a); // var b = a.tranche(3, 5); journal de la console(a); // journal de la console(b); // var c = a.tranche(4, 2); journal de la console(a); // console.log(c);//

Comme d'habitude dans JS, vous devez juste vous rappeler que tranche vous renverra les éléments commençant à l'index de départ spécifié ( y compris cet élément lui-même ) et jusqu'à l'index de fin spécifié, mais aucun élément de fin .

Épisser - couper et diviser

De l'anglais épissure- épissure. Encore une fois, il n'y a aucun lien entre le verbe et les actions de la méthode. La principale différence entre splice est qu'il modifie le tableau d'origine. La méthode accepte toujours un index de début et de fin, mais il est important de se rappeler que votre tableau d'origine sera dépouillé d'éléments.

Var a = ; journal de la console(a); // var b = a.splice(3, 5); journal de la console(a); // journal de la console(b); // var c = a.splice(4, 2); journal de la console(a); // journal de la console(c); //

Encore une fois, rappelez-vous simplement que épissure tronquera le tableau d'origine à partir de l'index de départ spécifié ( y compris l'élément lui-même ) et jusqu'à l'index de fin spécifié ( incluant également l'élément lui-même ). Dans ce cas, la méthode renvoie tous les éléments coupés et vous pouvez les enregistrer séparément.

Il est également pratique d'utiliser la méthode splice pour supprimer des éléments d'un tableau. Permettez-moi de vous rappeler que la suppression habituelle a ; ne supprimera pas l'élément lui-même, mais le définira sur undefined. Pour supprimer un élément, il est préférable d'utiliser a.splice(1, 1);

Var a = ; supprimer un ; journal de la console(a); // var a = ; a.splice(1, 1); journal de la console(a); //

A noter que dans le dernier Versions Google La console Chrome dans le premier cas vous montrera le résultat suivant : . Il n'a probablement pas rendu l'élément indéfini, car en fait, la suppression n'a pas eu lieu.

Définition et application

Méthode JavaScript épissure() vous permet de modifier le contenu d'un tableau en supprimant des éléments existants et/ou en ajoutant de nouveaux éléments au tableau.

Veuillez noter que la méthode épissure() modifie un tableau existant plutôt que d'en renvoyer un nouveau. Les éléments supprimés sont renvoyés sous la forme d'un nouvel objet Array.

Prise en charge du navigateur

Méthode			Opéra		IExplorer	bord
épissure()	Oui	Oui	Oui	Oui	Oui	Oui

Syntaxe JavaScript :

// uniquement avec index déployer.épissure( début) // indiquant l'index et le nombre d'éléments à supprimer déployer.épissure( début, deleteCount) // indiquant l'index, le nombre d'éléments à supprimer et ajoutant des éléments déployer.épissure( début, deleteCount, élément1, élément2, ..., élémentX)

VersionJavaScript

ECMAScript 3 (implémenté dans JavaScript 1.2)

Valeurs des paramètres

Paramètre	La description
début	Un entier qui spécifie l'index du tableau à partir duquel les éléments seront supprimés du tableau et/ou ajoutés au tableau. Les valeurs négatives sont autorisées, dans ce cas l'indice à partir duquel la méthode sera appelée sera calculé selon la formule suivante : longueur (longueur du tableau) + début . Obligatoire.
deleteCount	Un entier spécifiant le nombre d'éléments à supprimer du tableau, en commençant à l'index spécifié dans début. Si un deleteCount est 0, aucun élément n'est supprimé. Si la valeur deleteCount supérieur au nombre d'éléments restants dans le tableau, tous les éléments restants du tableau seront supprimés. Valeur facultative, les valeurs négatives ne sont pas autorisées.
éléments)	Le ou les éléments à ajouter au tableau. L'indice du tableau auquel les nouveaux éléments seront insérés correspond au paramètre début. valeur facultative.

Exemple d'utilisation

var x = ; // initialise la variable contenant le tableau x.splice(3); x.splice(-3 ); // valeur variable x.splice(2 , 2 ); // valeur variable x.splice(-2 , 2 ); // valeur variable x.splice(0 , 2 , "z ", true ); // valeur de la variable ["z", vrai, 3, "a", "b", "c"] x.splice(3 , 0 , "z ", "z ", "z "); // valeur variable La méthode splice() dans les tableaux Javascript modifie le contenu d'un tableau en ajoutant de nouveaux éléments et en supprimant les anciens.

Syntaxe

Sa syntaxe est la suivante :

Array.splice(index, howMany, [, ..., elementN]);

Détails des paramètres

• index - L'index auquel commencer à modifier le tableau.
• howMany - Un entier indiquant le nombre d'anciens éléments de tableau à supprimer. Si howMany vaut 0, aucun élément n'est supprimé.
• element1, ..., elementN - Les éléments à ajouter au tableau. Si vous ne spécifiez aucun élément, splice supprime simplement les éléments du tableau.

Valeur de retour

Renvoie le tableau récupéré en fonction des paramètres passés.

Exemple

Essayez l'exemple suivant.

Conclusion

Après avoir ajouté 1 : orange, melon, eau, lait, sucre, café retiré : après avoir ajouté 1 : orange, melon, eau, sucre, café retiré : lait