数组显示为空，但应该有一个元素答案

【问题标题】：Array shows empty, but should have one element数组显示为空，但应该有一个元素
【发布时间】：2020-06-28 02:50:22
【问题描述】：

好的，我在处理一些代码时遇到了问题。在下面的代码中，我试图控制台记录数组的长度，但是在打印到控制台后，我得到数组长度的输出 0，当我打印数组本身时，它显示它是空的，但我可以单击下拉箭头并查看其中的元素。

// randomly selects card from array
export const selectCard = arr => {

    const randomArr = Math.floor(Math.random() * arr.length);

    console.log(arr.length);

    console.log(arr);
}

Image of logged array length and empty array with an element inside.

为了测试发生了什么，我决定将数组记录在一个不同的函数中，该函数位于创建数组的同一文件中。数组 (blackCards) 存储在一个对象中。

let packArr = {
  data: {},
  packToUse: [],
  whiteCards: [],
  blackCards: [],
};

控制台在另一个函数中记录数组 (blackCards) 会记录以下内容：

const seperatePacks = (data) => {
  // add white cards to array
  packArr.whiteCards.push(data.whiteCards);

  // add black cards to array
  packArr.blackCards.push(data.blackCards);

  // console log blackCards array
  console.log(packArr.blackCards);
};

Image of logged array from a different function which is within the same file where the array is created and stored.

下面是关于我的代码如何工作的更多信息。当用户点击一个按钮时，一个事件监听器被激活，它调用最终从服务器获取 json 的其他函数，然后我将该数据添加到数组中，您可以在上面的代码中看到。因此，既然您知道代码是如何工作的，那么我就可以了解导致我更加困惑的原因。所以，在第一次点击时，我得到了所有先前代码和图像组合的结果，但是如果我再次点击同一个按钮，或者点击不同的按钮，我会得到想要的结果（如果我点击两个按钮我得到数组中的两个元素，所以它工作正常）。因此，单击两次或多次，程序就会按应有的方式运行。这里的任何帮助都会很棒。如果这篇文章有点磨损也很抱歉，这是我的第一篇。

这里是最终调用selectCard的函数

elements.packs.addEventListener("click", (e) => {
  const packID = e.target.closest(".pack").id;
  if (packID) {
    packsToUse(packID);

    // create black cards

    blackCardDisplay(packArr.blackCards);
  }
});

上面是前面提到的监听器，它调用下面的函数，它将调用selectCard。

export const blackCardDisplay = data => {

    const card = `
        <div class="cards card--black">
            <h1 class="card--black-text card--text">${selectCard(data)}</h1>
        </div>
    `;

}

这是按下两个按钮后的输出。该数组应该包含两个元素，但在这种情况下它只显示一个。但是，当我展开数组时，它显示的长度为 2 而不仅仅是 1。

Console image of two button clicks

编辑：在阅读了一些 cmets 之后，我意识到我忘了提到 blackCards 的内容是一个数组。所以我在一个数组中有一个数组。

【问题讨论】：

能否请包含调用您的selectCard 函数的代码？我们可能需要看看它是如何被调用的
在记录数组时对数组进行字符串化并检查它的长度。这将为您提供它的快照视图。当您记录整个数组对象时，控制台将反映您在记录后对其所做的更改......它不是快照。见stackoverflow.com/questions/23429203/…
这听起来像是在 ajax 完成之前记录它，因为它是异步的
@charlietfl 我在 ajax 调用中添加了一个异步等待，但仍然得到一个空数组。我想指出，我仍然可以在不等待 ajax 调用的情况下使用这些项目，它只是在 selectCard 函数中我不能，或者至少我不能在第一个按钮单击时使用。

标签： javascript arrays object javascript-objects

【解决方案1】：

因此，在阅读了一些 cmets 之后，我决定实施 @charlietfl 的评论，即数组可能在 ajax 调用完成之前被控制台记录。虽然这并没有明确解决问题，但它让我走上了解决问题的正确轨道。

我是这样解决这个问题的：

我在 ajax 调用完成之前获取了关于控制台日志完成的 cmets，并从那里进行了一些研究，发现了这篇非常简单的文章：

https://www.programmersought.com/article/26802083505/

本文中是一个使用setTimeout() 方法的示例。

这是我的问题的最终解决方案。

export const selectCard = arr => {
    const randomArr = Math.floor(Math.random() * arr.length);

    setTimeout(() => {
        console.log(arr.length);
        console.log(arr)
    }, 1000);
}

这是在第一次按下按钮时添加setTimeout() 方法后的输出。

Image of solved array length and array console log

我不知道这是否是该问题的最佳解决方案，因为过去我看到有些人不赞成使用此方法，但它适用于我目前正在做的事情。如果有人有更好的方法来解决这个问题，我很想听听！

【讨论】：