JavaScript 对象未定义答案

【问题标题】：JavaScript Object is Not DefinedJavaScript 对象未定义
【发布时间】：2015-04-30 04:05:23
【问题描述】：

我正在为自己的视频游戏制作一个小程序。问题是当它说页面中的错误时，它会读取某些未定义的对象。

$(document).ready(function(){
        //A roster for all character choices.
        var roster = {
            Riven:{name: "Riven", rival: Jax, rival2: Pantheon}, 
            Pantheon:{name: "Pantheon", rival: Olaf, rival2: Darius},
            Veigar:{name: "Veigar", rival: Akali, rival2: Fizz},
            Olaf:{name: "Olaf", rival: Kayle, rival2: Kennen},
            Jax:{name: "Jax", rival: Malphite, rival2: Pantheon},
            Akali:{name: "Akali", rival: Garen, rival2: LeeSin},
            Malphite:{}, 
            Darius:{}, 
            LeeSin:{}, 
            Garen:{}, 
            Kayle:{},
            Fizz:{},
        };

它说对象 Darius 没有在 Pantheon 的对象中定义，或者我在这段代码之后引用 Darius 的任何时候。但是，定义了 Olaf、Akali 和任何拥有完整对象属性列表的人。我尝试将这些属性放入正在读取的未定义对象中，但这不起作用。我是 JavaScript 新手，我不知道该怎么做。如果它是相关的，我会在我的 HTML 代码中之前的脚本中调用 jQuery 库。

【问题讨论】：

可能是您没有关闭文档就绪功能}）。
对象属性键不是变量。您可以随时创建任意命名的属性，但不能像在嵌套对象中那样使用该属性名称作为变量
只是一个小问题 - 为什么 Jax 不是 Pantheon 的竞争对手之一？
@JonMarkPerry 没有理由。只是试图让代码工作。 :)

标签： javascript jquery html arrays object

【解决方案1】：

正如@charlietfl 在评论中提到的，您尚未定义名为Jax 的变量。在roster被定义后，你可以引用roster.Jax，但是在你定义完对象之前你不能引用它，因为在那之前roster仍然是未定义的。

你必须这样做：

    var roster = {
        Riven:{name: "Riven"}, 
        Pantheon:{name: "Pantheon"},
        Veigar:{name: "Veigar"},
        Olaf:{name: "Olaf"},
        Jax:{name: "Jax"},
        Akali:{name: "Akali"},
        Malphite:{}, 
        Darius:{}, 
        LeeSin:{}, 
        Garen:{}, 
        Kayle:{},
        Fizz:{},
    };

然后像这样分配对手：

roster.Riven.rival = roster.Jax;

那将是一团糟，所以我将从如下所示的数组开始。（注意 rival 和 rival2 属性此时只是名称（字符串）。）

var characters = [
    { name: 'Riven', rival: 'Jax', rival2: 'Pantheon' },
    { name: 'Pantheon', rival: 'Olaf', rival2: 'Darius' },
    { name: 'Veigar', rival: 'Akali', rival2: 'Fizz' },
    { name: 'Olaf', rival: 'Kayle', rival2: 'Kennen' },
    { name: 'Jax', rival: 'Malphite', rival2: 'Pantheon' },
    { name: 'Akali', rival: 'Garen', rival2: 'LeeSin' },
    { name: 'Malphite' },
    { name: 'Darius' },
    { name: 'LeeSin' },
    { name: 'Garen' },
    { name: 'Kayle' },
    { name: 'Fizz' }
];

然后，您可以通过执行以下操作从数组中创建名册对象。（此时rival 和rival2 属性仍然只是名称（字符串）。）

var roster = {};
characters.forEach(function(character) {
    roster[character.name] = character;
});

如果您真的希望 rival 和 rival2 属性成为对象引用而不仅仅是名称，您可以使用以下代码对其进行转换。

characters.forEach(function(character) {
    character.rival = roster[character.rival];
    character.rival2 = roster[character.rival2];
});

如果你想支持两个以上的竞争对手：jsfiddle

【讨论】：

【解决方案2】：

也许如果您拆分对象的声明：

// here is an empty or a default setting, just to avoid
// an undefined exception
var roster = {
            Malphite:{}, 
            Darius:{}, 
            LeeSin:{}, 
            Garen:{}, 
            Kayle:{},
            Fizz:{},
        };

然后是其他属性：

// here's the real declaration
roster = {
            Riven:{name: "Riven", rival: roster.Jax, rival2: roster.Pantheon}, 
            Pantheon:{name: "Pantheon", rival: roster.Olaf, rival2: roster.Darius},
            Veigar:{name: "Veigar", rival: roster.Akali, rival2: roster.Fizz},
            Olaf:{name: "Olaf", rival: roster.Kayle, rival2: roster.Kennen},
            Jax:{name: "Jax", rival: roster.Malphite, rival2: roster.Pantheon},
            Akali:{name: "Akali", rival: roster.Garen, rival2: roster.LeeSin},
            Malphite:{}, 
            Darius:{}, 
            LeeSin:{}, 
            Garen:{}, 
            Kayle:{},
            Fizz:{},
        };

在访问对象的属性之前注意roster. 前缀

【讨论】：