Guía Completa sobre Arrays Reactivos en Svelte 5

---

En Svelte 5, el manejo de arrays reactivos se realiza utilizando las runes $state y $derived, permitiendo que los cambios en los datos sean reactivos sin necesidad de utilizar set() o update().

Definiendo un Array Reactivo en Svelte

Para crear un array reactivo en Svelte, se utiliza $state, lo que permite que cualquier cambio en el array numbers se actualice automáticamente en la UI.

let numbers = $state([1, 2, 3, 4]);

Usando $derived, podemos crear variables derivadas como la suma, el promedio y los números pares a partir del array reactivo numbers, actualizándose automáticamente cuando el array cambie.

let sum = $derived(numbers.reduce((acc, curr) => acc + curr, 0));
let average = $derived(sum / numbers.length);
let evenNumbers = $derived(numbers.filter(n => n % 2 === 0));

Operaciones con Arrays Reactivos

Agregar un nuevo número al final

Esta función agrega un nuevo número al final del array numbers, incrementando el valor en base a la longitud actual del array.

function addNumber() {
  numbers = [...numbers, numbers.length + 1];
}

Insertar un número en una posición específica

Aquí, la función inserta un número en la posición especificada del array numbers, manteniendo los elementos existentes sin alterarlos.

function insertAt(index, value) {
  numbers = [...numbers.slice(0, index), value, ...numbers.slice(index)];
}

Eliminar un número por índice

En este escenario, la función elimina un número de la lista numbers en el índice especificado utilizando el método filter para mantener solo los elementos que no coincidan con el índice a eliminar.

function removeAt(index) {
  numbers = numbers.filter((_, i) => i !== index);
}

Modificar un número en una posición específica

El código actualiza un número en el array numbers en la posición dada, reemplazando el valor en el índice especificado por el nuevo valor usando el método map.

function updateAt(index, value) {
  numbers = numbers.map((n, i) => (i === index ? value : n));
}

Orden ascendente o descendente

El código ordena el array numbers en orden ascendente o descendente según el valor de ascending. Utiliza sort para ordenar los números de acuerdo con la lógica especificada.

function sortNumbers(ascending = true) {
  numbers = [...numbers].sort((a, b) => (ascending ? a - b : b - a));
}

Filtrar números mayores a un valor dado

El código filtra los números en el array numbers, dejando solo aquellos que son mayores que el valor especificado en value.

function filterGreaterThan(value) {
  numbers = numbers.filter(n => n > value);
}

Multiplicar todos los elementos por un valor

En este caso, el código multiplica cada número del array numbers por el valor proporcionado en multiplier.

function multiplyAll(multiplier) {
  numbers = numbers.map(n => n * multiplier);
}

Monitoreo de Cambios con $effect

Podemos observar los cambios en el array y sus valores derivados usando la rune $effect:

$effect(() => {
  console.log('Numbers updated:', numbers);
  console.log('Current sum:', sum);
  console.log('Current average:', average);
  console.log('Even numbers:', evenNumbers);
});

En este contexto, el código usa $effect para monitorear los cambios en numbers, sum, average, y evenNumbers, y los registra cada vez que uno de ellos se actualiza.