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

Question

我正在重建一个网站，其中包含对格斗游戏《铁拳 7 》中角色的基本介绍。我已将所有角色及其数据存储为对象，并设置了一个函数来在网页上显示角色的数据，并接受该角色的名称作为其唯一参数。

/* DECLARATIONS */

// Profile

let 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");

// Scores

let 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 Intro

let 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 = {&nbsp; &nbsp; // Profile&nbsp; &nbsp; name: "Jin Kazama",&nbsp; &nbsp; nickname: "The Child of Destiny",&nbsp; &nbsp; flag: "../img/flagicons/japan.svg",&nbsp; &nbsp; image: "../img/characters/jin.png",&nbsp; &nbsp; age: 21,&nbsp; &nbsp; country: "Japan",&nbsp; &nbsp; fightingStyle: "Traditional karate",&nbsp; &nbsp; debut: "<em>Tekken 3</em>",&nbsp; &nbsp; // Scores&nbsp; &nbsp; offense: 9,&nbsp; &nbsp; defence: 10,&nbsp; &nbsp; range: 8,&nbsp; &nbsp; punishment: 8,&nbsp; &nbsp; gimmicks: 3,&nbsp; &nbsp; execution: 3,&nbsp; &nbsp; hurtbox: 3,&nbsp; &nbsp; // Playstyle&nbsp; &nbsp; playstyle: "Versatile, keep-out, Mishima",&nbsp; &nbsp; 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 => {&nbsp; &nbsp; console.log(character);&nbsp; &nbsp; console.log(character.name);&nbsp; &nbsp; console.log(character.nickname);&nbsp; &nbsp; console.log(character.flag);&nbsp; &nbsp; console.log(character.image);&nbsp; &nbsp; console.log(character.age);&nbsp; &nbsp; console.log(character.country);&nbsp; &nbsp; console.log(character.fightingStyle);&nbsp; &nbsp; console.log(character.debut);&nbsp; &nbsp; console.log(character.offense);&nbsp; &nbsp; console.log(character.defence);&nbsp; &nbsp; console.log(character.range);&nbsp; &nbsp; console.log(character.punishment);&nbsp; &nbsp; console.log(character.gimmicks);&nbsp; &nbsp; console.log(character.execution);&nbsp; &nbsp; console.log(character.hurtbox);&nbsp; &nbsp; console.log(character.playstyle);&nbsp; &nbsp; console.log(character.introduction);}display('jin');那么如何解决呢？最有可能的最简单方法是创建一个名为 的巨型配置对象characters，其中包含每个角色名称的属性，其中包含一个具有所有属性的对象。通过使用对象，您可以通过字符串引用字符来获取具有所有属性的对象：显示整个对象，然后是各个统计信息/属性：const characters ={&nbsp; &nbsp; jin: {&nbsp; &nbsp; &nbsp; &nbsp; // Profile&nbsp; &nbsp; &nbsp; &nbsp; name: "Jin Kazama",&nbsp; &nbsp; &nbsp; &nbsp; nickname: "The Child of Destiny",&nbsp; &nbsp; &nbsp; &nbsp; flag: "../img/flagicons/japan.svg",&nbsp; &nbsp; &nbsp; &nbsp; image: "../img/characters/jin.png",&nbsp; &nbsp; &nbsp; &nbsp; age: 21,&nbsp; &nbsp; &nbsp; &nbsp; country: "Japan",&nbsp; &nbsp; &nbsp; &nbsp; fightingStyle: "Traditional karate",&nbsp; &nbsp; &nbsp; &nbsp; debut: "<em>Tekken 3</em>",&nbsp; &nbsp; &nbsp; &nbsp; // Scores&nbsp; &nbsp; &nbsp; &nbsp; offense: 9,&nbsp; &nbsp; &nbsp; &nbsp; defence: 10,&nbsp; &nbsp; &nbsp; &nbsp; range: 8,&nbsp; &nbsp; &nbsp; &nbsp; punishment: 8,&nbsp; &nbsp; &nbsp; &nbsp; gimmicks: 3,&nbsp; &nbsp; &nbsp; &nbsp; execution: 3,&nbsp; &nbsp; &nbsp; &nbsp; hurtbox: 3,&nbsp; &nbsp; &nbsp; &nbsp; // Playstyle&nbsp; &nbsp; &nbsp; &nbsp; playstyle: "Versatile, keep-out, Mishima",&nbsp; &nbsp; &nbsp; &nbsp; 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>",&nbsp; &nbsp; }};const display = character => {&nbsp; &nbsp; console.log(character);&nbsp; &nbsp; console.log(character.name);&nbsp; &nbsp; console.log(character.nickname);&nbsp; &nbsp; console.log(character.flag);&nbsp; &nbsp; console.log(character.image);&nbsp; &nbsp; console.log(character.age);&nbsp; &nbsp; console.log(character.country);&nbsp; &nbsp; console.log(character.fightingStyle);&nbsp; &nbsp; console.log(character.debut);&nbsp; &nbsp; console.log(character.offense);&nbsp; &nbsp; console.log(character.defence);&nbsp; &nbsp; console.log(character.range);&nbsp; &nbsp; console.log(character.punishment);&nbsp; &nbsp; console.log(character.gimmicks);&nbsp; &nbsp; console.log(character.execution);&nbsp; &nbsp; console.log(character.hurtbox);&nbsp; &nbsp; console.log(character.playstyle);&nbsp; &nbsp; console.log(character.introduction);}display(characters['jin']);