不变的阵列

Question

我有一个 Firebase 服务提供商函数，通过承诺对象返回一组数据：

getPreviousChats(groupKey: string, offset: string): Promise<any> {
  return new Promise((resolve, reject) => {
    // let previousChats: Array<any> = [];
    let previousChats: any[] = [];
    const chatRef = this.chatsRef.child(groupKey).orderByKey().endAt(offset).limitToLast(5);
    chatRef.once('value', snapshot => {
      snapshot.forEach(childSnapshot => {
        previousChats.push({
          id: childSnapshot.key,
          message: childSnapshot.val().message,
          createTime: childSnapshot.val().createTime
        });
        return false; // forEach returns boolean
      });
    });
    resolve(previousChats);
  });
}

同时，Ionic 页面函数调用 getPreviousChats() 来检索以前的聊天数据，并通过unshift()将其添加到当前页面布局中：

loadPreviousChats(refresher) {
  this.dataService.getPreviousChats(this.groupKey, this.chats[0].id).then(data => {
    this.chats.unshift(data);
  }, (error) => {
    console.log('loadPreviousChats error: ', JSON.stringify(error));
  });
  setTimeout(() => {
    console.log('Async operation has ended');
    refresher.complete();
  }, 1000); 
}

不幸的是，不知何故，this.chats.unshift(data);在当前this.chats数组前面插入了带有额外数组层的data：

this.chats:  Array[6]
              0: Array[5]
                0: Object
                1: Object
                2: Object
                3: Object
                4: Object
                 length: 5
                 __proto__: Array[0]
              1: Object
              2: Object
              3: Object
              4: Object
              5: Object
               length: 6
               __proto__: Array[0]

那么，我在这里错过了什么？

Answer 1

那么，我在这里错过了什么？

这就是unshift的作用：它获取您给它的值并将其插入数组的开头。你给它的值是一个数组引用，所以这就是它放在数组中的内容。

如果你想将这些条目附加到this.chats，你可以用push来做到这一点;这在ES5和更早版本中有点尴尬：

this.chats.push.apply(this.chats, data);

在ES2015+中更清晰地使用扩展语法：

this.chats.push(...data);

---

旁注：你也成为这个问题的牺牲品：在调用once回调之前，你过早地解决了你的getPreviousChats承诺（我假设这是一个异步操作，否则使用这样的回调似乎很奇怪）。将resolve调用移动到回调中。

Answer 2

我想

您可以将新的数组项插入到现有数组项中，如下所示：

let chats = [...newChats, ...oldChats]; //or oldChats first

或者，您可以像这样使用 Concat：

let chats = oldChats.concat(newChats);

我更喜欢方法一，因为它创建了每个数组的吞噬副本，而不修改原始数组。