Anexar elementos em um Array em JavaScript

1. Use a propriedade .length do Array para acrescentar elementos em um Array em JavaScript
2. Use o método push() para acrescentar elementos em um Array em JavaScript
3. Use o método unshift() para acrescentar elementos em um Array
4. Use o método splice() para acrescentar elementos em um Array
5. Use o método concat() para acrescentar elementos em um Array
6. Use a sintaxe spread para acrescentar elementos em um array

Neste artigo, aprenderemos como anexar elementos em um Array em JavaScript.

Existem vários métodos para anexar um elemento a um Array em JavaScript. Podemos anexar um único elemento, vários elementos e até mesmo anexar um Array inteira a uma determinada matriz. Podemos usar um método dependendo se queremos mudar ou não, requisitos de velocidade e eficiência, legibilidade do código.

Use a propriedade .length do Array para acrescentar elementos em um Array em JavaScript

É a abordagem clássica em que obtemos o último índice vazio do array usando o comprimento total do array e inserimos um elemento nesse índice. Este método é o mais fácil de usar e oferece excelente eficiência. Isso nos permite anexar apenas um elemento de cada vez. É um método mutativo porque altera a matriz original.

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

Resultado:

[0, 1, 2, 3]

No código acima, obtemos o último índice do array usando arr.length como 3 e adicionamos elementos a esses índices.

Use o método push() para acrescentar elementos em um Array em JavaScript

O método push() é usado para adicionar elementos ao final do array. Podemos adicionar um único elemento, vários elementos ou até mesmo um array. É a opção mais simples e rápida, e até bate o método acima usando Array.length em grandes arrays em alguns casos. As ações realizadas por push() podem ser revertidas pelo método .pop(). Quando vários elementos são passados ​​juntos, sua ordem é preservada pelo operador push(). Este método também altera a matriz e, portanto, é mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

Resultado:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

No código acima, demonstramos todos os 3 casos: adicionar um único elemento, vários elementos e até mesmo um array inteiro usando a sintaxe de propagação. Todos os elementos são anexados ao final do array.

Use o método unshift() para acrescentar elementos em um Array

O método unshift() nos ajuda a adicionar um elemento ao início do array. Ele retorna o novo comprimento do array. Ele pode ser chamado ou aplicado a objetos que se assemelham a um Array de propriedades. Quando vários elementos são passados ​​juntos, sua ordem é preservada pelo operador unshift(). Este método também altera a matriz e, portanto, é mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

Resultado:

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

No código acima, demonstramos todos os 3 casos: adicionar um único elemento, vários elementos e até mesmo um Array inteira usando a sintaxe de propagação. Observe como esta operação é diferente de push(), todos os elementos são anexados ao início do array.

Use o método splice() para acrescentar elementos em um Array

O método splice() pode modificar o conteúdo do array adicionando / removendo elementos. Leva os seguintes argumentos 3:

1. index: Um valor inteiro que especifica a posição para adicionar / remover elementos. Podemos até especificar um índice na parte de trás do array usando índices negativos.
2. howmany: é um parâmetro opcional. Ele especifica quantos itens devem ser removidos do array. Se for definido como 0, nenhum item será removido.
3. item1, item2, ... ,itemx: Os itens a serem adicionados à matriz.

Este método também altera a matriz e, portanto, é mutativo.

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

Resultado:

[1, 2, 3, 4, 7, 8, 9]

No código acima, selecionamos o índice 4 e adicionamos os elementos 3 7,8,9 a esse índice.

Use o método concat() para acrescentar elementos em um Array

O método concat() pega arrays como entrada e os concatena, ou seja, pega um array e acrescenta o resto ao seu final. Mas esse operador não modifica a matriz original e retorna um Array inteiramente nova contendo o resultado combinado. Pode levar dois ou mais arrays e concatená-los. Uma vez que esse método não modifica a matriz fornecida, ele não é mutativo.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

Resultado:

[1, 2, 3, 8, 9, 10]

No código acima, pegamos dois arrays, arr e arr2, e chamamos a função concat() para concatená-los para formar o novo array - arr3.

Use a sintaxe spread para acrescentar elementos em um array

Podemos usar a sintaxe de propagação para anexar matrizes completas a uma determinada matriz. É um método não mutativo, pois apenas distribuímos os elementos do array em um novo array. É muito semelhante à operação concat(). Isso nos ajuda a criar uma cópia ou mesclar duas matrizes separadas. É importante usar a sintaxe de propagação com cuidado. Se usarmos a sintaxe const arr = [arr1, arr2]; obtemos um Array aninhada contendo duas submatrizes, enquanto se usarmos const arr=[...arr1 , ...arr2]; nós concatenamos os elementos de ambas as matrizes.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

Resultado:

[1, 2, 3, 8, 9, 10]

No código acima, usamos o operador spread para anexar duas matrizes, arr e arr2, em uma nova matriz - arr3.

Todos os métodos acima são suportados por todos os principais navegadores, exceto a sintaxe de propagação. O Internet Explorer não oferece suporte à sintaxe de propagação.