VS常用四种遍历数组的方法

for 遍历数组
for in 遍历数组
for of 遍历数组
forEach遍历数组
优缺点总结
原文：https://blog.fundebug.com/2019/03/11/4-ways-to-loop-array-inj-javascript/

在js中我们有很多种方法来遍历数组和对象，它们之间的区别常常让人疑惑，本文中我将详细介绍以上四种方法的区别：
常用形式:
for(let i = 0;i < arr.length;i++){}
for(let i in obj){}
for(const v of obj){}
arr.forEach((i,v) => {/语句/})

1. 遍历数字属性语法：

1.1 for

 var arr = ["1","2","3","4"]
 for(var i = 0 ;i < arr.length;i++){
      console.log(arr[i])
}

1.2 for... in

var arr = ["1","2","3","4"]
for(let i in arr){
    console.log(arr[i])
}

1.3 for... of

var arr = ["1","2","3","4"]
for(var v of arr){
    console.log(v)
}

1.4 forEach()

var arr = ["1","2","3","4"]
arr.forEach((v,i)=>{console.log(v)})

2. 遍历非数字属性：

2.1 for... in

var arr = ["a","b","c","d"]
arr .test = "hahaha"
for(let i in arr){
    console.log(arr[i])
}  //a,b,c,d,hahaha

2.2 其他三种语法;

其他三种语法都会忽略test非数字属性，只有for ... in 会遍历。

3. holes；

holes —— 如果遍历一个有空元素的数组["a"," ","c"]时，for ... in 和 forEach()都会跳过空位，即叫做 holes;
js 数组中是可以有空元素的，且其空元素也会被算到length中

var array = ["a"," ","c"];
array.length;//3

需要注意的是四种for循环模式处理 ["a"," ","c"]和 ["a",undefined,"c"] 的方式不尽相同。

3.1

对于有holes的 ["a"," ","c"] 来说，for ... in 和 forEach() 会跳过，而 for 和 for ... of 不会忽略，

3.2

对于没有空元素的 ["a",undefined,"c"]来说，四种遍历方式都一样。

4. 数组的 this :

for /for ... in /for ... of 时函数外部作用域的this会保留，而使用forEach()时，除非使用箭头函数，否则会改变this。

"use strict";
 const arr = ["a","b"]
 arr.forEach(function(){
      console.log(this)   //undefined
 })
arr.forEach(()=>{
    console.log(this) //window
})

总结;

for 和 for ... in 访问数组的下标，for ... of 和 forEach()直接访问数组的属性值。
建议使用for ... of 方法，它比for 简单，比for ... in 和 forEach()没有那么多奇怪现象。
for ... of 的缺点是读取数组的索引值不方便，而且不能链式调用，使用for ... of 的方法
```
   for(const [v,i] of arr.entries()){
       console.log(i,v)
   }
```

最后编辑于：2020.06.27 13:09:10