JavaScript 对象字面量长度 === 未定义？答案

【问题标题】：JavaScript object literal length === undefined?JavaScript 对象字面量长度 === 未定义？
【发布时间】：2011-06-09 02:21:00
【问题描述】：

我正在处理这个animation function，但我有一个问题。我似乎无法完成本应轻松的任务，我无法获得对象的长度。如果您查看 jsFiddle，您可以看到我正在运行 alert(properties.length);，它正在返回 undefined。谁能明白为什么会这样？

【问题讨论】：

Length of Javascript Associative Array的可能重复

标签： javascript object properties object-literal

【解决方案1】：

这在 node.js 和更新的环境中受支持。

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

【讨论】：

IE8 不支持，developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

JavaScript 对象只是没有有length 属性，只有Arrays 有。如果您想知道在对象上定义的属性的数量，您必须遍历它们并计算它们。

此外，您的 for in 循环由于 Object.prototype 的扩展而容易出现错误，因为 in 将遍历完整的 原型链 并枚举所有上的属性链条。

示例

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

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

您必须在对象上使用hasOwnProperty 方法才能过滤掉那些不需要的属性。

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

许多 JavaScript 框架扩展了原型，不使用 hasOwnProperty 经常会导致可怕的错误。

更新

关于你的代码不是动画两个属性的实际问题。

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);
    }
    ....
 }

【讨论】：

如果你扩展 object.prototype，同样数量的很多库（比如 jQuery）将会崩溃，所以如果你使用其中的一个，hasOwnProperty 只会浪费 CPU 周期。跨度>
@Martin Jespersen 因此，您出售的代码上印有“警告只能与框架 A、B 和 C 一起使用”？抱歉，但使用 hasOwnProperty* 是一个好习惯。
不，我只是厌倦了一个充满 javascript 代码的网络，它远未优化，甚至 chrome 都在它上面窒息，然后，我想我应该感谢，因为我赚钱清理其他人造成的混乱：P
@Martin 那就不要再使用 jQuery 了，它充满了对 hasOwnProperty 的调用。您正在做的是过早优化，仅此而已。
@Wofly 你也需要将p 传递到动画包装器中，就像i 和element 因为for in loop 将覆盖p。

【解决方案3】：

如果你使用Underscore.js，你可以使用_.size()：

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

【讨论】：

我还没有看到源代码，但我希望size() 考虑到hasOwnProperty。

【解决方案4】：

对象没有长度，如果需要，您需要使用数组。

如果您必须找到对象中的属性数量，那么只有一种方法：

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

【讨论】：

请使用 hasOwnProperty。
为什么，怎么做？ hasOwnProperty 在哪里适用？
最好不更新 Object.prototype？谁这样做？这实际上是一个很好的例子！
@IvoWetzel 一个例子将不胜感激。我在这里使用了 Martin Jespersen 的答案jsfiddle.net/jeykeu/qAH48 这是要走的路吗？

【解决方案5】：

这是@Junaid Qadir Shekhanzai 的“查找对象长度”的一般功能（正如我们所说，应该正确地称为“计算对象的属性”）。它结合了@Ivo Wetzel 和@Martin Jespersen 的解决方案：

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

【讨论】：