如何在 javascript 中清空或清除对象数组Firestore - 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 以在我的应用程序中创建一些动态内容，但是当我的 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 会自动观察一些数组变异方法以确保更新，它们是 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()。 见https://vuejs.org/v2/guide/list.html#Mutation-Methods

至于你的例子，那么应该做的是：

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]

清除数组的一个简单技巧是将其长度属性设置为 0。

var ar = [1, 2, 3, 4, 5, 6];console.log(ar); // 输出 [1, 2, 3, 4, 5, 6]ar.length = 0;console.log(ar); // 输出 []

另一种不自然的技术是使用拼接方法，将数组长度作为第二个参数传递。这将返回原始元素的副本，这可能对您的场景很方便。

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 循环。我觉得有点奇怪，但同时看起来很花哨，所以它可能会给一些朋友留下深刻的印象！

var ar = [1, 2, 3, 4, 5, 6];console.log(ar); // 输出 [1, 2, 3, 4, 5, 6] while (ar.length) { ar.pop(); }console.log(ar); // 输出 []

我不会去清除 JavaScript 数组，但它可以工作并且可读。一些性能测试也表明这是最快的技术，所以也许它比我最初想象的要好！