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
}

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

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

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]}
 */

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

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

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

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

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