web-dev-qa-db-fra.com

Comment mettre à jour un tableau après épissure dans Svelte?

J'apprends Svelte et je lis dans la documentation que les tableaux doivent être réaffectés pour qu'un composant ou une page le mette à jour. Pour cela, ils ont imaginé une solution plus idiomatique. Au lieu d'écrire:

messages.Push('hello');
messages = messages;

vous pouvez écrire à la place:

messages = [...messages, 'hello'];

D'accord, c'est logique. Mais alors la documentation dit:

Vous pouvez utiliser des modèles similaires pour remplacer la pop, le décalage, le décalage et l'épissure.

Mais comment? Je ne vois pas comment vous pouvez supprimer les éléments d'un tableau. Plus précisément, comment pourrais-je écrire ce qui suit plus idiomatiquement?

messages.splice(messages.indexOf('hello'), 1);
messages = messages;
javascriptarrayssvelte
4
Mielipuoli

Vous pouvez effectuer les épissures habituelles Push et pop ou `sur votre baie

Mais comme la réactivité de Svelte est déclenchée par des affectations, l'utilisation de méthodes de tableau comme Push et splice ne provoquera pas automatiquement de mises à jour.

Selon Tout sur les tableaux et objets immuables en JavaScript vous pouvez le faire de cette façon ...

let messages = ['something', 'another', 'hello', 'Word', 'another', 'again'];

const indexOfHello = messages.indexOf('hello');

messages = [...messages.slice(0, indexOfHello), ...messages.slice(indexOfHello + 1)];

Notez la différence entre épissure et tranche

La méthode splice () ajoute/supprime des éléments vers/depuis un tableau et renvoie les éléments supprimés. Remarque : cette méthode modifie le tableau d'origine. Syntaxe : array.splice(start, deleteCount, itemstoAdd, addThisToo);

Mais

La méthode slice () renvoie les éléments sélectionnés dans un tableau, en tant que nouvel objet tableau. La méthode slice () sélectionne les éléments commençant à l'argument de début donné, et se termine à, mais n'inclut pas, l'argument de fin donné. Remarque : le tableau d'origine ne sera pas modifié.

En mots

Il renvoie une copie superficielle d'une partie d'un tableau dans un nouvel objet tableau sélectionné du début à la fin (fin non incluse). Le tableau d'origine ne sera pas modifié. Syntaxe: array.slice(start, end);

1
Parables Boltnoel

Un liner ne fonctionnera pas avec la fonction de tableau qui change le tableau en place, comme pop, splice, shift ou unshift, qui changent tous le tableau réel et ne retourne pas le tableau modifié.

Par exemple, dans le cas de l'épissure (je souligne):

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

un liner n'attribuera pas les valeurs correctes, ne faites pas ceci:

let bob = [23, 46];
bob = bob.splice(0,1); // bob is now [23], instead of [46], after removing the first element

Cela signifie que vous aviez la bonne intuition, l'épissure doit se produire avant la réaffectation, généralement cela se fera en deux déclarations. Cela réagirait comme vous vous en doutez, résultant en un tableau sans bonjour:

let foo = ['hello', 'world'];
foo.splice(foo.indexOf('hello'), 1);
foo = foo; // foo is now ['world'], after removing 'hello'
0
Félix Gagnon-Grenier

Comme mentionné, la réactivité de Svelte est déclenchée par des affectations. Le tutoriel Svelte actuel utilise JavaScript (ES6) syntaxe étalée (trois points) pour ajouter le nombre supérieur suivant à un tableau, fournissant une solution plus idiomatique qu'une affectation redondante utilisant Push:

function pushNumber() {     
    numbers = [...numbers, lastnumber]; // 1, 2, 3, 4, 5
}

Vous pouvez utiliser la syntaxe répartie pour remplacer pop, shift, unshift et splice même si cela peut augmenter le temps et la complexité de l'opération dans certains cas:

function unshiftNumber() {  
    numbers = [firstnumber, ...numbers]; // 0, 1, 2, 3, 4
}

function popNumber() {
    numbers = [...numbers.slice(0,numbers.length - 1)]; // 1, 2, 3
}

function shiftNumber() {
    numbers = [...numbers.slice(1,numbers.length)]; // 2, 3, 4
}

function spliceNumber() {
    numbers = [firstnumber, ...numbers.slice(0,numbers.length-1)];// 0, 1, 2, 3
}

La propagation n'est cependant qu'une façon de le faire. Le but derrière ne pas utiliser pop/Push, etc. est d'encourager l'immuabilité. Ainsi, toute suppression peut simplement être un filtre, par exemple.

0
Michael McGinnis