The Object.keys() method works fine for me with code like this:
var foo = {foo: 1, bar: 2};
console.log(Object.keys(foo).length);
However, Object.keys() returns a zero-length array for built-in objects with code like this:
<!doctype html>
<html>
<head>
<title>Object.keys()</title>
</head>
<body>
<script type="text/javascript">
console.log(Object.keys(window.document).length);
</script>
</body>
</html>
Am I missing something? I'm using Internet Explorer 9.0.8112.16421.
Postscript: I'm still not clear why this (for example):
for (prop in performance.timing) {
if (performance.timing.hasOwnProperty(prop)) {
console.log(prop);
}
}
...produces nothing in IE9, whereas this works fine:
for (prop in performance.timing) {
console.log(prop);
}
The Object.keys() method works fine for me with code like this:
var foo = {foo: 1, bar: 2};
console.log(Object.keys(foo).length);
However, Object.keys() returns a zero-length array for built-in objects with code like this:
<!doctype html>
<html>
<head>
<title>Object.keys()</title>
</head>
<body>
<script type="text/javascript">
console.log(Object.keys(window.document).length);
</script>
</body>
</html>
Am I missing something? I'm using Internet Explorer 9.0.8112.16421.
Postscript: I'm still not clear why this (for example):
for (prop in performance.timing) {
if (performance.timing.hasOwnProperty(prop)) {
console.log(prop);
}
}
...produces nothing in IE9, whereas this works fine:
for (prop in performance.timing) {
console.log(prop);
}
1 Answer
Reset to default 5In JavaScript, there are native objects and host objects. In general, you can rely on things like Object.keys working with native objects, but not with host objects. window, document, and others are host objects. IE in particular is well-known for its host objects not being native-like (host functions don't have the call or apply feature, etc.).
Alternately, of course, it could be that document has no enumerable properties. Most of the default properties of objects are non-enumerable and so don't show up in Object.keys. For instance, Object.keys([]).length and Object.keys(new RegExp(".*")).length are both 0 because neither has any enumerable properties even though they both have lots of properties (they have properties for all of their "methods", and of course the blank array has a length property and the RegExp has a lastIndex property).
Update: And in fact, it was the enumerable thing. Try this test:
alert(Object.keys(window.document).length);
window.document.AAA__expando__property = "foo";
alert(Object.keys(window.document).length);
For me, on IE9, those alerts are "0" and "1", respectively. So window.document supports Object.keys, it's just that window.document doesn't, by default, have any enumerable properties. (In contrast, on Chrome I get 65 enumerable properties to start with, and of course 66 once I've added my expando.)
Here's a rather more full test page (live copy) (hacked-together quickly, not a thing of beauty):
window.onload = function() {
document.getElementById('theButton').onclick = function() {
if (typeof Object.keys !== 'function') {
display("<code>Object.keys</code> is not a function");
return;
}
showKeys("Before adding", Object.keys(window.document));
window.document.AAAA__expando__foo = "bar";
showKeys("After adding", Object.keys(window.document));
};
function showKeys(prefix, keys) {
var p, ul;
keys.sort();
prefix =
"[" + prefix +
"] Keys on <code>window.document</code> (" +
keys.length +
")";
if (keys.length !== 0) {
prefix += " (click to toggle list)";
}
p = display(prefix);
if (keys.length !== 0) {
ul = document.createElement("ul");
ul.innerHTML = "<li>" + keys.join("</li><li>") + "</li>";
ul.style.display = "none";
document.body.appendChild(ul);
p.onclick = function() {
ul.style.display =
(ul.style.display === "none") ? "" : "none";
};
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
return p;
}
};