关于for...in和for..of

青旅半醒 2022-05-28 14:13 145阅读 0赞

潜意识认为两个差不了多少的，今天忽然发现相差还挺多的。

## (1)for…in… ##

let arr=["weiqiujuan","nihao",7,[12,14]];
    arr.add = 10;//添加的属性；
    function f(arr) { 
        for (let item in arr) {
            console.log(item);
        }
    }
    f(arr);//0 1 2 3 add

我们发现此时的`item`代表的是`arr数组`中的`index`，新添加`属性add`，也直接返回它的`属性`，而不是值。

let arr=["weiqiujuan","nihao",7,[12,14]];
    arr.add = 10;//添加的属性；
    function f(arr) { 
        for (let item in arr) {
            console.log(arr[item]);
        }
    }
    f(arr);//weiqiujuan nihao 7 [ 12, 14 ] 10

此时返回的就是数组的值。

## (2) for…of ##

let arr=["weiqiujuan","nihao",7,[12,14]];
    arr.add = 10;//添加的属性；
    function f1(arr) { 
        for (let item of arr) {
            console.log(item);
        }
    }
    f1(arr);//weiqiujuan nihao 7 [ 12, 14 ]

运行结果表明，这里的`item`就是数组中的值，但是很明显`add`添加并没有`生效`，我们换`用push直接添加值`，是`可以`的。

## 总结： ##

1.for…in 循环的是对象中的属性或者数组中的下标（可以遍历出自定义的属性）。for…of循环的数组值，不能应用于普通对象的直接循环，配合`Object.keys()`使用。  
2.我们在循环对象的时候，用for..in较好；在循环数组的时候用for..of；这样得到的结果个更清晰。

## （3） forEach() ##

> 刚好提到了循环，感觉forEach 也是一个不错的选择。数组自带的方法吧，在应用的时候更为方便，但是效率的高低，谁知道呢

let arr=["weiqiujuan","nihao",7,[12,14]];
    arr.push(10);//添加的属性；
    arr.forEach(function (item) { 
        console.log(item);
    });//weiqiujuan nihao 7 [12,14] 10

看[同学博客][Link 1]的时候，忽然注意到了，`forEach变种`，em…也就是说，这样可以扩大forEach（)的使用范围(比如应用到HTMLCollection,NodeList等等。)

Array.prototype.forEach.call(arr,function(item){
       ...});

[Link 1]: https://blog.csdn.net/major_zhang/article/details/79416462