Как очистить или очистить массив объектов в javascript | Магазин огня - Vuejs

Question

Мне интересно, есть ли способ очистить или очистить массив объектов, скажем, например, у меня есть этот массив объектов, который я заимствую из firebase firestore, я делаю это с помощью снимка, вот код :

let siteButtonsData = firebase.firestore()
        .collection('app_settings')
        .doc('dashboard')
        .collection('main_panel')
        .onSnapshot(doc => {
          doc.forEach(doc => {
            this.arrObj.push(doc.data())
          });
        })

Тогда мой массив объектов заполнен правильно, и он показан следующим образом:

data() {
    return { 
      arrObj: [
       {
         action: 'one',
         id: 1,
         text: 'hello1'
       },
       {
         action: 'two',
         id: 2,
         text: 'hello2'
       },
       {
        action: 'three',
        id: 3,
        text: 'hello3'
       },
      ]
    }
}

С помощью v-for я перебираю this.buttons для создания некоторой динамики c контент в моем приложении, но когда что-то меняется в моей базе данных firestore, и моментальный снимок обновляет его, у меня есть дубликаты, я надеялся очистить массив объектов перед обновлением из firestore, поэтому у меня не будет дубликатов, но он не работает , до сих пор я пробовал:

this.arrObj = [{}]
this.arrObj = [] //This option leaves me with no way to push the array of objects
this.arrObj.length = 0

Независимо от того, какой из этих методов я использую, я не могу правильно обновить массив объектов, в первый раз, когда он хорошо справляется со сбором данных из firestore, но как только я обновил базу данных, у меня появились дубликаты.

заранее спасибо за любую помощь или подсказку

Answer 1

При работе с массивами вам всегда нужно убедиться, что система реактивности Vue улавливает изменения и обновляет представление. Vue автоматически наблюдает за некоторыми методами мутации массива, чтобы убедиться в обновлении, это pu sh (), pop (), shift (), unshift (), splice (), sort () и reverse (). См. https://vuejs.org/v2/guide/list.html#Mutation -Методы

Что касается вашего примера, то должно работать следующее:

let siteButtonsData = firebase.firestore()
        .collection('app_settings')
        .doc('dashboard')
        .collection('main_panel')
        .onSnapshot(doc => {
          this.arrObj.splice(0, this.arrObj.length);
          // I would think this works as well:
          // this.arrObj = [];
          doc.forEach(doc => {
            this.arrObj.push(doc.data())
          });
        })

Answer 2

Что, если вы хотите очистить весь массив и просто выгрузить все его элементы?

Есть несколько приемов, которые вы можете использовать для создания пустого или нового массива.

Самый простой и быстрый способ - установить в качестве переменной массива пустой массив:

var ar = [1, 2, 3, 4, 5, 6]; // do stuffar = []; // новый , пустой массив!

Проблема может возникнуть, если у вас есть ссылки на переменную. Ссылки на эту переменную не изменятся, они по-прежнему будут содержать значения исходного массива. Это, конечно, может создать ошибку.

Это упрощенный пример этого сценария:

var arr1 = [1, 2, 3, 4, 5, 6]; var arr2 = arr1; // Ссылка на arr1 по другой переменной arr1 = []; console.log (arr2); // Вывод [1, 2, 3, 4, 5, 6]

Простой трюк для очистки массива - установить для его свойства length значение 0.

var ar = [1, 2, 3, 4, 5, 6]; console.log (ар); // Вывод [1, 2, 3, 4, 5, 6] ar.length = 0; console.log (ar); // Вывод []

Другой неестественный прием - использовать метод splice, передавая длину массива в качестве второго параметра. Это вернет копию исходных элементов, что может быть удобно для вашего сценария.

var ar = [1, 2, 3, 4, 5, 6]; console.log (ar); // Вывод [1, 2, 3, 4, 5, 6] ar.splice (0, ar.length); console.log (ar); // Вывод []

Последние два метода не создают новый массив, а изменяют элементы массива. Это означает, что ссылки также должны обновляться.

Есть другой способ, используя while l oop. Мне это кажется немного странным, но в то же время выглядит модно, поэтому может впечатлить некоторых друзей!

var ar = [1, 2, 3, 4, 5, 6]; console.log ( ар); // Вывод [1, 2, 3, 4, 5, 6] while (ar.length) {ar.pop (); } console.log (ар); // Вывод []

Я бы не сказал go об очистке массива JavaScript, но он работает и читается. Некоторые тесты производительности также показали, что это самый быстрый метод, так что, возможно, он лучше, чем я думал изначально!