Question

下面是一个包含对象的函数，我希望能够使用参数访问对象中的特定主体，即使用索引。

问题是，当我尝试以这种方式访问属性时，我得到了

未定义

当控制台记录它时。我做错了什么？

moveLeftBtn.on('click', function(nr){
    var theBody = {
        bodies: {
            a: 'foo1',
            b: 'foo2',
            c: 'foo3'
        }
    };

    var newBody = theBody.bodies[1];    // temporarily hardcoded value instead of argument
    console.log(newBody);    // <-- undefined, why?

    return newBody;
});

修改

如果我登录日志theBody.bodies我可以看到它的值（Object {a: Array[5], b: Array[5], c: Array[5]}），但是当我尝试使用[1]访问它的属性时，我得到了

未定义

（即使属性包含字符串）。

Answer 1

我在您的代码中看到的唯一问题是您没有返回任何内容。改变。。

var newBody = theBody.bodies[nr];

。。。至。。

return theBody.bodies[nr];

。。。你应该好好去。

修改：哦，在定义;后，您也错过了theBody。

Answer 2

theBody.bodies是一个对象，其中包含三个名为a，b和c的属性。您没有给它任何名为1的属性。这就是theBody.bodies[1]的值为undefined的原因。如果您引用theBody.bodies['b']，则会找到您期望的某个属性，其值为'foo1'。

听起来你只需要阅读JavaScript数组和对象以及它们的工作原理。不要基于您在其他语言中使用的“关联数组”之类的内容做出任何假设。 JavaScript是一种自己的语言，有自己的做事方式，所以你只需要学习它们。

Answer 3

theBody.bodies不是数组而是普通对象。通常，您无法使用数字索引访问普通对象的字段。

但你可以通过定义theBody.bodies这样的对象来解决它：

var theBody = {
    bodies: {
        '0': 'foo1',
        '1': 'foo2',
        '2': 'foo3'
    }
}

以这种方式定义bodies会有theBody.bodies[1] === 'foo2'。

如果您因任何原因无法更改bodies，则可以处理它并创建另一个对象，您可以使用数字索引访问哪些字段 - 如下所示：

var newBodies = [], i = 0, j;
for (j in theBody.bodies) {
    newBodies.push(theBody.bodies[j]);
}

如果theBody.bodies并非总是普通对象（例如某种类型的实例）而不是for循环，则应使用$.each或for循环进行迭代应该通过hasOwnProperty检查来延长。

Answer 4

索引在Firefox上很有用，但我不了解其他浏览器。您将不得不为索引检查添加更多逻辑。您不应该通过索引访问对象，因为属性的顺序可能会更改，您应将它们视为地图或集合而不是索引列表。

我在此示例的所有对象上附加了getByIndex()函数。您可以创建自己的对象并将函数附加到它。

这是我制作的JSFiddle，它适用于您需要它做的事情：http://jsfiddle.net/zKrbr/4/

Object.prototype.getByIndex = function (property, index) {
    var n = 0;
    if (this.hasOwnProperty(property)) {
        for (var prop in this[property]) {
            if (n == index) {
                console.log('Found Match: '+prop+': '+this[property][prop]);
                return this[property][prop];
            } else {
                n++;
            }
        }
    }
    return undefined;
}

$('#moveLeft').on('click', function (nr) {
    var theBody = {
        bodies: {
            a: 'foo1',
            b: 'foo2',
            c: 'foo3'
        }
    };
    var index = parseInt($('#input').val());
    var currIndex = !isNaN(index) ? index : 0;
    var newBody = theBody.getByIndex('bodies', currIndex);
    $('#output').val(newBody);
});

<strong>Index:<strong>
<input type="text" id="input" size="3"/>
<input type="button" id="moveLeft" value="Move Left" />
<input type="text" id="output" />

使用索引访问对象属性会给出undefined

4 个答案: