for...of 和 for...in 对比

原创已于 2023-02-02 18:19:35 修改 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-02-02 18:17:19 首次发布

自己写了一些简单的例子，将 for...of 和 for...in 进行对比，以加深理解。

一、代码示例

二、for...of 与 for...in 总结

一、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
</head>
<body>

<script>
    let newArray = [1, 2, 3, 4, 5];
    let objArray = [{isChanged: false},{isChanged: false}];
    newArray.name = '数组';
    let obj = {name: 'Jon', age: 22, home: 'xxx'};
    let set = new Set([1, 2, 3, 4, 5]);
    let map = new Map([['A', 1], ['B', 2], ['C', 3]]);

    // for...of 测试
    let testForOf = function () {
        // 1. 普通数组测试
        for(let item of newArray){
            item = 0; // 这里不会改变原数组
            console.log(typeof item, item); // item 为 数组元素的值 ，但只会输出 1, 2, 3, 4, 5，但这里不会输出 name 数组
        }
        console.log(newArray); // [1, 2, 3, 4, 5, name: '数组'] ，观察原数组是否改变，结果没用改变

        // 2. 对象数组测试
        for(let item of objArray){
            item.isChanged = true; // 这里会改变原数组
        }
        console.log(objArray); // [{isChanged: true},{isChanged: true}] 可以看到原数组发生了改变，在是否改变原数组方面，这点和 forEach 以及 map 类似


        // 3. for of 遍历普通对象会报错

        // 4. 遍历可迭代对象，这里以 Set 和 Map 为例
        for(let item of map){
            console.log(item); // ['A', 1]['B', 2]['C', 3]
        }
        for(let item of set){
            console.log(item, typeof item); // 1, 2, 3, 4, 5  item 类型为 number
        }
    }

    // for...in 测试
    let testForIn = function () {
        // 1. 数组测试
        for(let item in newArray){
            newArray[item] = 0; // 这里会改变原数组
            console.log(typeof item, item, newArray[item]); // item 为 string 类型，它是数组元素的键
        }
        console.log(newArray); // [0, 0, 0, 0, 0, name: 0] ，观察原数组是否改变，原数组发生改变

        // 2. 对象测试
        for(let item in obj){
            console.log(typeof item, item, obj[item]); // item 为 string 类型，它是数组元素的键，且这里会输出前面自定义的可枚举属性 name
        }

        // 3. 对象数组测试
        for(let item in objArray){
            objArray[item].isChanged = true; // 这里通过键值访问到对应的某一项，然后也会改变原数组
        }
        console.log(objArray); // [{isChanged: true},{isChanged: true}] 可以看到原数组发生了改变，在是否改变原数组方面，这点和 forEach 以及 map 类似


        // 4. 是否查找原型链测试
        function Parent(){
            this.name = 'parent';
            this.age = 70;
        }
        function Child(){
            this.myName = 'child';
            this.myAge = 35;
        }
        Child.prototype = new Parent(); // 通过原型链继承
        let child = new Child();
        for(let item in child){
            console.log(item, child[item]); // myName myAge name age 均会输出，即会查找原型链
        }

        // 5. 遍历可迭代对象，这里以 Set 和 Map 为例
        for(let item of map){
            console.log(item); // ['A', 1]['B', 2]['C', 3]
        }
        for(let item of set){
            console.log(item, typeof item); // 1, 2, 3, 4, 5  item 类型为 number
        }
    }

    // 测试函数调用
    // testForOf();
    // testForIn();
</script>
</body>
</html>