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

Question

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) 

Answer 1

Tout d'abord, l'état A et l'état B va générer différents résultats.

En Statement A, vous insérez un tableau (["Lemon", "Kiwi"]) comme un élément de tableau à la position 2 tout en éliminant 0 articles. Donc, vous insérez un tableau de chaîne dans une autre chaîne de caractères tableau à la position 2.

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


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

console.log(fruits);

Toutefois, Statement B est beaucoup plus intéressant. À, bien le comprendre, la première ouverture de session, c'est la partie de base 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. Puis il est passé en tant que paramètre fruits.splice(..here..). Selon array#splice il entrera deux chaînes (Citron & Kiwi) à la position 2, tout en éliminant 0 éléments.

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);

NOTE:

• array#splice mises à jour le tableau d'origine.
• Statement A insère un array (IE ["Lemon", "Kiwi"]) dans le parent de tableau de chaîne alors que, Statement B insère deux chaînes (IE 'Lemon', 'Kiwi') parent (tableau de chaînes.

Answer 2

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

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

B concatient [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"]
 

Answer 3

Comme par le doc de la fonction de signature:

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

En B:

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

Parce qu' [2,0].concat(["Lemon", "Kiwi"]) moyen [2,0,"Lemon", "Kiwi"].

Donc, fruits.splice(...[2,0,"Lemon", "Kiwi"]); devient fruits.splice(2,0,"Lemon", "Kiwi"); à l'aide de la propagation de l'opérateur(...).

Au-dessus de code que vous dites d'ajouter "Lemon", "Kiwi", à partir de l'index 2 mo suppression 0 articles.

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

Maintenant:

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

Vous dites d'ajouter ["Lemon", "Kiwi"], à partir de l'index 2 avec la suppression de 0 articles. Dans ce cas - 2 est start index, deleteCount est 0, et item1 est ["Lemon", "Kiwi"].

Answer 4

Tout d'abord, vous devez comprendre comment les travaux d'épissure

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

il faut commencer(indice de départ à partir de zéro), le nombre d'éléments à supprimer, et le repos de tous les arguments seront ajoutés à l'indice de départ.

Maintenant vous êtes au clair avec épissure, alors allons y aller étape par étape pour une meilleure compréhension de ces relevés.

La déclaration suivante

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

après concaténation devient

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

après propagation, il devient

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

puis épissure va prendre des fruits à partir de l'indice 2 et de ne rien supprimer(comme zéro) et ajouter le reste des arguments ie., "Citron" et "Kiwi"

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

Où, comme dans le

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

l'épissure va prendre des fruits à partir de l'indice 2 et supprimer rien(encore que compte tenu de zéro) et ajouter le reste des arguments.e, "["Citron", "Kiwi"]"

Ainsi, vous obtenez ["Banana", "Orange", ["Lemon", "Kiwi"], "Apple", "Mango"]

J'espère que cela aide.

Answer 5

Toutes les autres réponses correctement décrire splice méthode et la propagation de l'opérateur comportement, mais aucun ne tente de corriger votre incompréhension sur le résultat.

Ce que vous êtes en train de voir, est la valeur de retour de l' splice méthode, qui est un tableau contenant les éléments supprimés, ce qui dans les deux appels à la méthode, n'en sont pas. C'est pourquoi vous obtenez un tableau vide comme résultat.

Pour voir le comportement de l'appelant splice méthode, vous devez vous connecter à l' fruits tableau après chaque appel (pas la valeur de retour de la méthode), ce qui dans ton cas n'est pas tellement utile, parce que vos attentes à propos de l' fruits tableau ne tient pas dans le deuxième appel.