Cheat Sheet dei Metodi degli Array JavaScript (Live)
Cheat Sheet dei Metodi degli Array JavaScript
Cheat Sheet dei Metodi degli Array JavaScript (Eseguili dal Vivo) | We.Inc
Scrivi la tua lista e guarda map, filter, reduce, find, sort, splice e altri 30 metodi degli array eseguirsi su di essa, con un segno chiaro su ogni metodo che modifica l'array originale.
I metodi degli array si dividono in due gruppi. Alcuni modificano l'array su cui li chiami, come push, pop, splice, sort e reverse. Altri restituiscono un nuovo array o un valore e lasciano intatto l'originale, come map, filter, slice, toSorted e reduce. Modifica la lista qui sotto e ogni metodo viene rieseguito sui tuoi valori.
Operazioni comuni sugli array e il metodo per ciascuna
Operazione
Metodo
Modifica l'originale?
Trasformare ogni elemento
arr.map(fn)
No
Tenere gli elementi che superano un test
arr.filter(fn)
No
Combinare in un solo valore
arr.reduce(fn, start)
No
Primo elemento che corrisponde
arr.find(fn)
No
Aggiungere in fondo
arr.push(x)
Sì
Copia ordinata
arr.toSorted(fn)
No
Contare gli elementi
In lettura no; in scrittura sì
La maggior parte dei cheat sheet elenca i nomi dei metodi con un solo esempio preconfezionato. Qui gli esempi girano su una lista che controlli tu, così puoi vedere cosa succede con duplicati, una lista vuota o un solo elemento. Ogni riga è etichettata, così capisci al volo se un metodo riscrive i tuoi dati, che è l'origine di molti bug dello stato in React e librerie simili.
Scrivi nella casella una lista separata da virgole. Gli spazi attorno a ogni elemento vengono rimossi.
Ogni riga si ricalcola. I metodi che modificano l'array girano ogni volta su una copia nuova, e la riga mostra sia il valore restituito sia l'array dopo l'operazione.
Filtra per nome o scegli un gruppo come Ricerca o Trasformazione per restringere la tabella.
Scorri in basso per gli esempi di concatenamento, la proprietà length e la tabella di sostituzione da metodi che modificano a metodi che copiano.
Nello stato di React, preferisci toSorted, toReversed, toSpliced e with ai loro gemelli che modificano sul posto, perché se cambi il vecchio array React potrebbe non accorgersi dell'aggiornamento.
Dai a reduce un valore iniziale. Senza, un array vuoto lancia un TypeError.
forEach restituisce sempre undefined e non si può interrompere con break. Usa for...of, some o find quando devi fermarti prima.
map, filter e slice copiano un solo livello. Gli oggetti dentro il nuovo array sono gli stessi oggetti di prima.
Domande frequenti
Come ottengo la lunghezza di un array in JavaScript?
Leggi arr.length. È una proprietà, non un metodo, quindi niente parentesi. Vale uno in più dell'indice più alto, che negli array normali corrisponde al numero di elementi. Impostare arr.length = 0 svuota l'array, e impostare un numero più piccolo taglia gli elementi in fondo.
Qual è la differenza tra map e forEach?
map costruisce un nuovo array da ciò che la tua funzione restituisce per ogni elemento, così puoi assegnarlo o concatenare altri metodi. forEach si limita a chiamare la tua funzione e restituisce undefined. Usa map quando vuoi un risultato e forEach solo per effetti collaterali come il logging.
Quali metodi degli array modificano l'array originale?
push, pop, shift, unshift, splice, sort, reverse, fill e copyWithin modificano l'array sul posto. Lo fa anche impostare direttamente length o un indice. Tutto il resto in questa tabella lo lascia intatto.
Come rimuovo un elemento da un array senza modificarlo?
Usa filter per escludere in base al valore, per esempio arr.filter((x) => x !== 'kiwi'), oppure toSpliced(index, 1) per escludere in base alla posizione. Entrambi restituiscono un nuovo array e lasciano l'originale com'era.
Perché map restituisce valori undefined?
La tua callback non ha restituito nulla. Una arrow function con le parentesi graffe richiede un return esplicito; scrivi (x) => x * 2 oppure (x) => { return x * 2; }. Un return mancante dà undefined in quella posizione.
Leggere una catena da sinistra a destra
Poiché i metodi che copiano restituiscono array, puoi chiamare un altro metodo direttamente sul risultato. Una catena come orders.filter(isPaid).map(toTotal).reduce(add, 0) si legge come una frase: tieni gli ordini pagati, trasforma ognuno in un numero, sommali.
Le catene lunghe sono facili da leggere ma percorrono la lista una volta per ogni passaggio. Con qualche migliaio di elementi non conta mai; con dati molto grandi un unico ciclo for...of che fa tutte e tre le cose è più veloce.
I metodi di ricerca restituiscono cose diverse
includes risponde sì o no. indexOf e findIndex danno una posizione, dove -1 significa non trovato. find e findLast danno l'elemento stesso, oppure undefined. some ed every rispondono sì o no a una domanda su una funzione di test.
includes e indexOf confrontano con l'uguaglianza stretta, quindi non possono trovare un oggetto in base al suo contenuto. Per quello usa find o some con una funzione di test.
Metodi che modificano e i loro gemelli che copiano
Quando non devi toccare l'originale, per esempio lo stato di React o l'argomento di una funzione, sostituisci la colonna di sinistra con quella di destra.
Sul posto oppure copia
Modifica l'array
Restituisce invece un nuovo array
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] oppure arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
Concatenare map, filter e reduce
Totale degli ordini pagati in un'unica catena
Ogni passaggio restituisce un array nuovo, su cui gira il metodo successivo. La lista originale degli ordini non viene mai modificata.
Leggere e impostare length
length è una semplice proprietà. Ridurla rimuove elementi dalla fine, ed è per questo che conta come una modifica all'array.
Aggiornare lo stato di React senza modificarlo
I metodi che copiano danno a React un nuovo array, così il componente viene renderizzato di nuovo. Chiamare sort o push sull'array dello stato non lo farebbe.
Quanti elementi
Primo elemento
Ultimo elemento, contando dalla fine
true se il valore è presente
Prima posizione del valore, oppure -1
Ultima posizione del valore, oppure -1
Primo elemento che supera il test
Posizione del primo elemento che supera il test
Ultimo elemento che supera il test
true se almeno un elemento lo supera
true se tutti gli elementi lo superano
Nuovo array con il risultato di ogni callback
Nuovo array degli elementi che superano il test
Riduce la lista a un solo valore
map, poi appiattisce di un livello
Copia delle posizioni 1 e 2
Nuovo array con elementi aggiunti in fondo
Una stringa con un separatore
Copia ordinata (ordine del testo)
Copia invertita
Copia con la posizione 1 rimossa
Copia con la posizione 0 sostituita
Ordina sul posto e restituisce lo stesso array
Inverte sul posto
Aggiunge in fondo, restituisce la nuova lunghezza
Rimuove l'ultimo elemento e lo restituisce
Aggiunge all'inizio, restituisce la nuova lunghezza
Rimuove il primo elemento e lo restituisce
Rimuove dalla posizione 1, restituisce gli elementi rimossi
Sovrascrive dalla posizione 1 alla fine
Copia una parte dell'array sopra un'altra parte
Iteratore delle posizioni (espanso qui per mostrarlo)
Iteratore di coppie [posizione, elemento]
Tutti
Lettura
Ricerca
Trasformazione
Ordinamento
Aggiungere e rimuovere
Iterazione
Tabella live dei metodi degli array
Scrivi una lista separata da virgole e ogni metodo qui sotto viene eseguito su di essa mentre la modifichi.