web-dev-qa-db-fra.com

Comment la syntaxe étendue affecte-t-elle l'épissure du tableau

J'ai trouvé le code suivant et je ne sais pas quelle est la différence entre A et B:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

UNE

fruits.splice(2,0,["Lemon", "Kiwi"]);

B

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var A = fruits.splice(2, 0, ["Lemon", "Kiwi"]);
var B = fruits.splice(...[2, 0].concat(["Lemon", "Kiwi"]));

console.log(A)
console.log(B)
javascriptarraysspread-syntax
35
vuvu

Tout d'abord, les déclarations A et B généreront des résultats différents .

Dans Statement A, Vous insérez un tableau (["Lemon", "Kiwi"]) En tant qu'élément de tableau à la position 2 tout en supprimant 0 élément. Ainsi, vous insérez un tableau de chaînes dans un autre tableau de chaînes à la position 2.

var fruits = ["Banana", "Orange", "Apple", "Mango"];


fruits.splice(2,0,["Lemon", "Kiwi"]);

console.log(fruits);

Cependant , Statement B Est beaucoup plus intéressant. Pour bien comprendre, déconnectez-vous d'abord de sa partie principale comme ceci:

console.log(...[2,0].concat(["Lemon", "Kiwi"]));  // basic array concatenation then spread

Comme vous pouvez le voir, il génère, 2 0 Lemon Kiwi. Il est ensuite passé en paramètre à fruits.splice(..here..). Selon array#splice il entrera deux chaînes (Lemon & Kiwi) en position 2, tout en supprimant 0 élément.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));
// is same as fruits.splice(2, 0, 'Lemon', 'Kiwi')

console.log(fruits);

REMARQUE:

  • array#splice met à jour le tableau d'origine .
  • Statement A Insère un array (IE ["Lemon", "Kiwi"]) Dans le tableau de chaînes parent tandis que, Statement B Insère deux chaînes (IE 'Lemon', 'Kiwi') Dans le tableau de chaînes parent.
35
BlackBeard

A traite ["Lemon", "Kiwi"] comme un élément et l'insère dans l'index donné

["Banana", "Orange", ["Lemon", "Kiwi"], "Apple" , "Mango"];

B concats [2,0] et ["Lemon", "Kiwi"] puis les passe à l'épissure en tant qu'arguments séparés par des virgules comme

fruits.splice(2,0,"Lemon", "Kiwi");

qui modifient le tableau comme ci-dessous

["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
10
Hikmat G.

Selon le doc de la signature de fonction:

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

En B:

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

Parce que [2,0].concat(["Lemon", "Kiwi"]) signifie [2,0,"Lemon", "Kiwi"].

Donc fruits.splice(...[2,0,"Lemon", "Kiwi"]); devient fruits.splice(2,0,"Lemon", "Kiwi"); en utilisant l'opérateur spread (...).

Au-dessus du code que vous dites, ajoutez "Lemon", "Kiwi", À partir de l'index 2 Sans supprimer 0 élément.

Dans ce cas, 2 Est start index, deleteCount est 0 Et item1 Est "Lemon", item2 Est "Kiwi".

Maintenant en A:

fruits.splice(2,0,["Lemon", "Kiwi"]);

Vous dites ajouter ["Lemon", "Kiwi"] À partir de l'index 2 En supprimant 0 élément. Dans ce cas, 2 Est start index, deleteCount est 0 Et item1 Est ["Lemon", "Kiwi"].

8
Arup Rakshit

Tout d'abord, vous devez comprendre le fonctionnement de l'épissure

array.splice (start [ deleteCount [ item1 [ item2 [ ...]]]])

il prend start (index de départ à partir de zéro), le nombre d'éléments à supprimer, et reste tous les arguments seront ajoutés à cet index de départ.

Maintenant que vous êtes clair avec l'épissure, laissez-vous aller étape par étape pour une meilleure compréhension de ces déclarations.

La déclaration suivante

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

après la concaténation devient

fruits.splice(...[2,0,"Lemon", "Kiwi"]);

après propagation, il devient

fruits.splice(2,0,"Lemon", "Kiwi");

alors l'épissure prendra les fruits de l'index 2 et ne supprimera rien (comme zéro donné) et ajoutera le reste des arguments c'est-à-dire, "Lemon" et "Kiwi"

Vous obtenez donc ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

Où comme dans

fruits.splice(2,0,["Lemon", "Kiwi"]);

l'épissure prendra les fruits de l'index 2 et ne supprimera rien (encore une fois comme zéro) et ajoutera le reste des arguments c'est-à-dire, "[" Lemon "," Kiwi "]" "

Vous obtenez donc ["Banana", "Orange", ["Lemon", "Kiwi"], "Apple", "Mango"]

J'espère que ça aide.

6
Ankit Kumar Ojha

Toutes les autres réponses décrivent correctement la méthode splice et le comportement de l'opérateur réparti, mais aucune ne tente de corriger votre malentendu sur le résultat.

Ce que vous voyez réellement, c'est la méthode return value of splice , qui est un tableau contenant les éléments supprimés, qui, dans vos deux appels de méthode, n'en sont pas. C'est pourquoi vous obtenez un tableau vide comme résultat.

Pour voir le comportement de l'appel de la méthode splice , vous devez enregistrer le tableau fruits après chaque appel (pas le valeur de retour de la méthode), ce qui dans votre cas n'est pas tellement utile, car vos attentes concernant le tableau fruits ne tiennent pas dans le deuxième appel.

5
Mohammad Dehghan

Sans utiliser de spread, B est:

fruits.splice( 2, 0, "Lemon", "Kiwi" );

Le concat est un peu déroutant, il aurait aussi pu s'écrire:

fruits.splice( ...[ 2, 0 ], ...[ "Lemon", "Kiwi" ] );

Ou:

fruits.splice( ...[ 2, 0, "Lemon", "Kiwi" ] );
4
Ben West