Remover objeto de um array em JavaScript

1. Use o método splice() para remover um objeto de um array em JavaScript
2. Usando o método slice() para remover um objeto de um array em JavaScript
3. Use o método filter() para remover um objeto de um array

Neste artigo, aprenderemos como remover um objeto de um array JavaScript. O artigo irá apresentar e implementar métodos como splice(), slice() e filter().

Use o método splice() para remover um objeto de um array em JavaScript

O método splice() pode ser o melhor método que podemos usar para remover o objeto de um array. Ele muda o conteúdo de um array removendo ou substituindo elementos existentes ou adicionando novos elementos no local. A sintaxe para o método splice() é mostrada abaixo.

Array.splice(index, count, items1, ..., itemX)

A opção index refere-se a um inteiro que especifica em que posição adicionar / remover itens. Também podemos usar valores negativos para especificar a posição do final do array. A opção count é opcional e indica o número de itens a serem removidos. A opção items1, ..., itemX também é opcional e pode ser usada para adicionar novos itens ao array.

Em primeiro lugar, declaramos uma variável de array chamada myArray, que contém três objetos no array. Então, na segunda linha, usamos o método splice() para o array. Também indicamos 0 e 1 como argumentos. Em seguida, registramos o array no console.

Inicialmente, a matriz contém três objetos. O valor 0 no método splice() indica o primeiro índice do array, ou seja, o primeiro objeto. Isso significa que vamos começar a remover do primeiro índice. O próximo valor, 1 no método, especifica que o método removerá um item do ponto inicial. Portanto, o exemplo abaixo removerá o primeiro objeto do array.

Devemos notar que o método splice() modifica o array; portanto, podemos usar o método slice() para remover o objeto desejado do array sem alterar o array original.

Exemplo de código:

var myArray =
    [{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)

Resultado:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Usando o método slice() para remover um objeto de um array em JavaScript

O método slice() retorna a cópia modificada da parte do array selecionada do início ao fim, mas o índice final passado para o método não será incluído. A sintaxe para o método slice() está abaixo.

Array.slice(startIndex, endIndex)

Aqui, startIndex é o índice baseado em zero a partir do qual iniciamos a extração. Um índice negativo pode ser usado, o que indica um deslocamento do final da sequência. Por exemplo, slice(-3) extrai os últimos três elementos na sequência. Se startIndex for indefinido, a função slice() começa a partir do índice 0, enquanto se startIndex for maior que o intervalo de índice do array, um array vazia é retornada.

A opção endIndex também é um índice baseado em zero antes do qual termina a extração. O método slice() extrai até endIndex, mas inclui o próprio endIndex. Se a opção endIndex for excluída, a função slice() extrai até o final da sequência, ou seja, para array.length. Se endIndex for maior que o comprimento da sequência, a função slice() também extrairá até o final da sequência.

O método slice(1,3) no exemplo abaixo irá extrair os elementos do segundo índice para o quarto índice. Como não há um quarto índice no array, ele extrairá os elementos até o final da sequência.

Exemplo de código:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

Resultado:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Use o método filter() para remover um objeto de um array

O método filter() cria uma nova matriz com os elementos que passam no teste fornecido pela função. Isso significa que ele retornará uma nova matriz de objetos. Se nenhum elemento passar no teste, a função retornará um array vazio. Usaremos a função de seta para demonstrar o método filter().

O método filter() usa uma terminologia chamada função callback, que funciona como

var newArray = myArray.filter(
    (element, index, array) => {
        ...Items passing this condition will be added to the new array...})

O método aceita três argumentos. A opção element é o elemento atual sendo processado na matriz. O index é opcional e indica o índice do elemento atual sendo processado na matriz. Finalmente, a opção array é o filtro de array chamado e opcional.

Primeiro, crie um array com objetos como feito nos métodos acima. Em seguida, chame a função filter() com a variável de array. Especifique item como o argumento da função de seta e retorne os elementos do array com a expressão item.id ! == 1. Armazene o novo array na variável newArray e registre-o no console.

O exemplo abaixo retorna apenas o elemento do array cujo id não é igual ao valor 1. Portanto, ele retorna o segundo e o terceiro elemento do array.

Código de exemplo:

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);

Resultado:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]