JSforOfForIn——遍曆數組與對象的利器

一、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的遍歷語句時，需要注意其內部實現遍歷邏輯，以免寫出無效的代碼。