JavaScript object literal length === undefined?

问题:

I am working on this animation function but I have a problem. I can't seem to perform what should be an easy task, I can not get the length of an object. If you check out that jsFiddle you can see that I am running alert(properties.length); and it is returning undefined. Can anyone see why this might be?

回答1:

JavaScript object simply do not have a length property, only Arrays do. If you want to know the number of properties that are defined on a object, you have to iterate over them and count them.

Also, your for in loop is prone to bugs due extension of Object.prototype since in will traverse the complete prototype chain and enumerate all the properties that are on the chain.

Example

// Poisoning Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // logs both 'moo' AND 'bar'
}

You have to use the hasOwnProperty method on the object in order to filter out those unwanted properties.

// still the foo from above
for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i); // only logs 'moo'
    }
}

Many JavaScript frameworks out there extend the prototype, not using hasOwnProperty often leads to horrible bugs.

Update

Concerning the actual problem that your code is not animation both properties.

for(var p in properties) {
    ...
    for(var i = 0; i <= frames; i++)
    {
        setTimeout((function(exti, element) {
            return function() {

                // p gets overriden by for outer for in loop
                element.style[p] = original + (pixels * exti) + 'px';
            }

        // you need to pass in a copy of the value of p here
        // just like you do with i and element
        })(i, element), i * (1000 / 60), element);
    }
    ....
 }

回答2:

This is supported in node.js and newer environments.

var obj = {a: "a", b: "b"};
Object.keys(obj).length // 2

回答3:

If you are using Underscore.js, you can use _.size():

_.size({one : 1, two : 2, three : 3});
=> 3

回答4:

Objects have no length, you'll need to use an array if you want that.

If you have to find the number of properties in an object there is only one way:

var length =0;
for(var i in obj) length++;

回答5:

Here's @Junaid Qadir Shekhanzai's general function for "finding the length of an object" (which as we're told, should properly be called "counting the properties of an object"). It combines solutions from @Ivo Wetzel and @Martin Jespersen:

function countProperties(myObj){
    var length = 0;
    if(typeof myObj != 'object'){
        return false;
    }
    for(var i in myObj) {
    length++;
    }
    return length;
}