O que você precisa saber sobre matrizes JavaScript

Apresentamos a você a tradução de um artigo de Thomas Lombart, publicado em medium.freecodecamp.org. A tradução é publicada com permissão do autor.


Um exemplo de uso do método de redução para reduzir uma matriz

Deixe-me fazer uma declaração ousada: os loops geralmente são inúteis e dificultam a leitura do código. Para iterações em matrizes, pesquisa, classificação de elementos e outras ações semelhantes, você pode usar um dos métodos abaixo.

Apesar da eficácia, a maioria desses métodos ainda é pouco conhecida e pouco popular. Farei o trabalho duro por você e falarei sobre os mais úteis. Leia este artigo como seu guia para métodos de matriz JavaScript.

Nota : Antes de começarmos, você precisa saber uma coisa: sou inclinado para a programação funcional. Para evitar efeitos colaterais, eu me esforço para aplicar métodos que não modificam diretamente a matriz original. Não estou dizendo para você se recusar a alterar a matriz, mas vale a pena considerar que alguns métodos levam a isso. Como resultado, efeitos colaterais, alterações indesejadas e, como resultado, erros aparecem.

Este artigo foi publicado originalmente em thomlom.dev , onde você pode encontrar mais material de desenvolvimento da Web.

O básico

Existem quatro métodos que vale a pena saber se você estiver trabalhando com matrizes. Estes são map , filter , reduce e o operador de spread . Eles são eficazes e úteis.

mapa
Você costuma usar o método de map . Em geral, sempre que precisar alterar os elementos de uma matriz, considere esta opção.

É necessário um parâmetro - uma função que é chamada em cada elemento da matriz e, em seguida, retorna uma nova matriz para que não haja efeitos colaterais.

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

Você também pode criar uma nova matriz que armazena apenas uma propriedade específica do objeto.

 const allActivities = [ { title: 'My activity', coordinates: [50.123, 3.291] }, { title: 'Another activity', coordinates: [1.238, 4.292] } ] const allCoordinates = allActivities.map(activity => activity.coordinates) console.log(allCoordinates) // [[50.123, 3.291], [1.238, 4.292]] 

Portanto, lembre-se: quando precisar alterar uma matriz, pense em usar o mapa .

filtrar
O nome desse método fala por si: use-o quando desejar filtrar uma matriz.

Como o map , o filter usa como único parâmetro uma função que é chamada em cada elemento da matriz. Esta função deve retornar um valor booleano:

• true - se você deseja salvar o elemento em uma matriz;
• false - se você não quiser salvá-lo.

Como resultado, você terá a nova matriz correta com os elementos que deseja deixar.

Por exemplo, apenas números ímpares podem ser armazenados em uma matriz.

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

Você também pode usar o filtro para remover um elemento específico da matriz.

 const participants = [ { id: 'a3f47', username: 'john' }, { id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }, ] function removeParticipant(participants, id) { return participants.filter(participant => participant.id !== id) } console.log(removeParticipant(participants, 'a3f47')) // [{ id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }]; 

reduzir
Na minha opinião, esse método é o mais difícil de entender. Mas assim que dominá-lo, você terá várias oportunidades.

Normalmente, o método de reduce pega uma matriz de valores e concatena-os em um único valor. São necessários dois parâmetros, uma função de retorno de chamada (que é o redutor ) e um valor inicial opcional (que é o primeiro elemento da matriz por padrão). A caixa de engrenagens possui quatro parâmetros:

• uma bateria que coleta os valores retornados na caixa de velocidades ;
• valor atual da matriz;
• índice atual;
• a matriz para a qual o método de reduce foi chamado.

Basicamente, você usará apenas os dois primeiros parâmetros - a bateria e o valor atual.

Mas não vamos aprofundar a teoria e considerar o exemplo mais comum de aplicação de reduce .

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

Na primeira iteração, o acumulador, que é a soma, assume o valor inicial 37. O valor retornado é 37 + n, onde n = 12. Obtemos 49.

Durante a segunda iteração, o acumulador é 49, o valor retornado é 49 + 28 = 77. E assim por diante.

O método de reduce é tão funcional que você pode usá-lo para criar muitos métodos de matriz, como map ou filter .

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

Como regra, atribuímos o valor inicial [] ao método de reduce - o acumulador. Para o map executamos uma função cujo resultado é adicionado ao final da bateria usando o operador spread (falaremos sobre isso abaixo, não se preocupe). Para o filter fazendo quase a mesma coisa, apenas executamos a função de filtro no elemento. Se for verdade, retornamos a matriz anterior . Caso contrário, adicione o elemento ao final da matriz.

Vejamos um exemplo mais complexo: reduza muito o array [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] para [1, 2, 3, 4, 5, 6, 7, 8] .

 function 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] 

Este exemplo é muito semelhante ao map , exceto pelo fato de usarmos recursão aqui. Não vou me deter na recursão em detalhes, porque isso está além do escopo de nosso tópico, mas se você quiser saber mais, acesse este excelente recurso .

Declaração de spread (ES2015)
Eu concordo, este não é um método. No entanto, o operador de spread ajuda a atingir objetivos diferentes ao trabalhar com matrizes. Você pode aplicá-lo para expandir os valores de uma matriz em outra e, em seguida, fazer uma cópia ou vincular várias matrizes.

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

Nota : a declaração de spread faz uma cópia superficial da matriz original. Mas o que significa "superficial"?

Essa cópia duplicará os elementos originais o mínimo possível. Se você tiver uma matriz com números, seqüências de caracteres ou valores booleanos ( tipos primitivos ), não haverá problemas e os valores serão realmente duplicados. No entanto, as coisas são diferentes com objetos e matrizes : apenas uma referência ao valor original é copiada. Portanto, se você fizer uma cópia superficial da matriz, incluindo o objeto e alterar o objeto na matriz copiada, ela também será alterada no original, porque eles têm a mesma referência .

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

Portanto, se você quiser criar uma cópia real de uma matriz que contenha um objeto ou matrizes, poderá usar uma função lodash como cloneDeep . Mas não se considere obrigado a fazer isso. Seu objetivo é descobrir como tudo funciona sob o capô .

Métodos úteis

Abaixo, você encontrará outros métodos que também são úteis e que podem ser úteis para solucionar problemas, como encontrar um elemento em uma matriz, remover parte de uma matriz e muito mais.

inclui (ES2015)
Você já usou o indexOf para descobrir se há um elemento em uma matriz ou não? Uma maneira terrível de verificar, certo?

Felizmente, o método includes faz a validação para nós. Defina o parâmetro para includes e ele procurará o elemento na matriz.

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

concat
O método concat pode ser usado para mesclar duas ou mais matrizes.

 const numbers = [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = numbers.concat(otherNumbers) console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6] // You can merge as many arrays as you want function concatAll(arr, ...arrays) { return arr.concat(...arrays) } 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] 

forEach
Se você deseja executar uma ação para cada elemento da matriz, pode usar o método forEach . Ele assume uma função como parâmetro, que por sua vez também aceita três parâmetros: valor atual, índice e matriz.

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

indexOf
Este método é usado para retornar o primeiro índice no qual o elemento pode ser encontrado na matriz. Além disso, o indexOf frequentemente verifica a presença de um elemento em uma matriz. Honestamente, agora eu o uso com pouca frequência.

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

encontrar
O método find é semelhante ao filter . Você precisa fornecê-lo com uma função que testa cada elemento da matriz. No entanto, o find para de testar os itens assim que encontrar um que passou no teste. Este não é um filter que itera por toda a matriz, independentemente das circunstâncias.

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

Portanto, use o método filter quando desejar filtrar toda a matriz e o método find quando tiver certeza de que está procurando um elemento exclusivo na matriz.
findIndex
Este método é quase o mesmo que find , mas retorna o índice do primeiro elemento encontrado em vez do próprio elemento.

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

Você pode pensar que findIndex e indexOf são a mesma coisa. Na verdade não. O primeiro parâmetro de indexOf é um valor primitivo (um valor booleano, número, sequência, valor indefinido ou caractere), enquanto o primeiro parâmetro, findIndex é uma função de retorno de chamada.

Portanto, quando você precisar encontrar o índice de um elemento em uma matriz de valores primitivos, poderá trabalhar com indexOf . Se você tiver elementos mais complexos, como objetos, use findIndex .

fatia
Quando você precisar participar de uma matriz ou copiar uma matriz, pode consultar o método de slice . Mas tenha cuidado: como o operador de propagação, a slice retorna uma cópia superficial .

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

No começo do artigo, mencionei que os loops geralmente são inúteis. Deixe-me mostrar como se livrar deles.

Suponha que você deseje retornar um certo número de mensagens de bate-papo da API e você só precisará ver cinco delas. Abaixo estão duas abordagens: uma com loops e outra com o método de slice .

 // The "traditional way" to do it: // Determine the number of messages to take and use a for loop const nbMessages = messages.length < 5 ? messages.length : 5 let messagesToShow = [] for (let i = 0; i < nbMessages; i++) { messagesToShow.push(posts[i]) } // Even if "arr" has less than 5 elements, // slice will return an entire shallow copy of the original array const messagesToShow = messages.slice(0, 5) 

alguns
Se você deseja verificar se pelo menos um elemento da matriz passa no teste, você pode usar some . Como map , filter ou find , o método some recebe uma função de retorno de chamada como o único parâmetro e retorna true se pelo menos um elemento passa na verificação e false se não.

some também são adequados para trabalhar com permissões.

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

todo
Este método é semelhante a some , exceto pelo fato de verificar se cada elemento (e não um ) corresponde à condição.

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

plano (ES2019)
Estes são métodos completamente novos no mundo do JavaScript. Normalmente, flat cria uma nova matriz, conectando todos os elementos de uma matriz aninhada. É preciso um parâmetro - um número que indica quanto você deseja reduzir a dimensão da matriz.

 const numbers = [1, 2, [3, 4, [5, [6, 7]], [[[[8]]]]]] const numbersflattenOnce = numbers.flat() console.log(numbersflattenOnce) // [1, 2, 3, 4, Array[2], Array[1]] const numbersflattenTwice = numbers.flat(2) console.log(numbersflattenTwice) // [1, 2, 3, 4, 5, Array[2], Array[1]] const numbersFlattenInfinity = numbers.flat(Infinity) console.log(numbersFlattenInfinity) // [1, 2, 3, 4, 5, 6, 7, 8] 

flatMap (ES2019)
Adivinha o que esse método faz? Aposto que você entenderá um nome.

Primeiro, ele executa a função de mapeamento para cada elemento e reduz a matriz de cada vez. Simples assim!

 const sentences = [ 'This is a sentence', 'This is another sentence', "I can't find any original phrases", ] const allWords = sentences.flatMap(sentence => sentence.split(' ')) console.log(allWords) // ["This", "is", "a", "sentence", "This", "is", "another", "sentence", "I", "can't", "find", "any", "original", "phrases"] 

Neste exemplo, você tem muitas frases na matriz e deseja obter todas as palavras. Em vez de usar o método de map e dividir todas as frases em palavras e encurtar a matriz, você pode usar o flatMap .

Depois, você pode contar o número de palavras com a função reduce (isso não se aplica ao flatMap , só quero lhe mostrar outro exemplo usando o método reduce ).

 const wordsCount = allWords.reduce((count, word) => { count[word] = count[word] ? count[word] + 1 : 1 return count }, {}) console.log(wordsCount) // { This: 2, is: 2, a: 1, sentence: 2, another: 1, I: 1, "can't": 1, find: 1, any: 1, original: 1, phrases: 1, } 

O método flatMap também flatMap frequentemente usado em programação reativa. Você pode ver um exemplo aqui .

juntar
Se você precisar criar uma string com base nos elementos da matriz, o método join será o que você precisa. Permite criar uma nova linha conectando todos os elementos da matriz, separados pelo separador fornecido.

Por exemplo, usando a join você pode exibir visualmente todos os participantes de uma atividade.

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

E este é um exemplo mais realista, onde você pode primeiro filtrar os participantes e obter seus nomes.

 const potentialParticipants = [ { id: 'k38i', name: 'john', age: 17 }, { id: 'baf3', name: 'mary', age: 13 }, { id: 'a111', name: 'gary', age: 24 }, { id: 'fx34', name: 'emma', age: 34 }, ] const participantsFormatted = potentialParticipants .filter(user => user.age > 18) .map(user => user.name) .join(', ') console.log(participantsFormatted) // gary, emma 

de
Este é um método estático que cria uma nova matriz a partir de um objeto iterável ou semelhante a uma matriz, como uma string. Pode ser útil quando você trabalha com o modelo de objeto do documento.

 const nodes = document.querySelectorAll('.todo-item') // this is an instance of NodeList const todoItems = Array.from(nodes) // now, you can use map, filter, etc. as you're workin with an array! 

Você viu que usamos um tipo de matriz em vez de uma instância de matriz? É por isso que esse método é chamado estático.

Então você pode se divertir com os nós, por exemplo, registrando ouvintes de eventos para cada um deles usando o método forEach .

 todoItems.forEach(item => { item.addEventListener('click', function() { alert(`You clicked on ${item.innerHTML}`) }) }) 

Modificação de matriz que vale a pena conhecer

A seguir estão outros métodos padrão. A diferença deles é que eles modificam a matriz original. Não há nada errado com a alteração, mas você deve considerar isso ao trabalhar.

Se você não deseja modificar a matriz original enquanto trabalha com esses métodos, faça uma cópia de superfície ou completa com antecedência.

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

ordenar
Sim, a sort modifica a matriz original. De fato, ele classifica os elementos da matriz no lugar. O método de classificação padrão transforma todos os elementos em seqüências de caracteres e os classifica em ordem alfabética.

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

Cuidado: se você, por exemplo, mudou da linguagem Python, o método de sort ao trabalhar com uma matriz de números não fornecerá o resultado desejado.

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

Como então classificar uma matriz? O método de sort assume uma função - uma função de comparação . São necessários dois parâmetros: o primeiro elemento ( ) e o segundo elemento para comparação ( b ). Uma comparação entre esses dois elementos requer que um dígito seja retornado:

• se o valor for negativo - a classificado antes de b ;
• se o valor for positivo, b classificado antes de a ;
• se o valor for 0, nenhuma alteração.

Então você pode classificar os números.

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

Ou você pode classificar as datas das mais recentes.

 const posts = [ { title: 'Create a Discord bot under 15 minutes', date: new Date(2018, 11, 26), }, { title: 'How to get better at writing CSS', date: new Date(2018, 06, 17) }, { title: 'JavaScript arrays', date: new Date() }, ] posts.sort((a, b) => a.date - b.date) // Substracting two dates returns the difference in millisecond between them console.log(posts) // [ { title: 'How to get better at writing CSS', // date: 2018-07-17T00:00:00.000Z }, // { title: 'Create a Discord bot under 15 minutes', // date: 2018-12-26T00:00:00.000Z }, // { title: 'Learn Javascript arrays the functional way', // date: 2019-03-16T10:31:00.208Z } ] 

preencher
O método de fill modifica ou preenche todos os elementos da matriz do índice inicial até o final com o valor especificado. Um exemplo do excelente uso do fill é preencher uma nova matriz com dados iniciais.

 // Normally I would have called a function that generates ids and random names but let's not bother with that here. function fakeUser() { return { id: 'fe38', name: 'thomas', } } const posts = Array(3).fill(fakeUser()) console.log(posts) // [{ id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }] 

inverter
Parece-me que o nome do método explica completamente sua essência.

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

pop
Este método remove o último elemento da matriz e o retorna.

 const messages = ['Hello', 'Hey', 'How are you?', "I'm fine"] const lastMessage = messages.pop() console.log(messages) // ['Hello', 'Hey', 'How are you?'] console.log(lastMessage) // I'm fine 

Métodos que podem ser substituídos

Na última seção, você encontrará métodos que modificam a matriz original e são fáceis de encontrar uma alternativa. Não estou dizendo que eles precisam ser descontados, apenas quero transmitir a você que alguns métodos têm efeitos colaterais e podem ser substituídos.

empurrar
Este método é usado com freqüência. Ele permite adicionar um ou mais elementos à matriz e criar uma nova matriz com base na matriz anterior.

 const todoItems = [1, 2, 3, 4, 5] const itemsIncremented = [] for (let i = 0; i < items.length; i++) { itemsIncremented.push(items[i] + 1) } console.log(itemsIncremented) // [2, 3, 4, 5, 6] const todos = ['Write an article', 'Proofreading'] todos.push('Publish the article') console.log(todos) // ['Write an article', 'Proofreading', 'Publish the article'] 

Se você precisar criar uma matriz com base em outra, como no método itemsIncremented , existem map , filter ou itemsIncremented adequados que já nos são familiares. Por exemplo, podemos pegar um map para fazer isso.

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

E se você deseja usar push quando precisar adicionar um novo elemento, o operador de propagação é útil.

 const todos = ['Write an article', 'Proofreading'] console.log([...todos, 'Publish the article']) 

emenda
splice frequentemente acessada para limpar um elemento em um índice específico. Você pode fazer o mesmo com o método de filter .

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(2, 1) // remove one element at index 2 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = months.filter((month, i) => i !== 3) console.log(monthsFiltered) // ['January', 'February', 'April', 'May'] 

Você pode perguntar: e se eu precisar remover muitos elementos? Então use slice .

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(1, 3) // remove thirds element starting at index 1 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = [...months.slice(0, 1), ...months.slice(4)] console.log(monthsFiltered) // ['January', 'February', 'April', 'May'] 

mudança
O método shift remove o primeiro elemento da matriz e o retorna. Para fazer isso no estilo de programação funcional, você pode usar a instrução spread ou rest.

 const numbers = [1, 2, 3, 4, 5] // With shift const firstNumber = numbers.shift() console.log(firstNumber) // 1 console.log(numbers) // [2, 3, 4, 5] // Without shift const [firstNumber, ...numbersWithoutOne] = numbers console.log(firstNumber) // 1 console.log(numbersWithoutOne) // [2, 3, 4, 5] 

deslocar
O método unshift permite adicionar um ou mais elementos ao início de uma matriz. Como no shift , você pode fazer isso com o operador de spread.

 const numbers = [3, 4, 5] // With unshift numbers.unshift(1, 2) console.log(numbers) // [1, 2, 3, 4, 5] // Without unshift const newNumbers = [1, 2, ...numbers] console.log(newNumbers) // [1, 2, 3, 4, 5] 

TL; DR

• Quando você deseja executar algumas operações com uma matriz, não use o loop for e não reinvente a roda, porque provavelmente existe um método acima que pode fazer o que você precisa.
• Na maioria das vezes, você usará o map , filter , reduce métodos e o operador de propagação - essas são ferramentas importantes para qualquer desenvolvedor.
• Também existem muitos métodos de matriz que seria bom saber: slice , some , flatMap , etc. Conheça-os e aplique-os, se necessário.
• Os efeitos colaterais podem levar a alterações indesejadas. Lembre-se de que alguns métodos modificam sua matriz original.
• O método de slice e o operador de propagação fazem cópias rasas. Como resultado, objetos e sub-matrizes terão os mesmos links - isso também vale a pena ter em mente.
• Métodos antigos que modificam a matriz podem ser substituídos por novos. Você decide o que fazer.

Agora você sabe tudo o que deve saber sobre matrizes JavaScript. Se você gostou deste artigo , clique no botão "Pat" (até 50 vezes, se quiser :-)) e compartilhe-o. E fique à vontade para compartilhar suas impressões nos comentários!