Видаліть об’єкт з масиву за допомогою JavaScript


548

Як я можу видалити об'єкт із масиву? Я хочу , щоб видалити об'єкт , який включає в себе ім'я Kristianз someArray. Наприклад:

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

Я хочу досягти:

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


3
FYI Я відмовив редагування цього питання, щоб синтаксис масиву знову був неправильним, і всі ці відповіді знаходяться в контексті.
Данхамзз

2
А потім синтаксис масиву знову "виправили" (двічі), щоб відповіді більше не були в контексті.
Teepeemm

4
Як помилка синтаксису допомагає зробити деякі відповіді сенсом?
Самі Бенчеріф

1
@SamyBencherif - Деякі відповіді явно стосуються помилки синтаксису в оригінальній версії питання, тому якщо ви видалите цю синтаксичну помилку, ці відповіді тепер говорять про те, що не існує.
nnnnnn

Відповіді:


778

Ви можете скористатися кількома методами для видалення елементів із масиву:

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

Якщо ви хочете видалити елемент у позиції x, використовуйте:

someArray.splice(x, 1);

Або

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

Відповісти на коментар @ chill182 : Ви можете видалити один або кілька елементів з масиву , використовуючи Array.filter, або в Array.spliceпоєднанні з Array.findIndex(див MDN ), наприклад ,

// 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 ти не мав на увазі не за індексом? за значенням ...?
Рой Намір

328
В оригінальному запитанні було задано питання, як видалити об'єкт із ім'ям = "Крістіан" з масиву. Ваша відповідь передбачає, що це перший пункт у масиві, але що робити, якщо Крістін не в першому пункті? Тоді ваша відповідь не працює.
Рошель C

7
@ chill182: це не конкретна відповідь, а більш загальна. З неї ви зможете зробити висновок про спосіб видалення елементів. Якщо ви хочете видалити елемент у позиції x ..., може бути підказкою для видалення, крім перших елементів, правда?
KooiInc

6
Функція сплайсингу була мені корисною, але вам не слід було призначати повторно деякий масив. Це призведе до деякого масиву, що містить вилучений елемент, а не містить результуючого масиву з вилученим елементом.
Кенн Кал

1
Ви повинні перевірити findIndexрезультат, перш ніж використовувати його splice. Якщо в масиві немає елементів, які б відповідали умові findIndex, повернеться, -1і введення цього безпосередньо в spliceрезультаті призведе до арбітражного видалення останнього елемента в масиві.
jdnz

131

Я рекомендую використовувати lodash.js або sugar.js для таких поширених завдань:

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

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

У більшості проектів досить корисним є набір допоміжних методів, що надаються подібними бібліотеками.


13
Я думаю, що приклад підкреслення трохи відключений. Має бутиsomeArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
Енді Форд

7
Якщо ви не хочете використовувати underscore.js або sugar.js, можете зробити цеsomeArray = someArray.filter(function(e) { return e.Name !== "Kristian"; });
BenR

1
інша річ, яку я хочу, для кожного об'єкта в масиві будуть окремі кнопки. якщо я хочу видалити цей конкретний об'єкт, натиснувши кнопку масиву. як це зробити . я використовував кутовий js ng-повтор для створення елементів. чи можете ви мені допомогти
Тилак Радж

5
Йдемо сюди проти зерна; пропонуючи включити цілу бібліотеку для простого вилучення предметів з об’єктів (що js чисто підтримує з поля, як свідчить прийнята відповідь) є поганою формою. Це додає вашому коду зайвої ваги та складності, якщо вам він уже не потрібен для більш потужної функціональності, яку надає бібліотека.
Josh Doebbert

4
Для простої операції, я ніколи не буду рекомендувати включати бібліотеку
Манна Бхакта

130

Чистим рішенням буде використання Array.filter:

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

Проблема в цьому полягає в тому, що він не працює на IE <9. Однак ви можете включити код з бібліотеки Javascript (наприклад, underscore.js ), який реалізує це для будь-якого браузера.


10
Це, однак, видалить усі знайдені події, не тільки перше
Флавіен Волкен

4
І він поверне новий масив замість зміни оригіналу. Залежно від випадку використання, це може бути або не бути тим, що ви хочете.
Джочі Набуур

1
@JochieNabuurs - це справді новий масив. Однак об’єкт залишається тим самим. Ви все ще можете змінити значення кожного об'єкта, і воно відображатиметься на об'єкті початкового масиву.
DriLLFreAK100

2
До речі, про це повертається новий масив, просто змінюючи рішення на someArray = someArray.filter(function(el) { return el.Name != "Kristian"; }); адреси, які, ні?
hBrent

93

Як щодо цього?

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

8
Не спричинить це помилку, тому що $.each()кеширує довжину масиву перед циклом, тому якщо ви вилучите елемент, він $.each()буде проходити повз кінця (тепер коротшого) масиву. (Тож тоді someArray[i]буде undefinedі undefined.nameрозбитися.)
nnnnnn

5
Потім додайте "повернути помилкове" після з'єднання.
Аллан Тейлор

18
це не JavaScript. -1
цибулина

20
Зауважте, що для цієї відповіді потрібен jQuery
Clarkey

68

Ваш "масив", як показано, недійсний синтаксис JavaScript. Фігурні дужки {}призначені для об’єктів з парами імен властивостей / значень, а квадратні дужки []- для масивів - так:

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

У такому випадку ви можете скористатися .splice()методом для видалення елемента. Щоб видалити перший елемент (індекс 0), скажіть:

someArray.splice(0,1);

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

Якщо ви не знаєте індексу, але хочете шукати через масив, щоб знайти елемент з назвою "Крістіан", щоб видалити, ви могли це зробити:

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

EDIT: Я щойно помітив, що ваше запитання позначено тегом "jQuery", тому ви можете спробувати $.grep()метод :

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

Чому вони додали перевантаження? Звичайно, ви могли просто поставити! = "Крістіан". Якій цілі служить перевантаження?
markthewizard1234

@ markthewizard1234 - Ви маєте на увазі "інвертувати" булевий аргумент $.grep()? Це не додає багато в цьому прикладі, де так, я міг би поставити !=, але в інших випадках у вас вже може бути визначена функція, яка відбувається, щоб зробити тест, протилежний тому, що ви хочете отримати, а потім, а не визначати додаткову функцію, яку ви можете просто використовувати, щоб перевантажити результати.
nnnnnn

Так, якщо у вас була функція обгортки, що містить grep, ви можете встановити булевий параметр. Зрозумів дякую!
markthewizard1234

@ markthewizard1234 - Ти міг би, але це не те, що я мав на увазі: уяви, що ти мав function isEven(num) { return num%2===0 }. Ви можете використовувати, $.grep(someArray, isEven)щоб отримати просто парні числа з масиву, або $.grep(someArray, isEven, true)зробити зворотне і отримати не парні значення.
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');

Це видалить Джона !


4
Людина ... Виходячи з Java, я сильно збентежений, що для такої основної речі потрібно фільтрувати список ... wtf. Це найточніша відповідь на питання про ОП, яке я прочитав до цих пір.
codepleb

Так, це хороший підхід. Хоча це також буде працювати до ES2015 (ES6). Функція фільтра доступна з версії 5.1 (2011) ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
користувач3777549

40

Ви можете використовувати array.filter ().

напр

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

Функції стрілки:

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

інша річ, яку я хочу, для кожного об'єкта в масиві будуть окремі кнопки. якщо я хочу видалити цей конкретний об'єкт, натиснувши кнопку масиву. як це зробити . я використовував кутовий js ng-повтор для створення елементів. чи можете ви мені допомогти
Тилак Радж

daCoda що робити, якщо у вас дві умови?
Малькольм Сальвадор

@MalcolmSalvador скажімо, наприклад, якщо у вас є інші умови, ви можете написати це як нижче та продовжити з різними && або || оператора відповідно до ваших потреб. someArray = someArray.filter (функція (returnAbleObjects) {return returnnableObjects.name! == 'Kristian' && cond2Query.age> = 22;});
Biswajit Panday

18

Я зробив, що динамічна функція бере об'єкти Array, Key та value і повертає той самий масив після видалення потрібного об'єкта:

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

        }

Повний приклад: 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

Це функція, яка працює для мене:

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

інша річ, яку я хочу, для кожного об'єкта в масиві будуть окремі кнопки. якщо я хочу видалити цей конкретний об'єкт, натиснувши кнопку масиву. як це зробити . я використовував кутовий js ng-повтор для створення елементів. чи можете ви мені допомогти
Thilak Raj

12

Ви також можете спробувати зробити щось подібне:

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


10

Використовуйте функцію сплайсингу на масивах. Вкажіть положення початкового елемента та довжину послідовності, яку потрібно видалити.

someArray.splice(pos, 1);

8

Проголосуйте за UndercoreJS за просту роботу з масивами.

_.without () функція допомагає видалити елемент:

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

Найкраще рішення. Працює з об’єктними масивами.
Azee

4

З функцією стрілки 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)

3

Найпростішим рішенням було б створити карту, яка зберігає індекси для кожного об’єкта по імені, наприклад:

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

Мені подобається ця ідея, але потрібно також запитати, які обмеження використання пам'яті для такої ідеї, як додаються індекси? У мене є масив, який я хотів би індексувати на двох різних полях об’єкта, тому я мав би ще 2 карти на додаток до вихідного масиву джерел. Це невелика ціна, яку потрібно заплатити за швидкість пошуку, чи є рішення, яке було б ефективніше з пам'яттю?
Бред Г.

3

Хоча це, мабуть, не так підходить для цієї ситуації, я на днях з’ясував, що ви також можете використовувати deleteключове слово для видалення елемента з масиву, якщо вам не потрібно змінювати розмір масиву, наприклад

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

Ця відповідь

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

не працює для декількох записів, які виконують цю умову. Якщо у вас два таких послідовних записів, видаляється лише перший, а другий - пропущений. Ви повинні використовувати:

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

замість цього.


2

Здається, у вашому синтаксисі масиву є помилка, тому припускаючи, що ви маєте на увазі масив на відміну від об'єкта, Array.splice - ваш друг тут:

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

2

Ви також можете використовувати функцію карти .

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
Але якщо ви хочете повторити масив, чи не краще використовувати дляEach?
corse32

2

Ви також можете використовувати 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) 
})

2

Це те, що я використовую.

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

Тоді це так просто, як сказати

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

Замініть будь-яке число на три. Після очікуваного виходу слід:

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

2

Якщо ви хочете видалити всі події даного об'єкта (виходячи з певної умови), тоді використовуйте метод зрощення javascript всередині a для циклу.

Оскільки видалення об'єкта вплине на довжину масиву, переконайтесь, що зменшити лічильник на один крок, щоб перевірка довжини залишалася недоторканою.

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

Вищевказаний фрагмент коду видаляє всі об'єкти віком старше 20 років.



1

сплайс (i, 1), де i - інкрементний індекс масиву, видалить об'єкт. Але пам’ятайте, що сплайс також скине довжину масиву, тому стежте за «невизначеним». Використовуючи ваш приклад, якщо ви видалите 'Kristian', то в наступному виконанні в циклі, я буду 2, але someArray буде довжиною 1, тому якщо ви спробуєте видалити "John", ви отримаєте помилку "не визначено" . Одне рішення цього, хоч і не елегантного, - це мати окремий лічильник, щоб відслідковувати індекс елемента, який потрібно видалити.


1

Повертає лише об’єкти з масиву, властивість nameякого не є "Kristian"

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


Демонстрація:

 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

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

Я здогадуюсь, відповіді дуже розгалужені та вузликові.

Ви можете використовувати наступний шлях для видалення об’єкта масиву, який відповідає об’єкту, заданому в сучасному жаргоні 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);

-2

Якщо ви хочете отримати доступ та видалити об’єкт масиву, ви можете спробувати щось подібне.

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.