[ad_1]
Matrizes de 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á é empurrar(). 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 de cada vez à nossa lista, o que faríamos então? Acontece que empurrar() 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, empurrar() 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 não mudar () 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 empurrar() método, não mudar () 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 concat () método é usado para unir dois (ou mais) arrays.
Se você se lembra de cima, o não mudar () e empurrar() métodos retornam o comprimento da nova matriz. concat (), por outro lado, retornará um array completamente novo.
Esta é uma distinção muito importante e faz 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); // ["🍎", "🍌", "🥕", "🍩", "🥚", "🍟"]Clonagem com Concat
Lembre-se de como eu disse isso concat () pode ser útil quando você não deseja alterar 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 arr2arr2[1].food = "🍕";arr2.push({food:"🍔"})console.log(arr1) //[ { food: '🍎' }, { food: '🍕' }, { food: '🥕' } ]console.log(arr2) //[ { food: '🍎' }, { food: '🍕' }, { food: '🥕' }, { food: '🍔' } ]Mesmo que não diretamente fazer qualquer alteração 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 sua matriz, use empurrar(). Se você precisa adicionar um elemento ao início de sua matriz, tente unshift (). E você pode adicione matrizes 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 me diga seu método de array favorito para adicionar elementos a um array.
[ad_2]
Fonte
