使用索引访问对象属性会给出未定义的 [关闭]

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" />