Data di pubblicazione: 1° maggio 2025
Se scrivi JavaScript, l'iterazione è qualcosa che fai spesso. Scrivi loop per lavorare con gli array o utilizzi metodi di programmazione funzionale come map, filter e altri metodi simili per elaborare tutti i tipi di dati.
Tuttavia, un problema con l'utilizzo di questi metodi è che sono disponibili solo per gli array. Se vuoi utilizzarli su un oggetto iterabile, devi convertirlo in un array e poi chiamare il metodo necessario. Questo può essere uno spreco o, nei casi in cui l'interabile rappresenti un set di dati infinito che utilizza funzioni generatore, non è possibile. Tuttavia, ora che gli iterator helper sono diventati di nuova disponibilità di base, questa funzionalità è finalmente disponibile in tutti i browser.
Come funzionano gli iteratori di supporto?
Gli aiuti per gli iteratori vengono esposti definendo nuovi metodi su prototype dell'oggetto Iterator. Questi metodi sono in linea con molti metodi di programmazione funzionale che utilizzi abitualmente, come map, filter, reduce e altri metodi simili.
Ad esempio, puoi utilizzare un helper iteratore nel metodo filter per filtrare gli elementi dell'elenco in base ai contenuti della relativa proprietà innerText per una raccolta di nodi DOM, che potrai poi utilizzare in un ciclo for:
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}
Nello snippet di codice precedente, il metodo di assistenza dell'iteratore per filter viene utilizzato per eseguire l'iterazione su tutti gli elementi <li> in un elemento <ul> specifico. I criteri di filtro sono che i contenuti di testo di ogni elemento devono contenere una sottostringa di "kiwi".
Gli aiuti per gli iteratori possono essere utilizzati anche con le funzioni generatore. In questo esempio, una funzione di generatore che calcola i fatoriali, ma utilizza l'helper iteratore per filtrare i valori in quelli divisibili per 8 e registrare i primi cinque valori filtrati nella console:
function* factorials (n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
yield result;
}
}
const filteredFactorials = factorials(128).filter(x => x % 8 === 0);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
In particolare, lo snippet di codice precedente è un esempio di qualcosa che non sarebbe possibile con gli aiuti per gli iteratori, perché il numero di fattoriali è infinito e non è qualcosa che puoi convertire in un array.
A seconda della situazione, gli aiuti per gli iteratori hanno un grande potenziale e sono disponibili per ciascuno di questi metodi iterabili:
Le possibilità di casi d'uso degli iteratori di supporto sono ampie e possono offrire un notevole impulso all'ergonomia degli sviluppatori. Ora che sono disponibili come baseline di nuova creazione, dovresti avere sempre più fiducia nel poterli utilizzare nel tempo senza temere problemi di compatibilità. Per ulteriori informazioni, consulta le seguenti risorse: