JSforOfForIn——遍历数组与对象的利器

小蓝 • 2024-12-29 12:52 • 编程

一、JSforOfForIn的概述

JSforOfForIn是一种JavaScript语言的遍历方式，操作数组或对象的元素。它在ES2015中被引入，是一种更加简便易懂的遍历方式，相比于传统的for循环、forEach、for-in等，在代码书写和阅读上具备更高的可读性和可维护性。

二、JSforOfForIn的优势

JSforOfForIn的使用有以下优势：

1、语法简洁：使用for…of和for…in遍历对象和数组，语法简洁清晰。

    const arr = [1, 2, 3, 4];
    for (let i of arr) {
        console.log(i);
    }

2、不会遍历原型链上的属性或方法：for-in语句会遍历对象中的所有可枚举属性，包括它的原型链上的属性，而for…of语句只会遍历对象自身的属性值。

    const obj = {
        name: "张三",
        age: 18
    };
    Object.prototype.sex = "male";
    for (let key in obj) {
        console.log(key); // 输出name、age、sex
    }
    for (let value of Object.values(obj)) {
        console.log(value); // 输出"张三"、18
    }

3、支持迭代器：for-of迭代器支持定制化迭代器，使得在遍历数组或对象时，支持更加复杂的迭代逻辑。

    class Iterator {
        constructor(current) {
            this.current = current;
        }
        next() {
            if (this.current === null) {
                return { done: true };
             } else {
                const value = this.current.value;
                this.current = this.current.next;
                return { value, done: false };
             }
        }
    }
    function* generator() {
        yield "a";
        yield "b";
        yield "c";
     }
    const iter = new Iterator(generator());
    for (let i of iter) {
        console.log(i); // 输出a、b、c
    }

三、注意事项

JSforOfForIn在遍历数组和对象时，需要注意：

1、for-of不能遍历普通对象，只能遍历迭代器对象和数组

2、for-in不能保证属性值的顺序以及不会遍历Symbol类型的属性，对于数组来说会枚举继承自原型对象的方法和属性

3、当需要求数组元素的索引时使用for-of循环遍历数组时。

    const arr = ["a", "b", "c", "d"];
    for (let [index, value] of arr.entries()) {
        console.log(index, value); // 输出0a、1b、2c、3d
    }

四、JSforOfForIn与其他遍历方式的比较

与传统遍历方式相比，JSforOfForIn可以实现相同的功能，而且更简洁易读。

与forEach相比，JSforOfForIn不仅是在代码书写上更简洁，而且可以在遍历的过程中使用break和continue等语句跳出或进入到遍历过程之中。

    const arr = [1, 2, 3, 4, 5, 6];
    arr.forEach(function (value, index, array) {
        if (value % 2 === 0) {
            return;
        }
        console.log(`${index}:${value}`); // 输出：0:1 2:3 4:5
    });
    for (let value of arr) {
        if (value % 2 === 0) {
            continue;
        }
        console.log(value); // 输出1 3 5
    }

五、JSforOfForIn的应用场景

JSforOfForIn的优势在于可以遍历数组或对象元素，因此适用于过滤筛选、查找匹配、排序和映射等操作。

六、小结

JSforOfForIn是现代JavaScript语言中遍历数组和对象的一种简便易懂的语言结构。它的优势在于语法简洁、可读性强、支持迭代器以及可以过滤、筛选、查找、排序和映射等操作。但是注意，在使用for-of和for-in的遍历语句时，需要注意其内部实现遍历逻辑，以免写出无效的代码。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300781.html