javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript for...of和for...in循环

JavaScript中的for...of和for...in循环容易遇到的问题及解决方法总结

作者:冷月半明

在 JavaScript 编程中,for...of 和 for...in 是常用的循环语法,但它们在使用时可能会引发一些意想不到的问题,本文将分享我在使用这两种循环时所遇到的坑和经验,需要的朋友可以参考下

两者的区别:

示例代码演示两者的不同用法:

// for...of 遍历数组
const arr = [1, 2, 3, 4];
for (const element of arr) {
    console.log(element); // 输出数组的每个元素
}
// for...in 遍历对象的属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key);      // 输出属性名 a, b, c
    console.log(obj[key]); // 输出属性值 1, 2, 3
}
  // for...of 遍历数组
const arr = [1, 2, 3, 4];
for (const element of arr) {
    console.log(element); // 输出数组的每个元素
}
// for...in 遍历对象的属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key);      // 输出属性名 a, b, c
    console.log(obj[key]); // 输出属性值 1, 2, 3
}

总之,如果你想遍历数组或其他可迭代对象的值,使用 for...of;如果你想遍历对象的属性,使用 for...in

for...of 遍历数组的陷阱:

当使用 for...of 循环来遍历数组时,我们通常是为了遍历数组的元素,而不是索引。然而,在使用 for...of 循环时,有一些常见陷阱需要避免,特别是关于循环索引和遍历顺序的问题。下面是如何正确使用 for...of 循环来遍历数组,以及如何避免这些陷阱的解释:

1. 遍历元素而非索引: 使用 for...of 循环时,我们直接遍历数组的元素,而不需要关心索引的细节。这样可以使代码更加简洁易读。例如:

const array = [1, 2, 3, 4, 5];
for (const element of array) {
    console.log(element); // 输出数组的每个元素
}

2. 避免使用索引: 避免在 for...of 循环中使用额外的索引变量,因为 for...of 循环本身已经直接提供了数组的每个元素。这有助于减少代码复杂性和错误的机会。不推荐的写法:

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]); // 避免这种额外使用索引的方式
}

3. 保持遍历顺序: for...of 循环保证按照数组中的顺序进行遍历,因此它适用于需要按顺序处理元素的场景。这确保了元素的处理顺序与它们在数组中的位置一致。

4. 不会遍历稀疏元素: for...of 循环不会遍历数组中的稀疏元素(未赋值的元素),只会遍历有实际值的元素。这有助于避免不必要的处理。

5. 适用于可迭代对象: 除了数组,for...of 循环还适用于其他可迭代对象,如字符串、Set、Map 等。这使得代码具有更广泛的适用性。

综上所述,使用 for...of 循环来遍历数组是一种更直观、简洁的方式,可以避免许多在传统 for 循环中容易犯的错误。通过专注于元素而非索引,保持遍历顺序,并充分利用循环的简洁性,我们可以提高代码的可读性和可维护性,减少错误的风险。

for...in 遍历对象的不可靠性:

在使用 for...in 循环时,可能会遇到一些问题,其中包括遍历顺序的不确定性和遍历到原型属性的风险。下面是对这些问题的探讨:

1. 遍历顺序的不确定性: for...in 循环无法保证遍历对象属性的顺序。这是因为对象属性在 ECMAScript 规范中被定义为无序的。因此,使用 for...in 循环来依赖属性遍历的特定顺序是不可靠的。

2. 遍历到原型属性的风险: for...in 循环会遍历对象自身属性以及继承自原型链的属性。这可能会导致意外的属性遍历,尤其是当我们只想遍历对象自身的属性时。

3. 原型属性被遍历:

function Person() {
    this.name = 'Alice';
}
Person.prototype.age = 30;
const person = new Person();
for (const prop in person) {
    console.log(prop); // 输出 'name' 和 'age'
}

/**
 * @param {Function} fn
 * @return {Array}
 */
array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
fn = function (n) {
    return String(n > 5);
}
Array.prototype.groupBy = function (fn) {
    const myMap = new Map();
    const keys = Object.keys(this);
    console.log(keys);
    for (const key in keys) {
        if (myMap.has(fn(this[key]))
        ) {
            myMap.set(fn(this[key]), myMap.get(fn(this[key])).concat([this[key]]));
        } else {
            myMap.set(fn(this[key]), [this[key]]);
        }
    }
    const myObj = {};
    for (const [key, value] of myMap) {
        myObj[key] = value;
    }
    return myObj;
};
array.groupBy(fn);
/**
 * [1,2,3].groupBy(String) // {"1":[1],"2":[2],"3":[3]}
 */

4. 使用 hasOwnProperty 过滤原型属性:

for (const prop in person) {
    if (person.hasOwnProperty(prop)) {
        console.log(prop); // 仅输出 'name'
    }
}

5. 遍历可枚举属性:

Object.defineProperty(person, 'country', {
    value: 'USA',
    enumerable: true
});
for (const prop in person) {
    console.log(prop); // 输出 'name'、'age' 和 'country'
}

6. 遍历不可枚举属性:

Object.defineProperty(person, 'address', {
    value: '123 Main St',
    enumerable: false
});
for (const prop in person) {
    console.log(prop); // 仅输出 'name' 和 'age'
}

7. 遍历顺序问题:

const obj = { a: 1, b: 2, c: 3 };
for (const prop in obj) {
    console.log(prop); // 输出 'a'、'b' 和 'c',但顺序不确定
}

8. 遍历字符串属性:

const str = 'Hello';
for (const char in str) {
    console.log(char); // 输出 '0'、'1'、'2'、'3' 和 '4'
}

综上所述,尽管 for...in 循环在某些情况下可以派上用场,但要特别小心遍历顺序的不确定性和遍历到原型属性的风险。在需要遍历对象属性时,推荐使用 Object.keysObject.valuesObject.entries 等方法,以获得更可靠的遍历结果。或者,考虑使用 for...of 循环来遍历数组和可迭代对象,以避免这些问题。

以上就是JavaScript中的for...of和for...in循环容易遇到的问题及解决方法总结的详细内容,更多关于JavaScript for...of和for...in循环的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文