Inserção de matriz de JavaScript - como adicionar a uma matriz com as funções Push, Unshift e Concat

Arrays JavaScript são facilmente um dos meus tipos de dados favoritos. Eles são dinâmicos, fáceis de usar e oferecem uma série de métodos integrados que podemos aproveitar.

No entanto, quanto mais opções você tiver, mais confuso poderá ser decidir qual usar.

Neste artigo, gostaria de discutir algumas maneiras comuns de adicionar um elemento a uma matriz JavaScript.

O Método Push

O primeiro e provavelmente o método de array JavaScript mais comum que você encontrará é push () . O método push () é usado para adicionar um elemento ao final de uma matriz.

Digamos que você tenha uma matriz de elementos, cada elemento sendo uma string representando uma tarefa que você precisa realizar. Faria sentido adicionar itens mais novos ao final do array para que pudéssemos terminar nossas tarefas anteriores primeiro.

Vejamos o exemplo em forma de código:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Tudo bem, então push nos deu uma sintaxe simples e agradável para adicionar um item ao final de nosso array.

Digamos que desejamos adicionar dois ou três itens por vez à nossa lista, o que faríamos então? Como se viu, push () pode aceitar vários elementos a serem adicionados de uma vez.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Agora que adicionamos mais algumas tarefas ao nosso array, podemos querer saber quantos itens estão atualmente em nosso array para determinar se temos muito para fazer.

Felizmente, push () tem um valor de retorno com o comprimento do array após o (s) nosso (s) elemento (s) terem sido adicionados.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

O Método Unshift

Nem todas as tarefas são criadas iguais. Você pode se deparar com um cenário no qual está adicionando tarefas ao array e, de repente, encontra uma que é mais urgente do que as outras.

É hora de apresentar nosso amigo unshift () que nos permite adicionar itens ao início de nosso array.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Você pode notar no exemplo acima que, assim como o método push () , unshift () retorna o novo comprimento do array para usarmos. Também nos dá a capacidade de adicionar mais de um elemento por vez.

O Método Concat

Abreviação de concatenate (to link together), o método concat () é usado para unir dois (ou mais) arrays.

Se você se lembrar de acima, os métodos unshift () e push () retornam o comprimento do novo array. concat () , por outro lado,retornará um array completamente novo.

Essa é uma distinção muito importante e torna concat () extremamente útil quando você está lidando com arrays que não deseja alterar (como arrays armazenados no estado React).

Aqui está a aparência de um caso bastante básico e direto:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Digamos que você tenha vários arrays que gostaria de unir. Não se preocupe, concat () está lá para salvar o dia!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Clonando com Concat

Lembra como eu disse que concat () pode ser útil quando você não quer transformar seu array existente? Vamos dar uma olhada em como podemos alavancar esse conceito para copiar o conteúdo de um array em um novo array.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Impressionante! Podemos essencialmente "clonar" um array usando concat () .

Mas há um pequeno 'pegadinho' nesse processo de clonagem. A nova matriz é uma "cópia superficial" da matriz copiada. Isso significa que qualquer objeto é copiado por referência e não o objeto real.

Vamos dar uma olhada em um exemplo para explicar essa ideia com mais clareza.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Mesmo que não tenhamos feito nenhuma alteração direta em nosso array original, o array foi afetado pelas mudanças que fizemos em nosso array clonado!

Existem várias maneiras diferentes de fazer uma "clonagem profunda" de um array, mas deixarei isso para você como lição de casa.

TL; DR

Quando você quiser adicionar um elemento ao final de seu array, use push (). Se você precisar adicionar um elemento ao início de seu array, tente unshift (). E você podeadicione arrays juntos usando concat ().

Certamente existem muitas outras opções para adicionar elementos a um array, e eu o convido a sair e encontrar mais alguns métodos de array excelentes!

Sinta-se à vontade para entrar em contato comigo no Twitter e dizer seu método de array favorito para adicionar elementos a um array.