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

时间:2013-06-13 19:36:15

标签: javascript jquery arrays object properties

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

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

  

未定义

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

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]访问它的属性时,我得到了

  

未定义

(即使属性包含字符串)。

4 个答案:

答案 0 :(得分:1)

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

var newBody = theBody.bodies[nr];

。 。 。至 。 。

return theBody.bodies[nr];

。 。 。你应该好好去。

修改:哦,在定义;后,您也错过了theBody

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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循环,则应使用$.eachfor循环进行迭代应该通过hasOwnProperty检查来延长。

答案 3 :(得分:0)

索引在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" />