Hapus Objek dari Array menggunakan JavaScript

549

Bagaimana cara menghapus objek dari array? Saya ingin menghapus objek yang mencakup nama Kristiandari someArray. Sebagai contoh:

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

Saya ingin mencapai:

someArray = [{name:"John", lines:"1,19,26,96"}];
Clem
sumber
3
FYI Saya telah memutar kembali edit pada pertanyaan ini sehingga sintaks array salah lagi, dan semua jawaban ini sesuai konteks.
Dunhamzzz
2
Dan kemudian sintaks array "diperbaiki" (dua kali) lagi, sehingga jawabannya tidak lagi dalam konteks.
Teepeemm
4
Bagaimana kesalahan sintaksis membantu membuat beberapa jawaban masuk akal?
Samy Bencherif
1
@SamyBencherif - Beberapa jawaban secara eksplisit mengatasi kesalahan sintaks di versi asli pertanyaan, jadi jika Anda menghapus kesalahan sintaks, jawaban tersebut sekarang berbicara tentang sesuatu yang tidak ada.
nnnnnn

Jawaban:

778

Anda dapat menggunakan beberapa metode untuk menghapus item dari Array:

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

Jika Anda ingin menghapus elemen di posisi x, gunakan:

someArray.splice(x, 1);

Atau

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

Membalas komentar @ chill182 : Anda dapat menghapus satu atau lebih elemen dari array menggunakan Array.filter, atau Array.splicedikombinasikan dengan Array.findIndex(lihat MDN ), mis.

// 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
sumber
2
@ Klemzy bukankah maksud Anda bukan dengan indeks? berdasarkan nilai ...?
Royi Namir
328
Pertanyaan awal bertanya bagaimana menghapus objek dengan nama = "Kristian" dari array. Jawaban Anda menganggap itu item pertama dalam array tetapi bagaimana jika Kristin tidak ada di item pertama? Maka jawaban Anda tidak berhasil.
Rochelle C
7
@ chill182: itu bukan jawaban yang spesifik, tetapi yang lebih umum. Dari itu, Anda harus dapat menyimpulkan metode untuk menghapus elemen.Jika Anda ingin menghapus elemen di posisi x ... mungkin ada petunjuk untuk menghapus selain elemen pertama, kan?
KooiInc
6
Fungsi sambatan membantu saya, tetapi Anda seharusnya tidak menetapkan ulang someArray. Ini akan menghasilkan someArray yang mengandung item yang dihapus, alih-alih berisi array yang dihasilkan dengan item yang dihapus.
Kenn Cal
1
Anda harus memeriksa findIndexhasilnya sebelum menggunakannya splice. Jika tidak ada elemen dalam array yang cocok dengan kondisi findIndexakan kembali -1dan menempatkan ini langsung ke dalam spliceakan menghasilkan penghapusan arbitrase dari elemen terakhir dalam array.
jdnz
131

Saya sarankan menggunakan lodash.js atau sugar.js untuk tugas-tugas umum seperti ini:

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

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

di sebagian besar proyek, memiliki seperangkat metode pembantu yang disediakan oleh perpustakaan seperti ini cukup berguna.

psyho
sumber
13
Saya pikir contoh garis bawah sedikit tidak aktif. SeharusnyasomeArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
Andy Ford
7
Jika Anda tidak ingin menggunakan underscore.js atau sugar.js, Anda dapat melakukan inisomeArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
BenR
1
Hal lain yang saya inginkan, Akan ada tombol terpisah untuk setiap objek dalam array. jika saya ingin menghapus objek tertentu di tombol array diklik. Bagaimana cara melakukannya . Saya telah menggunakan angular js ng-repeat untuk menghasilkan item. dapatkah Anda membantu saya
Thilak Raj
5
Akan menentang gandum di sini; menyarankan satu menyertakan seluruh pustaka untuk tujuan sederhana menghapus item dari objek (yang secara bersih didukung oleh kotak, seperti yang ditunjukkan oleh jawaban yang diterima) adalah bentuk yang buruk. Ini menambah bobot dan kompleksitas yang tidak perlu pada kode Anda kecuali Anda sudah membutuhkannya untuk fungsionalitas yang lebih kuat yang disediakan perpustakaan.
Josh Doebbert
4
Untuk operasi sederhana, saya tidak akan merekomendasikan untuk menyertakan perpustakaan
Munna Bhakta
130

Solusi bersih adalah menggunakan Array.filter:

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

Masalahnya adalah ini tidak berfungsi pada IE <9. Namun, Anda dapat memasukkan kode dari perpustakaan Javascript (mis. Underscore.js ) yang mengimplementasikan ini untuk browser apa pun.

Jon
sumber
10
Namun ini akan menghapus semua kejadian yang ditemukan, tidak hanya yang pertama
Flavien Volken
4
Dan itu akan mengembalikan array baru alih-alih memodifikasi yang asli. Tergantung pada kasus penggunaan, ini mungkin atau mungkin bukan yang Anda inginkan.
Jochie Nabuurs
1
@JochieNabuurs itu memang array baru. Namun, objeknya tetap sama. Anda masih dapat memodifikasi nilai setiap objek dan itu akan mencerminkan objek array asli.
DriLLFreAK100
2
Intinya tentang ini mengembalikan array baru, hanya mengubah solusi ke someArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); alamat itu, bukan?
hBrent
93

Bagaimana dengan ini?

$.each(someArray, function(i){
    if(someArray[i].name === 'Kristian') {
        someArray.splice(i,1);
        return false;
    }
});
Allan Taylor
sumber
8
Tidakkah itu menyebabkan kesalahan karena $.each()cache panjang array sebelum looping jadi jika Anda menghapus elemen $.each()akan berjalan melewati akhir array (sekarang lebih pendek). (Maka someArray[i]akan undefineddan undefined.nameakan crash.)
nnnnnn
5
Kemudian tambahkan 'return false' setelah sambungan.
Allan Taylor
18
ini bukan javascript. -1
onionpsy
20
Harap dicatat bahwa jawaban ini memerlukan jQuery
Clarkey
68

"Array" Anda seperti yang ditunjukkan adalah sintaks JavaScript yang tidak valid. Kurung keriting {}adalah untuk objek dengan pasangan nama / nilai properti, tetapi kurung siku []adalah untuk array - seperti:

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

Dalam hal ini, Anda dapat menggunakan .splice()metode ini untuk menghapus item. Untuk menghapus item pertama (indeks 0), katakan:

someArray.splice(0,1);

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

Jika Anda tidak tahu indeksnya tetapi ingin mencari melalui larik untuk menemukan item dengan nama "Kristian" untuk dihapus, Anda dapat melakukannya:

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

EDIT: Saya baru saja melihat pertanyaan Anda ditandai dengan "jQuery", jadi Anda dapat mencoba $.grep()metode ini :

someArray = $.grep(someArray,
                   function(o,i) { return o.name === "Kristian"; },
                   true);
nnnnnn
sumber
Mengapa mereka menambahkan kelebihan? Tentunya Anda bisa saja memasukkan! = "Kristian". Apa tujuan kelebihan melayani?
markthewizard1234
@ markthewizard1234 - Apakah maksud Anda argumen Boolean "terbalik" $.grep()? Itu tidak menambahkan banyak dalam contoh ini, di mana ya, saya bisa meletakkan !=, tetapi dalam kasus lain Anda mungkin sudah memiliki fungsi yang didefinisikan yang kebetulan melakukan tes yang berlawanan dengan apa yang ingin Anda grep, jadi daripada menentukan suatu fungsi tambahan Anda bisa menggunakan kelebihan itu untuk membalikkan hasilnya.
nnnnnn
Ah, jadi jika Anda memiliki fungsi wrapper yang berisi grep Anda dapat mengatur boolean sebagai parameter. Terima kasih, terima kasih!
markthewizard1234
@ markthewizard1234 - Anda bisa, tetapi bukan itu yang ada dalam pikiran saya: bayangkan Anda miliki function isEven(num) { return num%2===0 }. Anda bisa menggunakan $.grep(someArray, isEven)untuk mendapatkan angka genap dari array, atau $.grep(someArray, isEven, true)untuk melakukan yang sebaliknya dan mendapatkan nilai-nilai non-genap.
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');

Itu akan menghapus John !

Saeid
sumber
4
Man ... Berasal dari java, saya sangat bingung bahwa hal mendasar yang harus dilakukan memerlukan penyaringan daftar ... wtf. Ini adalah jawaban paling akurat untuk pertanyaan OPs yang saya baca sejauh ini.
codepleb
Ya, ini pendekatan yang bagus. Meskipun itu juga akan berfungsi sebelum ES2015 (ES6). Fungsi filter telah tersedia sejak versi 5.1 (2011) ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
user3777549
40

Anda bisa menggunakan array.filter ().

misalnya

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

Fungsi panah:

someArray = someArray.filter(x => x.name !== 'Kristian')
daCoda
sumber
Hal lain yang saya inginkan, Akan ada tombol terpisah untuk setiap objek dalam array. jika saya ingin menghapus objek tertentu di tombol array diklik. Bagaimana cara melakukannya . Saya telah menggunakan angular js ng-repeat untuk menghasilkan item. dapatkah Anda membantu saya
Thilak Raj
daCoda bagaimana jika Anda memiliki dua kondisi?
Malcolm Salvador
@MalcolmSalvador katakan misalnya jika Anda memiliki kondisi lain, Anda dapat menulis ini seperti di bawah ini dan melanjutkan dengan yang berbeda && atau || operator sesuai dengan kebutuhan Anda. someArray = someArray.filter (fungsi (returnableObjects) {return returnableObjects.name! == 'Kristian' && cond2Query.age> = 22;});
Biswajit Panday
18

Saya telah membuat fungsi dinamis mengambil objek Array, Key dan nilai dan mengembalikan array yang sama setelah menghapus objek yang diinginkan:

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

        }

Contoh Lengkap: 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
sumber
15

Ini adalah fungsi yang berfungsi untuk saya:

function removeFromArray(array, value) {
    var idx = array.indexOf(value);
    if (idx !== -1) {
        array.splice(idx, 1);
    }
    return array;
}
ggmendez
sumber
Hal lain yang saya inginkan, Akan ada tombol terpisah untuk setiap objek dalam array. jika saya ingin menghapus objek tertentu di tombol array diklik. Bagaimana cara melakukannya . Saya telah menggunakan angular js ng-repeat untuk menghasilkan item.
Dapatkah
12

Anda juga dapat mencoba melakukan sesuatu seperti ini:

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

Gunakan fungsi sambungan pada array. Tentukan posisi elemen mulai dan panjang berikutnya yang ingin Anda hapus.

someArray.splice(pos, 1);
omong kosong
sumber
8

Pilih UndercoreJS untuk pekerjaan sederhana dengan array.

Fungsi _.without () membantu menghapus elemen:

 _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    => [2, 3, 4]
JuliaCesar
sumber
Solusi terbaik. Bekerja dengan array objek.
Azee
4

Dengan fungsi panah 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
sumber
3

Solusi paling sederhana adalah membuat peta yang menyimpan indeks untuk setiap objek dengan nama, seperti ini:

//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
sumber
Saya suka ide ini, tetapi juga harus bertanya, berapa batas penggunaan memori untuk ide seperti ini saat indeks ditambahkan? Saya memiliki larik yang ingin saya indeks pada 2 bidang yang berbeda di objek, jadi saya akan memiliki 2 peta selain larik sumber asli. Apakah ini harga kecil untuk membayar kecepatan pencarian atau apakah ada solusi yang akan lebih efisien dengan memori?
Brad G.
3

Meskipun ini mungkin tidak sesuai untuk situasi ini saya menemukan beberapa hari yang lalu Anda juga dapat menggunakan deletekata kunci untuk menghapus item dari array jika Anda tidak perlu mengubah ukuran array misalnya

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
sumber
3

Jawaban ini

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

tidak berfungsi untuk beberapa catatan yang memenuhi persyaratan. Jika Anda memiliki dua catatan berurutan seperti itu, hanya yang pertama dihapus, dan yang lainnya dilewati. Anda harus menggunakan:

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

sebagai gantinya .

JarmoP
sumber
2

Tampaknya ada kesalahan dalam sintaksis array Anda sehingga dengan asumsi maksud Anda sebuah array sebagai kebalikan dari objek, Array.splice adalah teman Anda di sini:

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

Anda juga dapat menggunakan fungsi peta .

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 ...
sumber
1
Tetapi jika Anda ingin mengulang melalui array, bukankah lebih baik menggunakan forEach?
corse32
2

Anda juga bisa menggunakan 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
sumber
2

Inilah yang saya gunakan.

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

Maka sesederhana seperti mengatakan

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

Ganti nomor apa pun di tempat tiga. Setelah output yang diharapkan seharusnya:

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

Jika Anda ingin menghapus semua kemunculan objek tertentu (berdasarkan kondisi tertentu) maka gunakan metode splice javascript di dalam untuk loop.

Karena menghapus objek akan memengaruhi panjang array, pastikan untuk mengurangi penghitung satu langkah, sehingga pemeriksaan panjang tetap utuh.

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

Cuplikan kode di atas menghapus semua objek dengan usia lebih dari 20.

Obaid
sumber
1

splice (i, 1) di mana i adalah indeks inkremental dari array akan menghapus objek. Tapi ingat sambatan juga akan mengatur ulang panjang array jadi hati-hati untuk 'tidak terdefinisi'. Menggunakan contoh Anda, jika Anda menghapus 'Kristian', maka dalam eksekusi berikutnya dalam loop, saya akan menjadi 2 tetapi someArray akan menjadi panjang 1, oleh karena itu jika Anda mencoba untuk menghapus "John" Anda akan mendapatkan kesalahan "tidak ditentukan" . Salah satu solusi untuk ini meskipun tidak elegan adalah memiliki penghitung terpisah untuk melacak indeks elemen yang akan dihapus.

Maksood
sumber
1

Hanya mengembalikan objek dari array yang propertinya namebukan "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>

Legenda
sumber
0

Konsep ini menggunakan 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
sumber
0

Saya kira jawabannya sangat bercabang dan diikat.

Anda dapat menggunakan jalur berikut untuk menghapus objek array yang cocok dengan objek yang diberikan dalam jargon JavaScript modern.


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
sumber
-2

Jika Anda ingin mengakses dan menghapus objek array, Anda dapat mencoba sesuatu seperti ini.

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