Cosa dovresti sapere sugli array JavaScript

Un esempio di utilizzo di ridurre per appiattire in profondità un array

Vorrei fare una dichiarazione in grassetto: perché i loop sono spesso inutili e rendono il codice difficile da leggere. Quando si tratta di iterare su un array, trovare elementi, ordinarlo o qualunque cosa tu voglia, c'è probabilmente un metodo di array là fuori che puoi usare.

Tuttavia, alcuni di loro non sono ancora così conosciuti e usati nonostante la loro utilità. Farò il duro lavoro per te dandoti i metodi utili. Considera questo articolo come guida ai metodi degli array JavaScript.

Nota: prima di iniziare, devi sapere una cosa: sono influenzato dalla programmazione funzionale. Quindi tendo a usare metodi che non mutano direttamente l'array originale. In questo modo, evito gli effetti collaterali. Non sto dicendo che non si dovrebbe mai mutare un array, ma almeno sapere che alcuni metodi lo fanno e che può causare effetti collaterali. Gli effetti collaterali possono portare a cambiamenti indesiderati e cambiamenti indesiderati portano a bug!

Sapendolo, iniziamo.

Questo articolo è stato originariamente pubblicato su thomlom.dev. Puoi trovare altri articoli sullo sviluppo web su di esso!

L'essenziale

Ci sono quattro cose che vorresti sapere quando lavori con le matrici: mappa, filtro, riduzione e operatore di diffusione. Sono potenti e utili.

carta geografica

Lo userai molto. Fondamentalmente, ogni volta che devi modificare gli elementi del tuo array, pensa a usare map.

Prende un parametro: una funzione che viene chiamata su ogni elemento dell'array. E restituisce un nuovo array, quindi nessun effetto collaterale qui.

numeri const = [1, 2, 3, 4]
const numbersPlusOne = numbers.map (n => n + 1) console.log (numbersPlusOne) // [2, 3, 4, 5]

È inoltre possibile creare un nuovo array che mantiene solo una particolare proprietà di un oggetto:

const allActivities = [
  {title: "La mia attività", coordinate: [50.123, 3.291]},
  {titolo: "Un'altra attività", coordinate: [1.238, 4.292]}
]
const allCoordinates = allActivities.map (activity => activity.coordinates)
console.log (allCoordinates) // [[50.123, 3.291], [1.238, 4.292]]

Quindi, ricorda, ogni volta che devi trasformare un array, pensa a usare map.

filtro

Il nome di questo metodo è piuttosto esplicito qui: usalo quando vuoi filtrare un array.

Proprio come fa map, accetta una funzione come unico parametro che viene chiamato su ogni elemento dell'array. Questa funzione deve restituire un valore booleano:

  • vero se si desidera mantenere l'elemento nella matrice
  • falso se non si desidera mantenerlo.

Quindi avrai un nuovo array brillante con gli elementi che volevi conservare.

Ad esempio, è possibile mantenere solo i numeri dispari in un array:

numeri const = = 1, 2, 3, 4, 5, 6]
const oddNumbers = numbers.filter (n => n% 2! == 0) console.log (oddNumbers) // [1, 3, 5]

Oppure puoi anche usarlo per rimuovere un particolare elemento in un array:

const partecipanti = [
  {id: 'a3f47', nome utente: 'john'},
  {id: 'fek28', nome utente: 'mary'},
  {id: 'n3j44', nome utente: 'sam'},
]
funzione removeParticipant (partecipanti, ID) {
  return attende.filter (participant => participant.id! == id)
}
console.log (removeParticipant (partecipanti, 'a3f47')) // [{id: 'fek28', nome utente: 'mary'}, {id: 'n3j44', nome utente: 'sam'}];

ridurre

Il metodo più difficile da capire secondo me. Ma una volta padroneggiato, è pazzesco quante cose puoi farci.

Fondamentalmente, ridurre significa prendere una matrice di valori e combinarli in un unico valore. Richiede due parametri, una funzione di callback che è il nostro riduttore e un valore iniziale opzionale (che è il primo elemento dell'array per impostazione predefinita). Il riduttore stesso accetta quattro parametri:

  • L'accumulatore: accumula i valori restituiti nel tuo riduttore.
  • Il valore corrente dell'array
  • L'indice attuale
  • La riduzione dell'array è stata richiamata

Il più delle volte, userete solo i primi due parametri: l'accumulatore e il valore corrente.

Non essere troppo teorico. Ecco l'esempio più comune di ridurre:

numeri const = = 37, 12, 28, 4, 9]
const total = numbers.reduce ((total, n) => total + n) console.log (total) // 90

Alla prima iterazione, l'accumulatore, che è totale, assume un valore iniziale di 37. Il valore restituito è 37 + n e n è uguale a 12, quindi 49. Nella seconda iterazione, l'accumulatore è uguale a 49, il il valore restituito è 49 + 28 = 77. E così via e così via.

ridurre è così potente che puoi effettivamente usarlo per creare molti metodi di array come map o filter:

const map = (arr, fn) => {
  return arr.reduce ((mappedArr, element) => {
    return [... mappedArr, fn (element)]
  }, [])
}
console.log (mappa ([1, 2, 3, 4], n => n + 1)) // [2, 3, 4, 5]
const filtro = (arr, fn) => {
  return arr.reduce ((filteredArr, element) => {
    return fn (element)? [... filteredArr, element]: [... filteredArr]
  }, [])
}
console.log (filtro ([1, 2, 3, 4, 5, 6], n => n% 2 === 0)) // [1, 3, 5]

In sostanza, abbiamo ridotto il valore iniziale di []: il nostro accumulatore. Per la mappa, abbiamo eseguito una funzione il cui risultato viene aggiunto alla fine dell'accumulatore grazie all'operatore di diffusione (lo vedremo subito dopo, non ti preoccupare). Per il filtro, è quasi lo stesso, tranne per il fatto che abbiamo eseguito la funzione filtro sull'elemento. Se restituisce true, restituiamo l'array precedente, altrimenti aggiungiamo l'elemento alla fine dell'array.

Vediamo un esempio più avanzato: appiattire profondamente un array, ovvero trasformare qualcosa come [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] in [1, 2, 3, 4, 5, 6, 7, 8].

funzione flatDeep (arr) {
  return arr.reduce ((flattenArray, element) => {
    return Array.isArray (element)? [... flattenArray, ... flatDeep (element)]: [... flattenArray, element]
  }, [])
}
console.log (flatDeep ([1, 2, 3, [4, [[[5, [6, 7]]]], 8]])) // [1, 2, 3, 4, 5, 6, 7, 8]

Questo esempio è simile alla mappa, tranne per il fatto che qui utilizziamo la ricorsione. Non lo spiegherò perché non rientra nell'ambito di questo articolo. Tuttavia, se vuoi saperne di più sulla ricorsione, dai un'occhiata a questa eccellente risorsa.

Operatore di diffusione (ES2015)

Sono d'accordo, questo non è un metodo. Tuttavia, l'utilizzo dell'operatore di diffusione può aiutarti a ottenere molte cose quando lavori con le matrici. In effetti, puoi usarlo per espandere i valori di un array in un altro array. Da quel punto, è possibile creare una copia di un array o concatenare più array.

numeri const = [1, 2, 3]
const numbersCopy = [... numbers]
console.log (numbersCopy) // [1, 2, 3]
const otherNumbers = [4, 5, 6]
const numbersConcatenated = [... numbers, ... otherNumbers]
console.log (numbersConcatenato) // [1, 2, 3, 4, 5, 6]

Attenzione: l'operatore di diffusione esegue una copia superficiale dell'array originale. Ma cosa significa superficiale?

Bene, una copia superficiale duplicherà il meno possibile gli elementi originali. Pertanto, quando si dispone di un array contenente numeri, stringhe o valori booleani (tipi primitivi), non vi è alcun problema, i valori vengono realmente duplicati. Tuttavia, questo non è lo stesso per oggetti o matrici. Verrà copiato solo il riferimento al valore originale! Pertanto, se si esegue una copia superficiale di un array contenente un oggetto e si modifica l'oggetto nell'array copiato, anche l'oggetto verrà modificato nell'array originale poiché hanno lo stesso riferimento.

const arr = ['foo', 42, {nome: 'Thomas'}]
let copy = [... arr]
copy [0] = 'bar'
console.log (arr) // Nessuna mutazione: ["foo", 42, {name: "Thomas"}]
console.log (copia) // ["bar", 42, {name: "Thomas"}]
copy [2] .name = 'Ciao'
console.log (arr) // /! \ MUTATION ["foo", 42, {name: "Hello"}]
console.log (copia) // ["bar", 42, {name: "Hello"}]

Pertanto, se si desidera creare una copia "reale" di un array che contiene oggetti o array, è possibile utilizzare una funzione lodash come cloneDeep. Ma non pensare di dover fare una cosa del genere. L'obiettivo qui è essere consapevoli di come funzionano le cose sotto il cofano.

Buono a sapersi

Di seguito troverai altri metodi che è utile conoscere e che possono aiutarti con alcuni problemi, come la ricerca di un elemento in un array, il prelievo di una porzione di array e altro ancora.

include (ES2016)

Hai mai usato indexOf per sapere se qualcosa è in un array o no? Modo orribile per farlo bene? Fortunatamente per noi, include lo fa per noi. Dai un parametro a include e cercherà nell'array se l'elemento esiste.

const sports = ['football', 'archery', 'judo']
const hasFootball = sports.includes ('football')
console.log (hasFootball) // true

concat

Il metodo concat può essere utilizzato per unire due o più matrici.

numeri const = [1, 2, 3]
const otherNumbers = [4, 5, 6]
const numbersConcatenated = numbers.concat (otherNumbers)
console.log (numbersConcatenato) // [1, 2, 3, 4, 5, 6]
// Puoi unire tutti gli array che desideri
funzione concatAll (arr, ... array) {
  return arr.concat (... array)
}
console.log (concatAll ([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12])) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

per ciascuno

Ogni volta che vuoi eseguire qualcosa per ogni elemento dell'array, ti consigliamo di utilizzare per ogni. Prende una funzione come parametro che si assume tre parametri: il valore corrente, l'indice e l'array:

numeri const = = 1, 2, 3, 4, 5]
numbers.forEach (console.log)
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

indice di

Viene utilizzato per restituire il primo indice in cui è possibile trovare un determinato elemento nell'array. indexOf è stato anche ampiamente utilizzato per verificare se un elemento si trova in un array o no. Ad essere sincero, non lo uso tanto oggi.

const sports = ['football', 'archery', 'judo']
const judoIndex = sports.indexOf ('judo')
console.log (judoIndex) // 2

trova

Il metodo find è abbastanza simile al metodo filter. È necessario fornire una funzione che testa l'elemento di ciascun array. Tuttavia, trova interrompe il test degli elementi non appena ne trova uno che supera il test. Senza Filtro. il filtro eseguirà l'iterazione sull'intero array, indipendentemente da cosa.

const users = [
  {id: 'af35', nome: 'john'},
  {id: '6gbe', nome: 'mary'},
  {id: '932j', nome: 'gary'},
]
const user = users.find (user => user.id === '6gbe')
console.log (utente) // {id: '6gbe', nome: 'mary'}

Quindi usa il filtro quando vuoi ... ben filtrare l'intero array. Usa trova quando sei sicuro di cercare un elemento unico nel tuo array.

FindIndex

È esattamente lo stesso del metodo find tranne per il fatto che restituisce direttamente l'indice del primo elemento trovato anziché l'elemento.

const users = [
  {id: 'af35', nome: 'john'},
  {id: '6gbe', nome: 'mary'},
  {id: '932j', nome: 'gary'},
]
const user = users.findIndex (user => user.id === '6gbe')
console.log (utente) // 1

Potresti pensare che findIndex sia uguale a indexOf. Beh ... non esattamente. Il primo parametro di indexOf è un valore primitivo (booleano, numero, stringa, null, non definito o un simbolo) mentre il primo parametro di findIndex è una funzione di callback.

Pertanto, quando è necessario cercare l'indice di un elemento in una matrice di valori primitivi, è possibile utilizzare indexOf. Se hai elementi più complessi come oggetti, usa findIndex.

fetta

Ogni volta che devi prendere una porzione di un array o copiare un array, puoi usare slice. Ma fai attenzione, proprio come l'operatore di diffusione, slice restituisce una copia superficiale di quella porzione!

numeri const = = 1, 2, 3, 4, 5]
const copy = numbers.slice ()

Ho detto all'inizio di un articolo che per i loop erano spesso inutili. Lascia che ti faccia un esempio di come puoi liberartene.

Supponiamo che tu voglia recuperare una certa quantità di messaggi di chat da un'API e desideri visualizzarne solo cinque. Di seguito troverai due approcci: uno con un ciclo for l'altro l'altro con slice.

// Il "modo tradizionale" per farlo:
// Determina il numero di messaggi da prendere e usa un ciclo for
const nbMessages = messages.length <5? message.length: 5
lascia messaggiToShow = []
for (let i = 0; i 
// Anche se "arr" ha meno di 5 elementi,
// slice restituirà un'intera copia superficiale dell'array originale
const messageToShow = messages.slice (0, 5)

alcuni

Se si desidera verificare che almeno un elemento di un array superi un test, è possibile utilizzarne alcuni. Proprio come map, filter o find, alcuni accettano una funzione di callback come unico parametro. Restituisce vero se almeno un elemento supera il test, falso altrimenti.

Puoi usarne alcuni quando hai a che fare con le autorizzazioni, ad esempio:

const users = [
  {
    id: 'fe34',
    autorizzazioni: ['read', 'write'],
  },
  {
    id: 'a198',
    autorizzazioni: [],
  },
  {
    id: '18aa',
    autorizzazioni: ['elimina', 'leggi', 'scrivi'],
  }
]
const hasDeletePermission = users.some (user =>
  user.permissions.includes ( 'delete')
)
console.log (hasDeletePermission) // true

ogni

Simile ad alcuni tranne per il fatto che ogni verifica se tutti gli elementi superano la condizione (anziché almeno una).

const users = [
  {
    id: 'fe34',
    autorizzazioni: ['read', 'write'],
  },
  {
    id: 'a198',
    autorizzazioni: [],
  },
  {
    id: '18aa',
    autorizzazioni: ['elimina', 'leggi', 'scrivi'],
  }
]
const hasAllReadPermission = users.every (user =>
  user.permissions.includes ( 'leggere')
)
console.log (hasAllReadPermission) // false

piatto (ES2019)

Questi sono i nuovi metodi che stanno arrivando nel mondo JavaScript. Fondamentalmente, flat crea un nuovo array concatenando in esso tutti gli elementi del sub-array. Accetta un parametro, un numero, che rappresenta la profondità con cui vuoi appiattire l'array:

numeri const = [1, 2, [3, 4, [5, [6, 7]], [[[[8]]]]]]
const numbersflattenOnce = numbers.flat ()
console.log (numbersflattenOnce) // [1, 2, 3, 4, Array [2], Array [1]]
// Nota: Array [2] significa che è un array bidimensionale
const numbersflattenTwice = numbers.flat (2)
console.log (numbersflattenTwice) // [1, 2, 3, 4, 5, Array [2], Array [1]]
const numbersFlattenInfinity = numbers.flat (Infinito)
console.log (numbersFlattenInfinity) // [1, 2, 3, 4, 5, 6, 7, 8]

flatMap (ES2019)

Riesci a indovinare cosa fa questo metodo? Scommetto che puoi solo con il nome.

Innanzitutto esegue una funzione di mappatura su ciascun elemento. Quindi appiattisce l'array una volta. Vai tranquillo!

const frasi = [
  'Questa è una frase',
  'Questa è un'altra frase',
  "Non trovo alcuna frase originale",
]
const allWords = frasi.flatMap (frase => frase.split (''))
console.log (allWords) // ["Questo", "è", "a", "frase", "Questo", "è", "un altro", "frase", "I", "impossibile" , "trova", "qualsiasi", "originale", "frasi"]

In questo esempio, hai molte frasi in un array e vuoi ottenere tutte le parole. Invece di usare map per dividere tutte le frasi in parole e quindi appiattire l'array, puoi usare direttamente flatMap.

Niente a che vedere con flatMap, ma puoi contare il numero di parole con la funzione di riduzione (solo per mostrarti un altro caso d'uso di riduzione ).

const wordsCount = allWords.reduce ((count, word) => {
  count [word] = count [word]? conta [parola] + 1: 1
  conteggio dei resi
}, {})
console.log (wordsCount) // {Questo: 2, è: 2, a: 1, frase: 2, un altro: 1, I: 1, "impossibile": 1, trova: 1, qualsiasi: 1, originale : 1, frasi: 1,}

flatMap viene spesso utilizzato anche nella programmazione reattiva, qui puoi vedere un esempio.

aderire

Se devi creare una stringa in base agli elementi dell'array, stai cercando un join. Permette di creare una nuova stringa concatenando tutti gli elementi dell'array, separati da un separatore fornito.

Ad esempio, puoi visualizzare a colpo d'occhio tutti i partecipanti di un'attività usando join:

const partecipanti = ['john', 'mary', 'gary']
const partecipantiFormatted = partecipanti.join (',')
console.log (partecipantiFormatted) // john, mary, gary

Ecco un esempio più reale in cui potresti voler filtrare i partecipanti prima e ottenere il loro nome:

const potenzialeParticipants = [
  {id: 'k38i', nome: 'john', età: 17},
  {id: 'baf3', nome: 'mary', età: 13},
  {id: 'a111', nome: 'gary', età: 24},
  {id: 'fx34', nome: 'emma', età: 34},
]
const partecipantiFormatted = potenzialePartecipanti
  .filter (user => user.age> 18)
  .map (user => user.name)
  .aderire(', ')
console.log (partecipantiFormatted) // gary, emma

a partire dal

Questo è un metodo statico che crea un nuovo array da un oggetto simile a array o iterabile come una stringa, ad esempio. Può essere utile quando lavori con la dom.

const nodes = document.querySelectorAll ('. todo-item') // questa è un'istanza di NodeList, non puoi usare i metodi array con essa
const todoItems = Array.from (nodes) // ora puoi usare map, filter, ecc. mentre lavori con un array!

Hai visto che abbiamo usato Array anziché un'istanza di array? Ecco perché da viene chiamato un metodo statico.

Quindi puoi divertirti con questi nodi e ad esempio registrando un listener di eventi su ciascuno di essi con forEach:

todoItems.forEach (item => {
  item.addEventListener ('click', function () {
    avviso (`Hai fatto clic su $ {item.innerHTML}`)
  })
})

IsArray

Mentre ci siamo, parliamo di un altro metodo statico di array che è Array. Senza sorprese, ti dice se il valore passato è un array o no.

Sulla base dell'esempio precedente, questo è ciò che otteniamo:

const nodes = document.querySelectorAll ('. todo-item')
console.log (Array.isArray (nodes)) // false
const todoItems = Array.from (nodi)
console.log (Array.isArray (todoItems)) // true

Buono a sapersi ma mutante

Di seguito troverai altri metodi di array comuni. La differenza è che modificano l'array originale. Non c'è niente di sbagliato nel mutare un array ma è bene averlo in mente!

Per tutti questi metodi, se non si desidera mutare l'array originale, basta fare una copia superficiale o una copia profonda in anticipo:

const arr = [1, 2, 3, 4, 5]
const copy = [... arr] // o arr.slice ()

ordinare

Sì, l'ordinamento modifica l'array originale. In effetti, ordina gli elementi di un array in atto. Il metodo di ordinamento predefinito trasforma tutti gli elementi in stringhe e li ordina in ordine alfabetico:

const names = ['john', 'mary', 'gary', 'anna']
names.sort ()
console.log (names) // ['anna', 'gary', 'john', 'mary']

Quindi fai attenzione se provieni da uno sfondo Python, ad esempio, fare l'ordinamento su un array di numeri non ti darà quello che ti aspettavi:

numeri const = = 23, 12, 17, 187, 3, 90]
numbers.sort ()
console.log (numeri) // [12, 17, 187, 23, 3, 90] 

Quindi, come ordinare l'array? Bene, l'ordinamento accetta una funzione, una funzione di confronto. Questa funzione accetta due parametri: il primo elemento (chiamiamolo a) e il secondo elemento per il confronto (b). Il confronto tra questi due elementi deve restituire un numero:

  • Se è negativo, a viene ordinato prima di b
  • Se è positivo, b viene ordinato prima di a
  • Nessuna modifica se è 0.

Quindi puoi ordinare i numeri in questo modo:

numeri const = = 23, 12, 17, 187, 3, 90]
numbers.sort ((a, b) => a - b)
console.log (numeri) // [3, 12, 17, 23, 90, 187]

Oppure puoi ordinare le date in base al più recente:

const posts = [
  {
    titolo: "Crea un bot Discord in meno di 15 minuti",
    data: nuova data (2018, 11, 26),
  },
  {
    titolo: "Come migliorare nella scrittura di CSS",
    data: nuova data (2018, 06, 17)},
  {
    titolo: "matrici JavaScript",
    data: nuova data ()
  },
]
posts.sort ((a, b) => a.date - b.date) // La sottrazione di due date restituisce la differenza in millisecondi tra di loro
console.log (messaggi)
// [{title: 'Come migliorare la scrittura di CSS',
// data: 2018-07-17T00: 00: 00.000Z},
// {title: "Crea un bot Discord in meno di 15 minuti",
// data: 2018-12-26T00: 00: 00.000Z},
// {title: "Impara Javascript mette le matrici in modo funzionale",
// data: 2019-03-16T10: 31: 00.208Z}]

riempire

fill modifica o riempie tutti gli elementi di un array da un indice iniziale a un indice finale con un valore statico. Un ottimo uso del riempimento è quello di riempire un nuovo array con valori statici.

// Normalmente avrei chiamato una funzione che genera ID e nomi casuali ma non ci preoccupiamo di questo qui.
funzione fakeUser () {
  ritorno {
    id: 'fe38',
    nome: "Thomas",
  }
}
const posts = Array (3) .fill (fakeUser ())
console.log (posts) // [{id: "fe38", nome: "thomas"}, {id: "fe38", nome: "thomas"}, {id: "fe38", nome: "thomas"} ]

inverso

Penso che il nome del metodo sia abbastanza chiaro qui.

numeri const = = 1, 2, 3, 4, 5]
numbers.reverse ()
console.log (numeri) // [5, 4, 3, 2, 1]

pop

Quello rimuove l'ultimo elemento da un array e lo restituisce.

const message = ['Ciao', 'Ehi', 'Come stai?', "Sto bene"]
const lastMessage = messages.pop ()
console.log (messaggi) // ['Ciao', 'Ehi', 'Come stai?']
console.log (lastMessage) // Sto bene

Metodi che puoi sostituire

Infine, in quest'ultima sezione, troverai metodi che mutano l'array originale e che possono essere facilmente sostituiti con qualcos'altro. Non sto dicendo che dovresti abbandonare questi metodi. Voglio solo che tu realizzi che alcuni metodi di array hanno effetti collaterali e che ci sono alternative per quello

spingere

Questo è un metodo ampiamente usato quando si lavora con array. Infatti push consente di aggiungere uno o più elementi a un array. Di solito viene anche utilizzato per creare un nuovo array basato su uno vecchio.

const todoItems = [1, 2, 3, 4, 5]
const itemsIncremented = []
for (let i = 0; i 
console.log (itemsIncremented) // [2, 3, 4, 5, 6]
const todos = ['Scrivi un articolo', 'Correzione di bozze']
todos.push ('Pubblica l'articolo')
console.log (todos) // ['Scrivi un articolo', 'Correzione di bozze', 'Pubblica l'articolo']

Se hai bisogno di costruire un array basato su un altro proprio come itemsIncremented, è probabile che ci sia un metodo creato per esso come i nostri buoni amici mappano, filtrano o riducono. In effetti possiamo usare map per fare lo stesso:

const itemsIncremented = todoItems.map (x => x + 1)

E se vuoi usare push quando devi aggiungere un nuovo elemento, l'operatore di spread ti offre le spalle:

const todos = ['Scrivi un articolo', 'Correzione bozze'] console.log ([... todos, 'Pubblica l'articolo'])

giuntura

splice è spesso usato come un modo per rimuovere un elemento in un determinato indice. Puoi effettivamente fare lo stesso con filter:

const months = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio']
// Con giunzione
months.splice (2, 1) // rimuove un elemento all'indice 2
console.log (mesi) // ['Gennaio', 'Febbraio', 'Aprile', 'Maggio']
// Senza giunzione
const monthsFiltered = months.filter ((month, i) => i! == 3)
console.log (monthsFiltered) // ['Gennaio', 'Febbraio', 'Aprile', 'Maggio']

E ora potresti pensare, sì, ma se devo rimuovere molti elementi? Bene, usa slice:

const months = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio']
// Con giunzione
months.splice (1, 3) // rimuove tre elementi a partire dall'indice 1
console.log (mesi) // ['Gennaio', 'Maggio']
// Senza giunzione
const monthsSliced ​​= [... months.slice (0, 1), ... months.slice (4)]
console.log (monthsSliced) // ['Gennaio', 'Maggio']

cambio

shift rimuove il primo elemento di un array e lo restituisce. Per farlo in modo funzionale, puoi usare spread / rest:

numeri const = = 1, 2, 3, 4, 5]
// Con turno
const firstNumber = numbers.shift ()
console.log (firstNumber) // 1
console.log (numeri) // [2, 3, 4, 5]
// Senza turno
const [firstNumber, ... numbersWithoutOne] = numeri
console.log (firstNumber) // 1
console.log (numbersWithoutOne) // [2, 3, 4, 5]

unshift

Unshift consente di aggiungere uno o più elementi all'inizio di un array. Bene, proprio come il turno, puoi usare l'operatore spread per fare una cosa del genere:

numeri const = [3, 4, 5]
// Con unshift
numbers.unshift (1, 2)
console.log (numeri) // [1, 2, 3, 4, 5]
// Senza spostamento
const newNumbers = [1, 2, ... numeri]
console.log (newNumbers) // [1, 2, 3, 4, 5]

TL; DR

  • Ogni volta che devi eseguire operazioni su un array, non andare con un for-loop e non reinventare la ruota, probabilmente c'è un metodo là fuori che fa quello che vuoi fare.
  • Il più delle volte utilizzerai mappa, filtro, riduzione e operatore di diffusione. Sono strumenti essenziali per ogni sviluppatore.
  • Esistono molti metodi di array che è fantastico conoscere come slice, alcuni, flatMap, ecc. Riconoscili e usali quando è appropriato!
  • Gli effetti collaterali possono portare a cambiamenti indesiderati. Sii consapevole di quali metodi mutano l'array originale.
  • slice e l'operatore spread eseguono copie poco profonde. Pertanto, oggetti e matrici secondarie condivideranno lo stesso riferimento. Stai attento anche a quello.
  • I "vecchi" metodi di muting array possono essere sostituiti con nuovi. Sta a te decidere cosa farne.

Ora sai cosa devi sapere sugli array JavaScript. Se ti è piaciuto questo articolo, premi il pulsante clap (fino a 50 volte se vuoi ) e condividilo. Oh, e non esitate a dirmi cosa ne pensate nei commenti!