JavaScript说数组是空的，即使其中有字符串

我有一个要使用的字符串数组。但是，当我使用forEach函数时，它会运行0次。另外，当我打印数组的大小时，JS说它是空的。但是当我在控制台中打印数组时，我可以看到其中有字符串。这可能是什么原因造成的

从“./KanjiDrawing/kanji painter original”导入{drawKanji}；
需要（'../css/kanji.css'）；
window.onload=addAllKanji；
var allSVGElements=[]；
异步函数addAllKanji（）{
让文件名=[“0f9a8”、“064e3”、“05ae1”、“05afa”、“062ac”、“062c8”]；
等待fileNames.forEach（函数（文件名）{
获取汉字（文件名）；
});
addKanjiToHTML（）；
日文汉字（）；
}
函数获取汉字（名称）{
取回(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`{
方法：“获取”，
}).然后（响应=>drawSVG（响应））
.catch（错误=>{
投掷误差；
});
}
异步函数drawSVG（svg）{
让svgRawText=等待svg.text（）；
svgRawText=svgRawText.replace（/[\s\s]*（？=）如果您运行的代码运行正常

let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    await fileNames.forEach(function (fileName) {
       console.log(fileName);
    });

您错误地使用了async/Wait-请参阅下面代码中的注释

var allSVGElements = [];

async function addAllKanji(){
    let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    // change to Promise.all
    return await Promise.all(fileNames.map(function (fileName) {
        // return something
        return fetchKanji(fileName);
    }));
}

function fetchKanji(name){
    // return the promise
    return fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`,{
        method: "GET",
    }).then(response => drawSVG(response))
        .catch(error => {
            throw error;
        });
}

async function drawSVG(svg) {
    let svgRawText = await svg.text();
    svgRawText = svgRawText.replace(/[\s\S]*(?=<svg)/,"");
    allSVGElements.push(svgRawText);
}

//doesn't need to be async
function addKanjiToHTML() {
    console.log("length: "+allSVGElements.length);
    console.log(allSVGElements);
    console.log("length: "+allSVGElements.length);
    allSVGElements.forEach(function (ele) {
       console.log(ele);
       console.log("running forEach")
    });
}

看不到异步/等待：p

虽然有些人发现

let fetchKanji = async (name) => {
    const response = await fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`, {method: "GET"});
    const svgRawText = await response.text();
    return svgRawText.replace(/[\s\S]*(?=<svg)/,"");
};

让fetchKanji=async（name）=>{
const response=等待获取(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`，{method:“GET”}）；
const svgRawText=wait response.text（）；
返回svgRawText.replace（/[\s\s]*（？=这是我的想法

let
&
await
仅在
异步函数中起作用。它不适用于全局函数，这意味着它们无法访问诸如“fetchKanji（name）”之类的全局函数。修复此问题并重试。
不应该等待
fetchKanji
方法吗？否则，您只需在不等待响应被处理的情况下触发一系列请求，在将SVG添加到数组之前有效地绘制SVG。同样，您不能只等待
a
forEach
。使用类似的方法e
wait Promise.all（fileNames.map（异步函数（）{…}））
更改此项似乎不会更改结果。
等待文件名。forEach
这是新语法吗？看起来是错误的。但是，您确实意识到，
fetchKanji
无论如何都不会返回任何内容，
异步函数addKanjiToHTML
是毫无意义的，因为该函数没有等待，也没有异步的功能谢谢您u供您输入。异步函数和wait的使用不正确可能是问题所在。您知道怎么做吗？我想获取所有svg文件，并将它们合并成一个大字符串。谢谢您的帮助。从脱机应用程序编程开始，整个异步概念很难掌握。@NikolajBjerregaard-我刚刚添加了第三个备选方案——老实说，我认为尝试使用async/await（这是承诺的语法）在这种情况下，实际上使您的代码更加复杂-尽管这只是我的观点：我明白了，我非常喜欢等待，因为它感觉像是同步编程，在任务完成之前它不会继续。我的go-to方法只是尝试等待我认为可能是异步的所有内容。但正如这里所示，这并不是一个很好的方法做事情……好吧，我确实添加了另一个选择：p
let fetchKanji = name => fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`, {method: "GET"})
    .then(response => response.text())
    .then(svgRawText => svgRawText.replace(/[\s\S]*(?=<svg)/,""));

function addAllKanji() {
    let fileNames = ["0f9a8","064e3","05ae1","05afa","062ac","062c8"];
    return Promise.all(fileNames.map(fetchKanji));
}


addAllKanji().then(allSVGElements => {
    console.log("length: "+allSVGElements.length);
    console.log(allSVGElements);
    console.log("length: "+allSVGElements.length);
    allSVGElements.forEach(ele => {
       console.log(ele);
       console.log("running forEach")
    });
});

let fetchKanji = async (name) => {
    const response = await fetch(`http://localhost:8080/public_html/static/kanjiSVG/${name}.svg`, {method: "GET"});
    const svgRawText = await response.text();
    return svgRawText.replace(/[\s\S]*(?=<svg)/,"");
};