当排序很重要时，使用 for..in 迭代 JavaScript 对象属性和数组

发布于 2024-09-06 22:30:09 字数 1683 浏览 3 评论 0原文

这是一个古老的问题，我知道通常的问题在需要任何排序时不使用 for..in 甚至对象的原因，但我最近从 MDC 删除运算符。

跨浏览器问题
虽然 ECMAScript 使对象的迭代顺序依赖于实现，但似乎所有主要浏览器都支持基于最早添加的属性的迭代顺序（至少对于不在原型上的属性）。然而，就 Internet Explorer 而言，当对某个属性使用 delete 时，会产生一些令人困惑的行为，从而阻止其他浏览器将对象文字等简单对象用作有序关联数组。在资源管理器中，虽然属性值确实设置为未定义，但如果稍后添加回具有相同名称的属性，则该属性将在其旧位置进行迭代，而不是像人们在获得后所期望的那样在迭代序列的末尾进行迭代。删除该属性，然后将其添加回来。
因此，如果您想在跨浏览器环境中模拟有序关联数组，则必须使用两个单独的数组（一个用于键，另一个用于值），或者构建一个单一属性的数组物体等

大多数主要浏览器 - Chrome、Safari、Firefox 和 Opera 按插入顺序枚举对象属性。这是一个快速测试来确认这一点。它可能不适用于 IE，但不幸的是我无法访问 IE 来测试它。那么，假设我们不从对象中删除任何内容，那么在使用 for..in 迭代属性时，IE 是否也会保留顺序（6/7 以后）？

另外， for..in 是

有两种解决方案：

使用 hasOwnProperty 检查属性是否属于该对象

for(var index in object) {
    if(object.hasOwnProperty(index)) {
        ..
    }
}

使用新的 ES5 语法定义对象的属性并使它们不可枚举。这假设您可以完全控制基本原型的扩展，并且没有第 3 方代码直接在原型上添加任何内容。

Object.defineProperty(Array.prototype, "size", {
    enumerable: false,
    configurable: false,
    get: function() { return this.length; },
    set: undefined
});

如果满足上述所有条件，除非我遗漏了一些关键的东西，否则 for..in 也可以安全地用于数组迭代：

var values = [1, 2, 3];

for(var i in values) {
    values[i];
}

所以我想这又回到了最初的问题。不管规范怎么说，IE 是否支持任何版本的按插入顺序进行对象迭代？还有其他浏览器也不支持此功能吗？

原文

This has been an age old question and I am aware of the usual reasons for not using for..in or perhaps even objects when any sort of ordering is needed, but I recently came across this article from MDC on the delete operator.

Cross-browser issues
Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses delete on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property value is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its old position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.
So if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.

It appears that most major browsers - Chrome, Safari, Firefox, and Opera enumerate object properties in insertion order. This is a quick test to confirm that. It may not work on IE, but I don't have access to IE to test this out unfortunately. So does IE preserve ordering as well (6/7 onwards) when iterating through properties using for..in assuming we don't delete anything from the object?

Also, for..in is never recommended for iterating through arrays for the exact same reasons, and the fact that Array.prototype is more commonly tampered with than Object.prototype. However, if properties were actually enumerated in insertion order, then I suppose for..in can be used to loop over arrays as well, with the following gotcha - Properties listed on Array.prototype will be enumerated as well.

There are two solutions to this:

Check if property belongs to the object using hasOwnProperty

for(var index in object) {
    if(object.hasOwnProperty(index)) {
        ..
    }
}

Use the new ES5 syntax for defining properties on objects and make them non-enumerable. This assumes that you have full control over the extension to base prototypes, and no 3rd party code adds anything on the prototype directly.

Object.defineProperty(Array.prototype, "size", {
    enumerable: false,
    configurable: false,
    get: function() { return this.length; },
    set: undefined
});

If all the above conditions are met, and unless I am missing something crucial, for..in can be safely used for array iteration as well:

var values = [1, 2, 3];

for(var i in values) {
    values[i];
}

So I guess it's back to the original question. Disregarding what the spec says, does IE support object iteration in insertion order, for any versions? Are there any other browsers that don't support this as well.

分享到QQ

分享到微博