Javascript 如何将HTMLCollection转换为数组，而不清空它？

我试图将一个包含4个div的HTMLCollection转换成一个数组，但我尝试的每个方法似乎都会导致数组被清空

<div class="container">
        <div class="shape" id="one"></div>
        <div class="shape" id="two"></div>
        <div class="shape" id="three"></div>
        <div class="shape" id="four"></div>
</div>

如果有人能指出我的错误，我将不胜感激

谢谢。

尝试使用以下方法：

setTimeout(() => {
    this.convertToArray();
});

convertToArray() {
    const shapesHC = document.getElementsByClassName('shape');
    const shapesArrHCSpread = [...(shapesHC as any)];
    console.log(shapesArrHCSpread);
}

---

当我测试时，这三种方法都返回一个非空数组。也许您的问题在代码的其他地方？谢谢您的快速响应-这是我的全部代码。它只是一个html文件和一个js文件。代码中的JavaScript在哪里，在html的上面还是下面？如果它在你的HTML上面（在头部），那么这些元素在你的JavaScript运行之后才会被查询。阅读这个问题，看看它是否适用：是的，我的脚本标签在头部。现在我已经把它移到了身体的末端，效果很好。掌纹

setTimeout(() => {
    this.convertToArray();
});

convertToArray() {
    const shapesHC = document.getElementsByClassName('shape');
    const shapesArrHCSpread = [...(shapesHC as any)];
    console.log(shapesArrHCSpread);
}