ES12 中的 for-in 循环问题及解决方案

ES12 中的 for-in 循环问题及解决方案

在 ES12 （JavaScript 的最新版本）中，我们发现 for-in 循环遇到了一些问题。特别是在处理对象的情况下，原有的 for-in 循环可能会出现意料之外的结果，导致代码出现难以排查的问题。本文将介绍这些问题的具体表现，及其解决方案。

ES12 for-in 循环问题的具体表现

在 ES12 版本中，for-in 循环的行为与ES11一样，只不过加入了一些特性，例如：排除Symbol类型的属性。但在处理对象时，如果对象的原型链上的属性也会被遍历，这往往会导致出现错误的结果。

例如，下面的代码会输出 obj2 中的属性和 obj1 中添加的属性。

let obj1 = {x: 1, y: 2};
let obj2 = {z: 3};
Object.setPrototypeOf(obj2, obj1);

for (const key in obj2) {
    console.log(key);
}

输出结果为：

z
x
y

可以看到，在遍历 obj2 的时候，该对象原型链上的属性也被遍历了。这种情况往往会导致代码出现错误的结果，特别是在处理对象时，更是需要注意。

ES12 for-in 循环问题的解决方案

为了解决对象原型链上的属性被遍历的问题，我们可以使用ES12中的 Object.getOwnPropertyNames() 方法，结合 for-of 循环，来遍历对象的自身属性。

下面的代码，将只会遍历 obj2 的自身属性。

let obj1 = {x: 1, y: 2};
let obj2 = {z: 3};
Object.setPrototypeOf(obj2, obj1);

for (const key of Object.getOwnPropertyNames(obj2)) {
    console.log(key);
}

输出结果为：

z

如果我们想要遍历对象原型链上的属性，可以使用 ES12 中的 Reflect.ownKeys() 方法，该方法会遍历对象自身的属性和从原型链继承来的属性。

下面的代码，将会遍历 obj2 自身属性和 obj1 继承来的属性。

let obj1 = {x: 1, y: 2};
let obj2 = {z: 3};
Object.setPrototypeOf(obj2, obj1);

for (const key of Reflect.ownKeys(obj2)) {
    console.log(key);
}

输出结果为：

z
x
y

结语

通过了解 ES12 中的 for-in 循环问题及解决方案，我们可以更加精确地遍历对象的自身属性和原型链上的属性。在开发过程中，特别是在处理对象的情况下，需要特别注意该问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7aad7306f20b3a64c628c