JavaScript kullanarak Object Array çıkarmak


548

Bir nesneyi bir diziden nasıl kaldırabilirim? Ben adını içeren nesneyi kaldırmak istediğiniz Kristiandan someArray. Örneğin:

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

Bunu başarmak istiyorum:

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


3
FYI Ben dizi sözdizimi tekrar yanlış ve tüm bu cevaplar bağlamında böylece bu soruya düzenleme geri aldım.
Dunhamzzz

2
Ve sonra dizi sözdizimi tekrar "düzeltildi" (iki kez), böylece cevaplar artık bağlam içinde değil.
Teepeemm

4
Sözdizimi hatası, bazı yanıtların anlamlı olmasını nasıl sağlar?
Samy Bencherif

1
@SamyBencherif - Yanıtların bazıları, sorunun orijinal sürümündeki sözdizimi hatasını açıkça ele alır, bu nedenle sözdizimi hatasını kaldırırsanız, bu yanıtlar artık var olmayan bir şeyden bahsediyor.
nnnnnn

Yanıtlar:


778

Bir Diziden öğeleri kaldırmak için birkaç yöntem kullanabilirsiniz:

//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

Elemanı yerinde kaldırmak istiyorsanız x, şunu kullanın:

someArray.splice(x, 1);

Veya

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

Bir yoruma yanıt @ chill182 : Kullanmakta bir diziden bir veya daha fazla eleman kaldırabilir Array.filterveya Array.splicekombine Array.findIndex(bkz MDN ), örneğin

// 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>


2
@Klemzy dizine göre değil mi demek istediniz? değere göre ...?
Royi Namir

328
Orijinal soru = "Kristian" isimli nesnenin diziden nasıl kaldırılacağını sordu. Cevabınız dizideki ilk öğe olduğunu varsayar, ancak Kristin ilk öğede değilse ne olur? O zaman cevabınız işe yaramıyor.
Rochelle C

7
@ chill182: Bu belirli bir cevap değil, daha genel bir cevap. Ondan, elemanları kaldırma yöntemini çıkartabilirsiniz. X ... konumundaki elemanı çıkarmak istiyorsanız, ilk elemanlardan başka bir parça çıkarmak için bir ipucu olabilir, değil mi?
KooiInc

6
Ekleme işlevi bana yardımcı oldu, ancak bir dizi yeniden atamamalısınız. Bu, sonuç kaldırılan öğeyi içeren diziyi içermek yerine kaldırılan öğeyi içeren bir Dizi ile sonuçlanır.
Kenn Cal

1
Kullanmadan findIndexönce sonucu kontrol etmelisiniz splice. Koşul eşleşen dizide hiçbir unsurlar varsa findIndexdönecektir -1ve doğrudan içine bu koyarak splicedizideki son elemanın bir arbitraty silinmesine neden olur.
jdnz

131

Bunun gibi yaygın görevler için lodash.js veya sugar.js kullanmanızı öneririz :

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

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

çoğu projede, bunun gibi kütüphaneler tarafından sağlanan bir dizi yardımcı yönteme sahip olmak oldukça yararlıdır.


13
Alt çizgi örneği biraz kapalı olduğunu düşünüyorum. OlmalısomeArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
Andy Ford

7
Underscore.js veya sugar.js kullanmak istemiyorsanız, bunu yapabilirsinizsomeArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
BenR

1
istediğim başka bir şey, dizideki her nesne için ayrı düğmeler olacak. Ben dizi düğmesini tıklayın belirli bir nesneyi silmek istiyorum. nasıl yapılır . öğeleri oluşturmak için açısal js ng-tekrar kullandık. bana yardım edebilir misin
Thilak Raj

5
Buradaki tahıllara karşı gidecek; bir nesnenin nesnelerden (basit bir şekilde kabul edilen cevabın gösterdiği gibi, kutudan temiz bir şekilde desteklediği) çıkarılması amacıyla tüm kütüphaneyi içermesini önermek zayıf bir formdur. Kütüphanenin sağladığı daha güçlü işlevsellik için zaten gerekmedikçe kodunuza gereksiz ağırlık ve karmaşıklık katar.
Josh Doebbert

4
Basit kullanım için asla kitaplık eklemenizi tavsiye etmem
Munna Bhakta

130

Temiz çözüm kullanmak olacaktır Array.filter:

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

Bu sorun IE <9 üzerinde çalışmaz . Ancak, herhangi bir tarayıcı için bunu uygulayan bir Javascript kitaplığından (örn. Underscore.js ) kod ekleyebilirsiniz .


10
Ancak bu, sadece birincisi değil, bulunan tüm olayları kaldıracaktır
Flavien Volken

4
Ve orijinali değiştirmek yerine yeni bir dizi döndürür. Kullanım durumuna bağlı olarak, bu istediğiniz gibi olabilir veya olmayabilir.
Jochie NABUURS

1
@JochieNabuurs gerçekten yeni bir dizi. Ancak nesne aynı kalır. Yine de her bir nesnenin değerini değiştirebilirsiniz; orijinal nesnenin nesnesine yansıyacaktır.
DriLLFreAK100

2
Bunun yeni bir dizi döndürmesi ile ilgili noktaya, çözümü sadece someArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); adreslere çevirmek değil mi?
hBrent

93

Buna ne dersin?

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});

8
$.each()Döngüden önce dizi uzunluğunu önbelleğe aldığından hataya neden olmaz, böylece bir öğeyi kaldırırsanız $.each()(şimdi daha kısa) dizinin sonundan sonra çalışır. (O zaman someArray[i]olacak undefinedve undefined.namekilitlenmesine.)
nnnnnn

5
Ardından, ekten sonra bir 'return false' ekleyin.
Allan Taylor

18
bu javascript değildir. -1
onionpsy

20
Bu cevabın jQuery
Clarkey

68

Gösterildiği gibi "diziniz" geçersiz JavaScript sözdizimidir. Kıvırcık parantezler {}özellik adı / değer çiftlerine sahip nesneler içindir, ancak köşeli parantezler []diziler içindir - şöyle:

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

Bu durumda, bir öğeyi kaldırmak için .splice()yöntemi kullanabilirsiniz . İlk öğeyi (dizin 0) kaldırmak için şunu söyleyin:

someArray.splice(0,1);

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

Dizini bilmiyorsanız, ancak "Kristian" adlı öğeyi bulmak için dizide arama yapmak istiyorsanız, bunu yapabilirsiniz:

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

EDIT: Sorunuzun "jQuery" ile etiketlendi fark ettim, böylece $.grep()yöntemi deneyebilirsiniz :

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);

Neden aşırı yükü eklediler? Şüphesiz sadece koyabilirsiniz! = "Kristian". Aşırı yük hangi amaca hizmet eder?
markthewizard1234

@ markthewizard1234 - "Tersine çevir" Boole argümanını mı kastediyorsunuz $.grep()? Evet, koyabileceğim bu örnekte fazla bir şey eklemiyor !=, ancak diğer durumlarda, grep etmek istediğiniz şeye ters test yapmak için tanımlanmış bir işleve sahip olabilirsiniz, bu yüzden ek işlevi, sonuçları tersine çevirmek için bu aşırı yükü kullanabilirsiniz.
nnnnnn

Ah, eğer grep içeren bir sarmalayıcı fonksiyonunuz varsa, boolean'ı parametre olarak ayarlayabilirsiniz. Anladım, teşekkürler!
markthewizard1234

@ markthewizard1234 - Yapabilirdiniz, ama aklımdaki şey bu değildi: hayal edin function isEven(num) { return num%2===0 }. Sen kullanabilirsiniz $.grep(someArray, isEven)diziden sadece hatta sayılarını almak için, ya da $.grep(someArray, isEven, true)tersini yapmak ve olmayan hatta değerleri olsun.
nnnnnn

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');

John'u kaldıracak !


4
Dostum ... Java'dan gelince, bu kadar basit bir şeyin bir listenin filtrelenmesini gerektirdiğine çok şaşırdım ... wtf. Şimdiye kadar okuduğum OP sorusuna en doğru cevap bu.
kod teli

Evet, bu iyi bir yaklaşım. Yine de ES2015'ten önce de çalışacaktır (ES6). Filtre fonksiyonu sürümü 5.1 (2011) bu yana kullanılmaktadır ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
user3777549

40

Array.filter () kullanabilirsiniz.

Örneğin

        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"}];

Ok fonksiyonları:

someArray = someArray.filter(x => x.name !== 'Kristian')

istediğim başka bir şey, dizideki her nesne için ayrı düğmeler olacak. Ben dizi düğmesini tıklayın belirli bir nesneyi silmek istiyorum. nasıl yapılır . öğeleri oluşturmak için açısal js ng-tekrar kullandık. bana yardım edebilir misin
Thilak Raj

daCoda iki durumunuz varsa ne olacak?
Malcolm Salvador

@MalcolmSalvador, örneğin, başka koşullarınız varsa, bunu aşağıdaki gibi yazıp farklı && veya || operatör ihtiyaca göre. someArray = someArray.filter (function (returnableObjects) {return returnableObjects.name! == 'Kristian' && cond2Query.age> = 22;});
Biswajit Panday

18

Dinamik bir işlev Array, Key ve değer nesneleri alır yaptık ve istenen nesneyi kaldırdıktan sonra aynı diziyi döndürür:

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

        }

Tam Örnek: 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"));

15

Bu benim için çalışan bir işlev:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}

istediğim başka bir şey, dizideki her nesne için ayrı düğmeler olacak. Ben dizi düğmesini tıklayın belirli bir nesneyi silmek istiyorum. nasıl yapılır . öğeleri oluşturmak için açısal js ng-tekrar kullandık. bana yardım edebilir misin
Thilak Raj

12

Ayrıca böyle bir şey yapmayı deneyebilirsiniz:

var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);

11
someArray = jQuery.grep(someArray , function (value) {
        return value.name != 'Kristian';
});

10

Dizilerde ekleme işlevini kullanın. Başlangıç ​​öğesinin konumunu ve kaldırmak istediğiniz alt dizinin uzunluğunu belirtin.

someArray.splice(pos, 1);

8

Dizilerle basit çalışma için UndercoreJS'ye oy verin .

_.without () işlevi bir öğenin kaldırılmasına yardımcı olur:

 _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    => [2, 3, 4]

En iyi çözüm. Nesne dizileriyle çalışır.
Azee

4

ES 6 ok fonksiyonu ile

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)

3

En basit çözüm, her nesne için dizinleri ada göre depolayan bir harita oluşturmaktır, örneğin:

//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 );

Ben bu fikri seviyorum, ama aynı zamanda sormak gerekir, dizinler eklenir gibi böyle bir fikir için bellek kullanım sınırları nelerdir? Ben orijinal kaynak dizisine ek olarak 2 harita olurdu, bu yüzden nesnede 2 farklı alanlara endekslemek istiyorum bir dizi var. Bu, arama hızı için ödenmesi gereken küçük bir fiyat mı yoksa bellekle daha verimli olacak bir çözüm var mı?
Brad G.

3

Bu muhtemelen bu durum için uygun olmasa da geçen gün, deleteörneğin dizinin boyutunu değiştirmeniz gerekmiyorsa, bir diziden bir öğeyi kaldırmak için anahtar kelimeyi kullanabileceğinizi öğrendim.

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

3

Bu cevap

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

koşulu yerine getiren birden fazla kayıt için çalışmıyor. Bu tür iki ardışık kaydınız varsa, yalnızca ilk kayıt kaldırılır, diğeri atlanır. Kullanmanız gerekenler:

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

yerine .


2

Dizi sözdiziminizde bir nesnenin aksine bir dizi demek istediğinizi varsayarsak bir hata var gibi görünüyor, Array.splice burada arkadaşınız:

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

2

Harita işlevini de kullanabilirsiniz .

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);

1
Ancak dizi üzerinden yineleme yapmak istiyorsanız, forEach kullanmak daha iyi değil mi?
corse32

2

Ayrıca someşunları kullanabilirsiniz :

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) 
})

2

Ben bunu kullanıyorum.

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();
  }

O zaman demek kadar basit

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

Üç yerine herhangi bir sayıyı değiştirin. Beklenen çıktıdan sonra:

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

2

Belirli bir nesnenin tüm oluşumlarını (bazı koşullara dayalı olarak) kaldırmak istiyorsanız, döngü için a içindeki javascript splice yöntemini kullanın.

Bir nesneyi kaldırmak dizi uzunluğunu etkileyeceğinden, uzunluk kontrolünün bozulmadan kalması için sayacı bir adım azalttığınızdan emin olun.

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.
  }
}

Yukarıdaki kod snippet'i, 20 yaşından büyük tüm nesneleri kaldırır.



1

i dizisinin artımlı dizini olan splice (i, 1) nesneyi kaldıracaktır. Ancak, ekin de dizi uzunluğunu sıfırlayacağını unutmayın, 'tanımsız' için dikkat edin. Örneğin, 'Kristian' kaldırırsanız, döngü içinde bir sonraki yürütme, ben 2 olacak ama someArray 1 uzunluğu olacak, bu nedenle "John" kaldırmaya çalışırsanız "tanımsız" bir hata alırsınız . Zarif olmasa da buna bir çözüm, kaldırılacak elemanın indeksini takip etmek için ayrı bir sayaca sahip olmaktır.


1

Yalnızca dizideki özelliği name"Kristian" olmayan nesneleri döndürür

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>


0

Kendo Izgara Kullanarak Bu Kavramlar

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

var selectedItem = SelectedCheckBoxList;

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

0

Sanırım cevaplar çok dallı ve düğümlü.

Modern JavaScript jargonunda verilen nesneyle eşleşen bir dizi nesnesini kaldırmak için aşağıdaki yolu kullanabilirsiniz.


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);

-2

Bir dizinin nesnesine erişmek ve nesneyi kaldırmak istiyorsanız böyle bir şeyi deneyebilirsiniz.

// 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 }];
        

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.