函数无法使用从地址栏解析的字符串作为参数

Question

我正在重建一个网站，其中包含对格斗游戏《铁拳 7 》中角色的基本介绍。我已将所有角色及其数据存储为对象，并设置了一个函数来在网页上显示角色的数据，并接受该角色的名称作为其唯一参数。/* DECLARATIONS */// Profilelet charName = document.getElementById("char-name");let charNickname = document.getElementById("nickname");let charFlag = document.getElementById("flag");let charImg = document.getElementById("image");lt charAge = document.getElementById("age");let charCountry = document.getElementById("country");let charFightingStyle = document.getElementById("fighting-style");let charDebut = document.getElementById("first-appearance");// Scoreslet charOffense = document.getElementById("offense");let charDefence = document.getElementById("defence");let charRange = document.getElementById("range");let charPunishment = document.getElementById("punishment");let charGimmicks = document.getElementById("gimmicks");let charExecution = document.getElementById("execution");let charHurtbox = document.getElementById("hurtbox");// Playstyle and Introlet charPlaystyle = document.getElementById("playstyle");let charIntro = document.getElementById("introduction");/* DISPLAY FUNCTION */const display = character => {    charName.innerHTML = character.name;    charNickname.innerHTML = character.nickname;    charFlag.src = character.flag;    charImg.src = character.image;    charAge.innerHTML = character.age;    charCountry.innerHTML = character.country;    charFightingStyle.innerHTML = character.fightingStyle;    charDebut.innerHTML = character.debut;}该代码从地址栏中解析出“view”参数，并将其作为参数返回给函数。例如，如果地址栏有 URL .../guides/character.html?view=jin，理想情况下，代码应该解析该jin值并将其作为参数传回函数以显示 this。我什至用 测试了这个char参数，console.log看看这个值是否顺利传递并且jin按预期打印。但是，当代码自行运行时，它无法以某种方式使用该值作为参数，而是传回一个未定义的对象，控制台显示GET [file path]/guides/undefined net::ERR_FILE_NOT_FOUND如下所示的错误消息。谁能帮我理解为什么会这样？我仍在学习 JavaScript 的一些内部工作原理，所以我完全被难住了。

Answer 1

你非常接近这个正确。我相信您面临的问题是您希望字符串 of"jin"引用您的const jin. 然而，这并不是 JS 渲染引擎的工作方式——字符串 of"jin"只是作为字符串传递，这就是为什么你的所有值都显示为未定义——因为字符串"jin"没有你正在寻找的任何属性。

这将记录传递的字符串"jin"，然后是几个undefined：

const jin = {

    // Profile

    name: "Jin Kazama",

    nickname: "The Child of Destiny",

    flag: "../img/flagicons/japan.svg",

    image: "../img/characters/jin.png",

    age: 21,

    country: "Japan",

    fightingStyle: "Traditional karate",

    debut: "<em>Tekken 3</em>",

    // Scores

    offense: 9,

    defence: 10,

    range: 8,

    punishment: 8,

    gimmicks: 3,

    execution: 3,

    hurtbox: 3,

    // Playstyle

    playstyle: "Versatile, keep-out, Mishima",

    introduction: "<p>Versatile character who performs at his best in the mid-range, armed with good poking, great counter hit tools, great damage output, variety in his throws and a unique parry that deals with all highs and mids except projectiles (fireballs). While his Mishima-style tools are not quite as effective as those of the out-and-out Mishima characters, he makes up for it with other situational moves that plug those weaknesses. He does, however, lack range on a few key punishers.</p>",

};

const display = character => {

    console.log(character);

    console.log(character.name);

    console.log(character.nickname);

    console.log(character.flag);

    console.log(character.image);

    console.log(character.age);

    console.log(character.country);

    console.log(character.fightingStyle);

    console.log(character.debut);

    console.log(character.offense);

    console.log(character.defence);

    console.log(character.range);

    console.log(character.punishment);

    console.log(character.gimmicks);

    console.log(character.execution);

    console.log(character.hurtbox);

    console.log(character.playstyle);

    console.log(character.introduction);

}

display('jin');

那么如何解决呢？最有可能的最简单方法是创建一个名为 的巨型配置对象characters，其中包含每个角色名称的属性，其中包含一个具有所有属性的对象。通过使用对象，您可以通过字符串引用字符来获取具有所有属性的对象：

显示整个对象，然后是各个统计信息/属性：

const characters ={

    jin: {

        // Profile

        name: "Jin Kazama",

        nickname: "The Child of Destiny",

        flag: "../img/flagicons/japan.svg",

        image: "../img/characters/jin.png",

        age: 21,

        country: "Japan",

        fightingStyle: "Traditional karate",

        debut: "<em>Tekken 3</em>",

        // Scores

        offense: 9,

        defence: 10,

        range: 8,

        punishment: 8,

        gimmicks: 3,

        execution: 3,

        hurtbox: 3,

        // Playstyle

        playstyle: "Versatile, keep-out, Mishima",

        introduction: "<p>Versatile character who performs at his best in the mid-range, armed with good poking, great counter hit tools, great damage output, variety in his throws and a unique parry that deals with all highs and mids except projectiles (fireballs). While his Mishima-style tools are not quite as effective as those of the out-and-out Mishima characters, he makes up for it with other situational moves that plug those weaknesses. He does, however, lack range on a few key punishers.</p>",

    }

};

const display = character => {

    console.log(character);

    console.log(character.name);

    console.log(character.nickname);

    console.log(character.flag);

    console.log(character.image);

    console.log(character.age);

    console.log(character.country);

    console.log(character.fightingStyle);

    console.log(character.debut);

    console.log(character.offense);

    console.log(character.defence);

    console.log(character.range);

    console.log(character.punishment);

    console.log(character.gimmicks);

    console.log(character.execution);

    console.log(character.hurtbox);

    console.log(character.playstyle);

    console.log(character.introduction);

}

display(characters['jin']);