Vue: как удалить объект из массива по его значению?

#javascript #vue.js

Вопрос:

Возможно ли удалить объект из массива по его значению, а не по индексу без итерации с for циклом?

Я попытался удалить элемент с помощью итерации, но похоже, что он не удаляет элементы итерации:

 App.$refs.userContent.foo : [1,2,3,4]
console.log(App.$refs.userContent.foo);
App.$refs.userContent.foo.forEach(function(x,i) 
 {
App.$refs.userContent.foo.$remove(i);

});
console.log(App.$refs.userContent.foo);

Результат:

[1, 2, 3, 4, __ob__: Observer]

[3, 4, __ob__: Observer]

Почему он не удаляет все элементы?

Ответ №1:

Когда вы удаляете элементы из массива, вы меняете индекс тех, которые остаются. Если вы хотите удалить все элементы, вы бы сделали следующее внутри вашего .forEach() :

 // Keep removing first array element until they're all gone
App.$refs.userContent.foo.$remove(0);

… но было бы странно очищать массив.

Чтобы ответить на ваш первоначальный вопрос — Нет. Вы не можете удалить элемент массива по его значению за один шаг. Сначала вам нужно найти индекс элемента, а затем удалить его по индексу. В vanilla JS вы можете использовать .splice() для удаления элемента по его индексу:

 // Remove 4th element from array
myArray.splice(3, 1);

1. это хороший код? ` var z=App.$refs.userContent.foo.length для(i = 0; i<=z; i ) { App.$refs.userContent.foo.$remove(i); }` ?

2. Нет. Если вы действительно хотите очистить массив таким образом, вам нужно будет выполнить цикл в обратном направлении: for(i = App.$refs.userContent.foo.length — 1; i> = 0; i—) {

Ответ №2:

Возможно, вы захотите использовать функцию фильтра. Например:

 [1,2,3,4].filter(x => x != 2)

чтобы удалить элемент из массива, значение которого равно 2.

Ответ №3:

Он должен перебирать массив, чтобы найти элемент, который вы хотите удалить по значению. Итак, ответ отрицательный.

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

Ответ №4:

В Vue 1 есть $remove метод для массивов, на который вы можете передать ссылку.

 this.items.$remove(item)

Я думаю, что это исчезло в Vue 2. Вы можете использовать indexOf вместо перебора. Что-то вроде:

 var index = this.items.indexOf(item);
if (index > -1) {
  this.items.splice(index, 1)
}

Ответ №5:

У меня была такая же проблема, я исправляю ее, помещая:ключ в v-для