Remova o objeto da matriz usando JavaScript

549

Como posso remover um objeto de uma matriz? Desejo remover o objeto que inclui o nome Kristiande someArray. Por exemplo:

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

Eu quero alcançar:

someArray = [{name:"John", lines:"1,19,26,96"}];
Clem
fonte
3
Para sua informação, revirei a edição desta pergunta para que a sintaxe da matriz esteja incorreta novamente e todas essas respostas estejam em contexto.
Dunhamzzz
2
E a sintaxe da matriz foi "corrigida" (duas vezes) novamente, para que as respostas não estejam mais no contexto.
25415 Teepeemm
4
Como o erro de sintaxe ajuda a fazer algumas respostas fazerem sentido?
Samy Bencherif
1
@SamyBencherif - Algumas das respostas abordam explicitamente o erro de sintaxe na versão original da pergunta; portanto, se você remover esse erro de sintaxe, essas respostas agora estão falando sobre algo que não existe.
Nnnnnn

Respostas:

778

Você pode usar vários métodos para remover itens de uma matriz:

//1
someArray.shift(); // first element removed
//2
someArray = someArray.slice(1); // first element removed
//3
someArray.splice(0, 1); // first element removed
//4
someArray.pop(); // last element removed
//5
someArray = someArray.slice(0, a.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removed

Se você deseja remover o elemento na posição x, use:

someArray.splice(x, 1);

Ou

someArray = someArray.slice(0, x).concat(someArray.slice(-x));

Resposta ao comentário de @ chill182 : você pode remover um ou mais elementos de uma matriz usando Array.filterou Array.splicecombinado com Array.findIndex(consulte MDN ), por exemplo

// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" ); 
log("non destructive filter > noJohn = ", format(noJohn));
log(`**someArray.length ${someArray.length}`);

// destructive filter/reassign John removed > someArray2 =
let someArray2 = getArray();
someArray2 = someArray2.filter( el => el.name !== "John" );
log("", "destructive filter/reassign John removed > someArray2 =", 
  format(someArray2));
log(`**someArray2.length ${someArray2.length}`);

// destructive splice /w findIndex Brian remains > someArray3 =
let someArray3 = getArray();
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1);
someArray3.splice(someArray3.findIndex(v => v.name === "John"), 1);
log("", "destructive splice /w findIndex Brian remains > someArray3 =", 
  format(someArray3));
log(`**someArray3.length ${someArray3.length}`);

// Note: if you're not sure about the contents of your array, 
// you should check the results of findIndex first
let someArray4 = getArray();
const indx = someArray4.findIndex(v => v.name === "Michael");
someArray4.splice(indx, indx >= 0 ? 1 : 0);
log("", "check findIndex result first > someArray4 (nothing is removed) > ",
  format(someArray4));
log(`**someArray4.length (should still be 3) ${someArray4.length}`);

function format(obj) {
  return JSON.stringify(obj, null, " ");
}

function log(...txt) {
  document.querySelector("pre").textContent += `${txt.join("\n")}\n`
}

function getArray() {
  return [ {name: "Kristian", lines: "2,5,10"},
           {name: "John", lines: "1,19,26,96"},
           {name: "Brian", lines: "3,9,62,36"} ];
}
<pre>
**Results**

</pre>

KooiInc
fonte
2
@ Klemzy você não quis dizer não por índice? por valor ...?
precisa saber é o seguinte
328
A pergunta original perguntou como remover o objeto com o nome = "Kristian" da matriz. Sua resposta assume que é o primeiro item da matriz, mas e se Kristin não estiver no primeiro item? Então sua resposta não funciona.
Rochelle C
7
@ chill182: não é uma resposta específica, mas mais geral. A partir dele, você deve conseguir inferir o método para remover elementos. Se você deseja remover o elemento na posição x ... pode ser uma dica para remover outros que não sejam os primeiros, certo?
KooiInc 17/10
6
A função de emenda foi útil para mim, mas você não deveria ter reatribuído someArray. Isso resultará em algumaArray contendo o item removido, em vez de conter a matriz resultante com o item removido.
quer
1
Você deve verificar o findIndexresultado antes de usá-lo splice. Se não houver elementos na matriz que correspondam à condição findIndex, retornará -1e colocar isso diretamente spliceresultará em uma exclusão arbitrária do último elemento da matriz.
jdnz 19/02
131

Eu recomendo usar lodash.js ou sugar.js para tarefas comuns como esta:

// lodash.js
someArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });

// sugar.js
someArray.remove(function(el) { return el.Name === "Kristian"; });

na maioria dos projetos, ter um conjunto de métodos auxiliares fornecidos por bibliotecas como essas é bastante útil.

psico
fonte
13
Eu acho que o exemplo de sublinhado está um pouco errado. Deveria sersomeArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
Andy Ford
7
Se você não quiser usar underscore.js ou sugar.js, poderá fazer isso #someArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
BenR
1
Outra coisa que eu quero, haverá botões separados para cada objeto na matriz. se eu quiser excluir esse objeto em particular no botão da matriz clicou. como fazer isso . Eu usei js angular ng-repeat para gerar itens. você pode me ajudar
Thilak Raj
5
Indo contra o grão aqui; sugerir que se inclua uma biblioteca inteira com o objetivo simples de remover itens de objetos (que js suporta de maneira limpa e imediata, como mostra a resposta aceita) é uma forma ruim. Ele adiciona peso e complexidade desnecessários ao seu código, a menos que você já precise dele para obter a funcionalidade mais poderosa que a biblioteca fornece.
Josh Doebbert
4
Para uma operação simples, eu nunca recomendaria para incluir biblioteca
Munna Bhakta
130

A solução limpa seria usar Array.filter:

var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; }); 

O problema disso é que ele não funciona no IE <9. No entanto, você pode incluir código de uma biblioteca Javascript (por exemplo, underscore.js ) que implementa isso em qualquer navegador.

Jon
fonte
10
Este, porém, irá remover todas as ocorrências encontradas, não apenas o primeiro
Flavien Volken
4
E retornará uma nova matriz em vez de modificar a original. Dependendo do caso de uso, isso pode ou não ser o que você deseja.
Jochie Nabuurs
1
@JochieNabuurs é realmente uma nova matriz. No entanto, o objeto permanece o mesmo. Você ainda pode modificar o valor de cada objeto e ele refletirá no objeto da matriz original.
DriLLFreAK100 23/01/19
2
Ao ponto de retornar uma nova matriz, basta alterar a solução para someArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); endereços que, não?
hBrent 11/02/19
93

Que tal agora?

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});
Allan Taylor
fonte
8
Isso não causará um erro, porque $.each()armazena em cache o comprimento da matriz antes de fazer o loop, por isso, se você remover um elemento, $.each()será executado no final da matriz (agora mais curta). (Então someArray[i]será undefinede undefined.nameirá falhar.)
nnnnnn
5
Em seguida, adicione um 'retorno falso' após a emenda.
Allan Taylor
18
isto não é javascript. -1
onionpsy 26/10/2015
20
Observe que esta resposta requer jQuery
Clarkey 4/16
68

Sua "matriz", como mostrado, é uma sintaxe JavaScript inválida. Os colchetes {}são para objetos com pares de nome / valor de propriedade, mas os colchetes []são para matrizes - assim:

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];

Nesse caso, você pode usar o .splice()método para remover um item. Para remover o primeiro item (índice 0), diga:

someArray.splice(0,1);

// someArray = [{name:"John", lines:"1,19,26,96"}];

Se você não conhece o índice, mas deseja pesquisar na matriz para encontrar o item com o nome "Kristian" para remover, é possível:

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
      break;
   }

EDIT: Acabei de perceber que sua pergunta está marcada com "jQuery", para que você possa tentar o $.grep()método :

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);
nnnnnn
fonte
Por que eles adicionaram a sobrecarga? Certamente você poderia ter colocado! = "Kristian". Para que serve a sobrecarga?
markthewizard1234
@ markthewizard1234 - Você quer dizer o argumento booleano "inverter" $.grep()? Isso não adiciona muito neste exemplo, onde sim, eu poderia ter colocado !=, mas em outros casos você já pode ter uma função definida que faz o teste oposto ao que você deseja saudar, então, em vez de definir um função adicional, você pode simplesmente usar essa sobrecarga para inverter os resultados.
Nnnnnn 14/10
Ah, então se você tivesse uma função de wrapper contendo o grep, poderia definir o booleano como parâmetro. Entendi obrigado!
markthewizard1234
@ markthewizard1234 - Você poderia, mas não era isso que eu tinha em mente: imagine que você tinha function isEven(num) { return num%2===0 }. Você pode usar $.grep(someArray, isEven)para obter apenas os números pares da matriz ou $.grep(someArray, isEven, true)fazer o oposto e obter os valores pares.
Nnnnnn 16/10
63

ES2015

let someArray = [
               {name:"Kristian", lines:"2,5,10"},
               {name:"John", lines:"1,19,26,96"},
               {name:"Kristian", lines:"2,58,160"},
               {name:"Felix", lines:"1,19,26,96"}
            ];

someArray = someArray.filter(person => person.name != 'John');

Ele removerá John !

Saeid
fonte
4
Cara ... Vindo de java, estou muito confuso de que algo tão básico a fazer requer filtragem de uma lista ... wtf. Esta é a resposta mais precisa à pergunta dos OPs que li até agora.
precisa saber é
Sim, esta é uma boa abordagem. Embora também funcione antes do ES2015 (ES6). A função de filtro está disponível desde a versão 5.1 (2011) ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
user3777549
40

Você pode usar array.filter ().

por exemplo

        someArray = [{name:"Kristian", lines:"2,5,10"},
                     {name:"John", lines:"1,19,26,96"}];

        someArray = someArray.filter(function(returnableObjects){
               return returnableObjects.name !== 'Kristian';
        });

        //someArray will now be = [{name:"John", lines:"1,19,26,96"}];

Funções de seta:

someArray = someArray.filter(x => x.name !== 'Kristian')
daCoda
fonte
Outra coisa que eu quero, haverá botões separados para cada objeto na matriz. se eu quiser excluir esse objeto em particular no botão da matriz clicou. como fazer isso . Eu usei js angular ng-repeat para gerar itens. você pode me ajudar
Thilak Raj
daCoda e se você tiver duas condições?
Malcolm Salvador
@MalcolmSalvador, por exemplo, se você tiver outras condições, pode escrever como abaixo e continuar com diferentes && ou || operador de acordo com sua necessidade. someArray = someArray.filter (function (returnableObjects) {return returnableObjects.name! == 'Kristian' && cond2Query.age> = 22;});
Biswajit Panday
18

Eu fiz uma função dinâmica pega os objetos Array, Key e value e retorna a mesma matriz depois de remover o objeto desejado:

function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }

Exemplo completo: DEMO

var obj = {
            "results": [
              {
                  "id": "460",
                  "name": "Widget 1",
                  "loc": "Shed"
              }, {
                  "id": "461",
                  "name": "Widget 2",
                  "loc": "Kitchen"
              }, {
                  "id": "462",
                  "name": "Widget 3",
                  "loc": "bath"
              }
            ]
            };


        function removeFunction (myObjects,prop,valu)
        {
             return myObjects.filter(function (val) {
              return val[prop] !== valu;
          });

        }


console.log(removeFunction(obj.results,"id","460"));
Bishoy Hanna
fonte
15

Esta é uma função que funciona para mim:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}
ggmendez
fonte
Outra coisa que eu quero, haverá botões separados para cada objeto na matriz. se eu quiser excluir esse objeto em particular no botão da matriz clicou. como fazer isso . Eu usei js angular ng-repeat para gerar itens. você pode me ajudar
Thilak Raj
12

Você também pode tentar fazer algo assim:

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);
Mikebarson
fonte
11
someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Kristian';
});
Andre Morata
fonte
10

Use a função de emenda em matrizes. Especifique a posição do elemento inicial e o comprimento da subsequência que você deseja remover.

someArray.splice(pos, 1);
gabitzish
fonte
8

Vote no UndercoreJS para um trabalho simples com matrizes.

A função _.without () ajuda a remover um elemento:

 _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    => [2, 3, 4]
JuliaCesar
fonte
A melhor solução. Funciona com matrizes de objetos.
Azee
4

Com a função de seta ES 6

let someArray = [
                 {name:"Kristian", lines:"2,5,10"},
                 {name:"John", lines:"1,19,26,96"}
                ];
let arrayToRemove={name:"Kristian", lines:"2,5,10"};
someArray=someArray.filter((e)=>e.name !=arrayToRemove.name && e.lines!= arrayToRemove.lines)
Siddhartha
fonte
3

A solução mais simples seria criar um mapa que armazene os índices de cada objeto pelo nome, assim:

//adding to array
var newPerson = {name:"Kristian", lines:"2,5,10"}
someMap[ newPerson.name ] = someArray.length;
someArray.push( newPerson );

//deleting from the array
var index = someMap[ 'Kristian' ];
someArray.splice( index, 1 );
Creynders
fonte
Eu gosto dessa idéia, mas também devo perguntar: quais são os limites de uso de memória para uma idéia como essa à medida que os índices são adicionados? Eu tenho uma matriz que eu gostaria de indexar em 2 campos diferentes no objeto, então eu teria 2 mapas além da matriz de origem original. É um preço pequeno a pagar pela velocidade de pesquisa ou existe uma solução que seria mais eficiente com a memória?
Brad G.
3

Embora isso provavelmente não seja apropriado para essa situação, descobri outro dia que você também pode usar a deletepalavra-chave para remover um item de uma matriz, se não precisar alterar o tamanho da matriz, por exemplo.

var myArray = [1,2,3];

delete myArray[1];

console.log(myArray[1]); //undefined

console.log(myArray.length); //3 - doesn't actually shrink the array down
dougajmcdonald
fonte
3

Esta resposta

for (var i =0; i < someArray.length; i++)
   if (someArray[i].name === "Kristian") {
      someArray.splice(i,1);
   }

não está funcionando para vários registros que atendem à condição. Se você tiver dois desses registros consecutivos, apenas o primeiro será removido e o outro será ignorado. Você tem que usar:

for (var i = someArray.length - 1; i>= 0; i--)
   ...

em vez de .

JarmoP
fonte
2

Parece haver um erro na sintaxe da sua matriz, supondo que você queira dizer uma matriz em oposição a um objeto, Array.splice é seu amigo aqui:

someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];
someArray.splice(1,1)
Simon Scarfe
fonte
2

Você também pode usar a função de mapa .

someArray = [{name:"Kristian", lines:"2,5,10"},{name:"John",lines:"1,19,26,96"}];
newArray=[];
someArray.map(function(obj, index){
    if(obj.name !== "Kristian"){
       newArray.push(obj);
    }
});
someArray = newArray;
console.log(someArray);
solanki ...
fonte
1
Mas se você deseja percorrer a matriz, não é melhor usar o forEach?
Corse32
2

Você também pode usar some:

someArray = [{name:"Kristian", lines:"2,5,10"},
             {name:"John", lines:"1,19,26,96"}];

someArray.some(item => { 
    if(item.name === "Kristian") // Case sensitive, will only remove first instance
        someArray.splice(someArray.indexOf(item),1) 
})
Artur Grigio
fonte
2

É isso que eu uso.

Array.prototype.delete = function(pos){
    this[pos] = undefined;
    var len = this.length - 1;
    for(var a = pos;a < this.length - 1;a++){
      this[a] = this[a+1];
    }
    this.pop();
  }

Então é tão simples quanto dizer

var myArray = [1,2,3,4,5,6,7,8,9];
myArray.delete(3);

Substitua qualquer número no lugar de três. Após a saída esperada deve ser:

console.log(myArray); //Expected output 1,2,3,5,6,7,8,9
Matthias S
fonte
2

Se você deseja remover todas as ocorrências de um determinado objeto (com base em alguma condição), use o método de emenda de javascript dentro de a para o loop.

Como a remoção de um objeto afetaria o comprimento da matriz, diminua o contador em uma etapa, para que a verificação do comprimento permaneça intacta.

var objArr=[{Name:"Alex", Age:62},
  {Name:"Robert", Age:18},
  {Name:"Prince", Age:28},
  {Name:"Cesar", Age:38},
  {Name:"Sam", Age:42},
  {Name:"David", Age:52}
];

for(var i = 0;i < objArr.length; i ++)
{
  if(objArr[i].Age > 20)
  {
    objArr.splice(i, 1);
    i--;  //re-adjust the counter.
  }
}

O snippet de código acima remove todos os objetos com idade superior a 20.

Obaid
fonte
1

splice (i, 1) onde i é o índice incremental da matriz removerá o objeto. Mas lembre-se de que a emenda também redefinirá o comprimento da matriz, portanto, atente para 'indefinido'. Usando seu exemplo, se você remover 'Kristian', na próxima execução dentro do loop, terei 2, mas someArray terá um comprimento de 1; portanto, se você tentar remover "John", receberá um erro "indefinido" . Uma solução para isso, embora não seja elegante, é ter um contador separado para acompanhar o índice do elemento a ser removido.

Maksood
fonte
1

Retorna apenas objetos da matriz cuja propriedade namenão é "Kristian"

var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });


Demo:

 var someArray = [
                {name:"Kristian", lines:"2,5,10"},
                {name:"John", lines:"1,19,26,96"},
                {name:"Kristian", lines:"2,58,160"},
                {name:"Felix", lines:"1,19,26,96"}
                ];
			 
var noKristianArray = $.grep(someArray, function (el) { return el.name!= "Kristian"; });

console.log(noKristianArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Legendas
fonte
0

Conceitos usando o Kendo Grid

var grid = $("#addNewAllergies").data("kendoGrid");

var selectedItem = SelectedCheckBoxList;

for (var i = 0; i < selectedItem.length; i++) {
    if(selectedItem[i].boolKendoValue==true)
    {
        selectedItem.length= 0;
    }
}
Siva Ragu
fonte
0

Eu acho que as respostas são muito ramificadas e atadas.

Você pode usar o caminho a seguir para remover um objeto de matriz que corresponda ao objeto fornecido no jargão moderno do JavaScript.


coordinates = [
    { lat: 36.779098444109145, lng: 34.57202827508546 },
    { lat: 36.778754712956506, lng: 34.56898128564454 },
    { lat: 36.777414146732426, lng: 34.57179224069215 }
];

coordinate = { lat: 36.779098444109145, lng: 34.57202827508546 };

removeCoordinate(coordinate: object) {
  const found = this.coordinates.find((obj) => obj === obj);
  if (found) {
    this.coordinates.splice(found, 1);
  }
}

this.removeCoordinate(coordinate);
Umut Yerebakmaz
fonte
-2

Se você deseja acessar e remover o objeto de uma matriz, basta tentar algo como isto.

// inside some function

let someArray = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
                  {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1,
        "ShowRemoveButton" : true} ];
        
        for (let item of someArray) {
          delete item.ShowRemoveButton;
        }
        console.log(item.outputMappingData.Data);
        
//output will be like that = [ {"ColumnName" : "a", "PropertySerno" : 100005,"UpdateType" : 1},
//                             {"ColumnName" : "b", "PropertySerno" : 100202,"UpdateType" : 1 }];
        

ismailuztemur
fonte